How to serve 'Medium' size images in Mobile only?

Hi there,

WordPress provides the wp_calculate_image_sizes filter hook, that you can use with a PHP snippet to rewrite the img HTML sizes attribute, which is a kind of prompt for the browser to choose a specific size image.

Try adding this snippet:

function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw';
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

It has 3 breakpoints set, with the 300px image set for mobiles.

This explains how to add PHP: https://docs.generatepress.com/article/adding-php/

Thanks David.

I implemented it but I'm not sure how to use it still. I modified it using different values and haven't seen any difference, am I supposed to? I've been looking through the inspect elements tab on the images -- not fully clear on what's going on. It seems like the image is sized through width and height dimensions?

Where did you add the code ?

I used the code snippets plugin, setting was 'Run Snippet Everywhere'.

Are you using any optimization or caching plugins on the site?

Using Smush and Converter for Media. Deactivated post and played around with the above snippet, no dice!

Is there any way i can see it with those plugins out the way and after any caches are cleared?

Note: those plugins may rewrite image HTML, if thats the case it may not be possible to make this work.

Sure! I'll deactivate them for the next or two / when I hear back from you!

I attached some additional 'Private information' which has a screenshot of my plugins.

Hi Victor,

I don't see David's code running on your site, can you make sure the PHP snippet is activated？

And can you try disabling all your other plugins for now to eliminate conflicts?

If it's a live site with traffic, I would recommend creating a staging site to do the testing.

Just activated the script. The plugins currently activated have no effect on pages directly unless I'm mistaken but I can disable them if you want me too.

The snippet is working, the image size attribute has been changed:
https://www.screencast.com/t/oqQ1OFNgzFJT

Can you try modifying (max-width: 420px) 300px to (max-width: 420px) 150px of the code to test?

Modified, I am seeing the change in inspect as your picture shows but no visual change in UI.

Change your image sizes to Medium Large, the code i provided simply prompts the browser to load the smaller images when viewed on smaller screen.

Oh gosh, I'm an idiot, thank you! I have a few questions!

1) The code snippet above "(min-width: 421px) 768px" effects large screens even though there is "(min-width: 769px)", is this intended?

2) I'm assuming there is an upper limit, i.e., if I put "100000 pixels", it'll just render the image in max detail?

Edit:
Seems this depends on a lot of factors according to your response to others

3) Any other recommendations for optimizing in this way and keeping images looking as detailed as possible?