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
As you can see in screenshot, Chrome inspect is showing currentSrc
image size in url 600x397. I am using iPhone 5 as user agent.
srcset
works in WordPress? Can I add my own srcset
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.
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 =)