[Resolved] loading larger image on mobile and tablet

[Sam]

Hi,

I’m using Content-Template for my archive page.

The layout is four columns, and I set the featured image size to medium (custom size, around 300px) using the editor select box on the Element page (image 01)

Everything works well on desktop screens, but the image gets enlarged on tablet (two columns) and mobile (one column).

How can I load larger images ONLY for tablet and mobile screens?

Kindly note that I have a larger version of my images,
But image size/load time is crucial to me, so I’d rather load large images only when necessary.

[David]

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.

[Sam]

That’s my current approach, but as you know, retina images are @x2 multiplied by the number of photos I initially load (a grid of photos), and the page weight gets very large quickly.

Is it possible to load different image sizes for mobile devices?

thank you for your help David.

[David]

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

[Sam]

Dynamically via the content template, I guess!
I included temp access to a dummy skeleton I have online. The images’ size differs from that of my local dev environment, but everything else is almost the same.

[David]

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…..

[Sam]

Thank you so much,
This is exactly what I was looking for!

[David]

You’re welcome

[Author]

Posts