0

I am trying to decrease the size of the images in my WordPress blog. As I know srcset is the first step to do that. After analyzing my web pages I notice, that WordPress not showing srcset properly or maybe browser is picking up wrong image.

SRCSET:

<img class="alignnone size-full wp-image-219923" 
src="http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360.jpg" alt="dsc_8360" width="4928" height="3264" 
srcset="http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360.jpg 4928w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-600x397.jpg 600w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-768x509.jpg 768w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-1024x678.jpg 1024w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-150x100.jpg 150w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-800x530.jpg 800w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-100x66.jpg 100w, 
http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-200x132.jpg 200w,
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-300x199.jpg 300w, 
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-400x265.jpg 400w, 
 http://mywebsite.com/wp-content/uploads/2016/10/DSC_8360-500x331.jpg 500w" 
 sizes="(max-width: 4928px) 100vw, 4928px">

SCREENSHOT

enter image description here

As you can see in screenshot, Chrome inspect is showing currentSrc image size in url 600x397. I am using iPhone 5 as user agent.

  • If the size of the device is 320, then why browser is loading 600px
  • images? How srcset works in WordPress? Can I add my own srcset
  • for content images and feature images? How?

I don't need the code to solve my problem. I need direction and suggestion to solve this problem and to learn more about image optimization.

Rocky Sena
  • 481
  • 1
  • 5
  • 15

2 Answers2

0

Possible reason 1:

iPhone is 320 x 568 px and you can turn it, so it can either be 320 x 568 px or 568 x 320 px.

So, instead of downloading the 320w image on portrait and the 600w image on landscape, the browser only downloads for the largest size.

Possible reason 2: The browser picks the "best" source image, but iPhones have a different pixel density than other devices. Hence, browser is picking a larger image (about twice the size) while still emulating a 320"px" width.

Give a try to another kind of device, with a "normal" pixel density and check if it retrieves the image you expect.

The living spec for srcset attribute will tell you more about it https://html.spec.whatwg.org/multipage/embedded-content.html#srcset-attribute

Xenos
  • 3,351
  • 2
  • 27
  • 50
  • I tried this with Galaxy S5 and Nexus 5X, its showing `currentSrc` image 1024x678 for both of them. For Nokia Lumia 520 its showing 500X331px image. How it works? – Rocky Sena Oct 07 '16 at 12:45
0

The default full screen size of the iPhone 5 is 320 x 568 px, but, this is half of the screen resolution because of the pixel doubling in a Retina display. So, your wordpress is working as expected =)

Jota Ge
  • 298
  • 3
  • 16
  • I didn't get it! Sorry but can you explain it to me? I tried the same thing with the agent IPhone 5 with screen size 320 X 568 in Chrome. But the result is same. – Rocky Sena Oct 07 '16 at 12:39
  • Te resolution in mobile screens, is not the same as in computer ones. Read about retina display and you will understand how it works. The density in the screen pixels is not same – Jota Ge Oct 07 '16 at 12:57
  • I think I get it. Thank you to tell me about retina display. I will study more about it. I want to display low quality images on mobile. Can I disable the retina detection for srcset? is it possible? – Rocky Sena Oct 07 '16 at 13:04
  • I think that you can't. You can modify the detection, but the screen resolution is the screen resolution, and srcset detects it =) – Jota Ge Oct 10 '16 at 10:35