[Support request] Regarding: “Properly size images”

[Juned]

Hi,

I have gone through some of your threads to resolve “Properly size images” issue at my site’s Shop and Category archive pages. I have installed the plugin ‘Regenerate Thumbnails’, but the still it’s been pointed at PageSpeed Insights.

I am using Imagify plugin also and using WebP format. I have discussed the issue with Brian (Perfmatters) also, but finally I am approaching you.

Please guide me how to resolve this issue.

Thanks in advance.

[David]

Hi there,

first off its the Woocommerce plugin that controls the sizes of the images being displayed. And the Properly Size Images opportunity gets raised when the requested image is 4kb or greater in the size then the one being displayed, so unless images are perfectly sized and well optimized you may still see this opportunity.

The issue you have is the images being displayed on mobile are around 150px wide, and the PSI report uses a simulated Moto 4G which has a x3 HD Device, and by default the WP src-set sizing doesn’t account for images that are not 100% the width of the screen … so the browser grabs the best size image for a HD screen which in you case is the 768px image.

What we can try with the following PHP Snippet is to force the browser to load a smaller image on the smaller screens:

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

This works with images output by the Theme but i cannot say it will work in this instance as you have a webP converter in place.

[Juned]

Thank you very much for the detailed response Sir.

I added your PHP Snippet, but there’s not any effect. Kindly guide me further.

[Juned]

Should I resize my Shop and Category archive page’s thumbnail images?

If yes, what is the recommended size?

[David]

Well the code is working but google PSI simulated browser still wants to load a larger image for the HD screen – which is why it gets the 768px image.

You could try setting the Woocommerce Catalog image to 600px – which sounds crazy but it will automatically generate a 600px wide image which the browser may then choose for the HD Screen.

[Juned]

Sir, at WooCommerce Product Images, the Main image width was already 600. I made Thumbnail width also as 600.

But I believe the PageSpeed Insights score has gone bit down. Kindly suggest further.

[David]

You may as well change the Catalog image size back to what you had it previously. The browser and PSI should at least be selecting the 600px image as its available – but as the image HTML is being manipulated by the webP conversion that could be interfering.

The last thing i can think of to try is this snippet:

function set_max_srcset_width( $max_width ) {
    if ( class_exists( 'WooCommerce' ) && ( is_product_category() || is_shop() ) ) {
        $max_width = 300;
    } else {
        $max_width = 768;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

In that code there are two $max_width variables.
First one: $max_width = 300; this will be the largest size used on the shop archives. It’s value should match what you have in your Product Catalog width.

The second one: $max_width = 768; is for every other page in your site and should be set to the largest image size you require.

[Juned]

Sir I followed this PHP snippet. Kindly suggest further.

[David]

Make sure you clear your plugin and browser caches.
But i ran a Google PSI test on the page and that code worked – the ‘Properly size images’ opportunity has gone

[Howard]

Hi
I have worked and read on properly sizing images but hardly understand the main “ways” to enact this for every feature image on my site.
Some images are called out by google and GT metrix and some are not. But I CAN NOT UNDERSTAND why it is and why they are not.
If you look at my last image, for example on my blog home page vs. the actual article page, and read google page or gtmetrix you can see that it always “Calls me out on the mobile, whereas desktop it does not. This I don’t understand and know not how to fix.
(eg, https://www.thesoundadvocate.com/ ) or e.g. ( https://www.thesoundadvocate.com/2022/11/octave-records-shelter-by-megan-burtt-released/)
Is there a layman’s understanding or way to go about fixing this?
Thanks
Howard

[David]

Hi there,

try adding this snippet to your site:

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);

This will change the <img> HTML to include a sizes attribute to tell the browser the exact image size it should load on the various device sizes.

This will minimise the risk of an image being flagged for Properly size images by loading the smallest attachment size on the smaller devices.

However, some images don’t compress very well, and may still get flagged and there isn’t much that can be done without editing and recompressing the original image.

[Author]

Posts