Resize secondary product image on hover

Hi there,

Not exactly sure I'm seeing what you've mentioned.

I've inspected the site and saw that it loads the 300px x 300px sized image as shown here - https://share.getcloudapp.com/9ZuQwe2A

While I can see the 650x650 on the srcset of the image, it doesn't seem like it's being used because the image columns won't exceed 350px as it won't fit in a 4 column manner because the content area won't allow for occupied with of more than 1440px.

Perhaps you've sorted this already? Let us know.

Hello Elvin, thank you for your quick answer.

My concern is about page weight optimization. If you check my home page on PageSpeed Insights, it will report that 8 pictures need to be resized. These 8 are hover pictures displayed on mouse over products thumbnails.

Thumbnails and hover pictures have a rendered size of 300x300px, no problem here.

My problem is that hover pictures load 650x650px images for a rendered size of 300x300px. I would like to know if there is a way to reduce loading time by making them load 300x300px images instead?

Thank you

Hi there,

try the method i provided here:

https://generatepress.com/forums/topic/regarding-properly-size-images/#post-1833700

Hi David,
Your code worked perfectly on shop page and related products but oddly not with recent products displayed on home page. I solved it by adding is_front_page() conditionnal. Here's the full code if it can help someone else :

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

Thanks a lot for your help Elvin and David!

Awesome - glad to be of help!