Responsive images WONT work in mobiles

[gabu69]

I just noticed the responsive images aint working for mobiles in my wordpress site.

For example I test a mobile browser here: ​http://www.recreotesting.com/responsive-images/ and using Google Chrome Developers Tools (F12) I notice the image that is being displayed to the reader is actually the biggest size one.
​http://imgur.com/oipXb3T

But when I do it in a desktop with screen<400px it will work:
​https://imgur.com/YV77xBE

How can I fix this?

Seems the code is fine as far as I see?:<p><img src="​http://www.recreotesting.com/wp-content/uploads/2016/05/TheMask.jpg" alt="TheMask" width="2048" height="1130" class="alignnone size-full wp-image-14412" srcset="​http://www.recreotesting.com/wp-content/uploads/2016/05/TheMask.jpg 2048w, ​http://www.recreotesting.com/wp-content/uploads/2016/05/TheMask-400x221.jpg 400w, ​http://www.recreotesting.com/wp-content/uploads/2016/05/TheMask-730x403.jpg 730w" sizes="(max-width: 2048px) 100vw, 2048px" /></p> /></p>
}}}

Works on desktop but in my mobile (LG 4, chrome 50.0.2661.89) it wont simply work the responsive images which is the point for it mostly right?

[joemcgill]

Hi @gabu69,

Welcome to Trac! It looks like everything is working as expected when I look at your test example. One thing I noticed that may be of help is that you only have three sources available, 400px, 730px, and your full size 2048px version. You may want to add at least one additional size that is larger (maybe something like 1000px). Currently, if a mobile browser has a pixel density of 2x and the viewport width is 400px wide, it's going to look for a source that's at least 800px wide. Since you don't have any sizes between 730px and 2048px, many times it will choose the 2048px size instead of scaling up a smaller image.

To add additional image sizes to your theme you can use the add_image_size() function (​see documentation in your functions.php file.

Since WordPress is working as expected, I'm going to go ahead and close this ticket as a worksforme, but feel free to continue the conversation if you have any questions.

[gabu69]

I see, is there any way to serve the smaller file (400px one) to those devices or mobile browsers that have a large pixel density?

[joemcgill]

With the srcset and sizes markup pattern, the image selection is totally up to the browser and not something that can be controlled from the developer side (by design). If you want to force the browser to choose a specific image, you would probably need to create your own markup using something like the <picture> element (see: ​http://responsiveimages.org/).