[Support request] How to serve ‘Medium’ size images in Mobile only?

[David]

1. the browser will choose the most appropriate image size based on those prompts. If you want the prompt to be explicit then you can do:

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

2. anything over and above those sizes that, and the browser will load the full size image. So theres no need to set any higher sizes. See the last part of the sizes ie. 100vw that dictates to the browser to use the largest size to fit the viewport. Which with those options will be your full size image.

Yes, there are a lot of factors here.
From the original image size, the width and height attributes of the image, the src-set attachments WP generates, the sizes attribute and the device screen size and resolution. All of which can be changed if CSS is resizing the image or another image optimizer does something with the code….

3. where is the biggest concern over quality ? On desktop or mobile ?

[victor]

Thanks David!

It’s more nitpicking, but I do notice the drop in quality on both. It’s not hugely noticable, but I suspect there will be a drop in quality with lowered pixel count to ensure faster loading, no?

[victor]

Looks like page speed insights is also picking up “low quality”, I know the values shouldn’t be taken at face value. Attached to private code area.

[David]

Yeah, smaller files result in better performance, but have less pixels so are lower quality.
ITs about finding the right balance between performance and quality.

You may want to consider change the sizes function so the smallest size to at least 300px instead of 150px.

[Author]

Posts