[Resolved] loading larger image on mobile and tablet

Hi there,

if you need a larger image on Mobile and Tablet, then specify the larger image in the content template. Loading a larger image then required on desktop is not going to cause you performance issues as it expected those devices will be on wifi/ethernet connections so the extrq bytes can be forgiven.

How are the images being added to the page ? Can i see them ?

OK, to cover:
By default WP outputs <img> with src-set – ie. the various image attachment sizes. And a sizes attribute.
With this information the browser will select the most appropriate sized image.
The default WP sizes is fairly basic and gives the browser a lot of scope.
You can use a function like the following to rewrite the suggested sizes.

eg,

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

So you could use this to tell the browser what size you would prefer it to load on a given screen size. The above fills the more common request ie. smaller screen = smaller image.

For your needs you would do something like so where we only express the size we want on a screen of 1025px or wider. And leave the browser to do the rest

function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(min-width: 1025px) 768px, 100vw';
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

I can’t say for certain this would work for plain old WP images.
But in addition to this you’re site is using an image optimizer that swtiches out WPs <img> to <picture>.
Now picture elements have a much better responsive control, which you can tell the browser the exact size image you want for any device …. BUT, picture is not supported by core, and theres no way we can change its behaviour as they are being added by a 3rd party plugin/service…..

You’re welcome