Gallery images resize

Hi there,

you can force different image sizes to be selected for different screen sizes - this topic explains how:

https://generatepress.com/forums/topic/mobile-lcp-post-featured-images-2/#post-1917910

Hello David,

thank you for the extremely quick response.

This example is only for one image size. How is this to be changed to 3 or 4 sizes?

So large, medium, small ...

Best regards

Torsten

WordPress automatically generates a number of src-set sizes they are:

medium: 300px
medium-large: 768px
large: 1024px

And your original image size.
You don't want to be adding more Image sizes to your list, as the Browser is rarely ever going to load them and they just take up space in your database.

Looking at your example URL you uploaded an 800px wide image so you have 300px, 768px, 800px for the browser to choose from.
For best peformance you will want the browser to load the 300px on small mobile devices, and the 800px image on larger devices.

Changing the code i linked to your optimium output would be:

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

Thank you David.

I have tried it and nothing changes.

It always takes the original size of 800 × 534. No matter if desktop or mobile.

The code is working as we can see in the HTML this markup:

sizes="(max-width: 360px) 300px, (min-width: 361px) 800px, 100vw"

I get the feeling the lazy loader may be interfering but before disabling that to test, try this snippet:

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

It adds the extra 400px option and gives the browser a little more flexibility in its screen size

Hello David,

Unfortunately, I can't find the solution and I'm getting desperate.

I have created or modified the following code:

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

and

add_image_size('small', 300, 200, false); //Bildformat 300x200
add_image_size('medium', 646, 431, false); //Bildformat 646x431
add_image_size('large', 533, 356, false); //Bildformat 533x356
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'small' => __('Small 300x200'),
'medium' => __('Medium 646x431'),
'large' => __('Large 533x356'),
) );
}

According to Google Insights this works only in the desktop version. Not in the mobile.

But even without the second code it does not work.

What can be the reason?

Best regards

Torsten

Not much i can do about that.
Google is actually selecting the correct sized image. The simulated mobile test it runs is a Moto 4g which suprisingly has x3/x4 resolution. So its going to grab the largest image it can.

Problem is Google reckons that those original images could be far better optimized. You may want re-optimize the original images, for the size they are being displayed you should be able to get the original below 50kb

Hello David,

thanks for the tip with Google Insights.

I have tested directly on two iPhones.

It does not take the version 300x200 but 646x431 on both.

Where is the error?

Best regards

Torsten

iPhone is a retina device with x2 pixel density.
So the browser looks at the requested sizes, we tell it we want 300px, it says ok but i am x2 pixel density do you have a 600px image or LARGER image i can use. Thats what we are dealing with :)