Search code examples
phpwordpresssrcsetimage-optimization

Wordpress 'SRCSET' Making me confused, How to use it properly for mobile?

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.

Solution

  • 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 =)