Archived topic
WooCommerce Product Main Div Size
1 reply · Started by Simon on August 3, 2021
Hi,
On The woocommerce product page the div that contain the image is set to a width 50%, My image width is 600px but with the div at 50% width the image resize to 570px, GooglePageSpeed Flag the problem “Properly size images”.
how can i resolve this ?
Thank you
Hi there,
I had to run the PSI test several times to get the Properly Size Images opportunity to appear. Have to love google somedays :)
So the issue is on mobile only, and changing the Customizer > Woocommerce > Product Images > Main Image width from 600px to 570px isn't going to make any real difference, when google reckons a 22% image size ( kb ) saving can be made. So i would leave that alone.
Instead you can try adding this PHP Snippet:
function db_modify_srcset_sizes($sizes, $size) {
if( class_exists( 'WooCommerce' ) && is_product() ) {
$sizes = '(max-width: 360px) 300px, (min-width: 361px) 600px, 100vw';
}
return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);That should force the browser ( and google ) to load the 300px image on the small mobile device.
Adding PHP: https://docs.generatepress.com/article/adding-php/
