WordPress: Change responsive image sizes in WooCommerce product page

Question

I want to change the scrset output for the WooCommerce gallery images.

At the moment I'm using the thumbnail size woocommerce_single. It works fine for desktop because the image has an height of 450px. But the image on mobile is a bit smaller with an height of 300px.

At the moment the image output looks like this:

<div class="product-gallery-image">
      <img width="397" height="450" src="https://example.com/wp-content/uploads/2020/06/image-397x450.png"
      srcset="  https://example.com/wp-content/uploads/2020/06/image-397x450.png 397w, 
                https://example.com/wp-content/uploads/2020/06/image-265x300.png 265w, 
                https://example.com/wp-content/uploads/2020/06/image-904x1024.png 904w, 
                https://example.com/wp-content/uploads/2020/06/image-768x870.png 768w, 
                https://example.com/wp-content/uploads/2020/06/image-72x82.png 72w, 
                https://example.com/wp-content/uploads/2020/06/image-108x122.png 108w, 
                https://example.com/wp-content/uploads/2020/06/image-212x240.png 212w, 
                https://example.com/wp-content/uploads/2020/06/image-53x60.png 53w, 
                https://example.com/wp-content/uploads/2020/06/image.png 1017w" 
    sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px">
</div>

As I understand it, the image used for the mobile view is the version with the height of 450px. Because of this line:

https://example.com/wp-content/uploads/2020/06/image-397x450.png 397w,

I think that's the reason why I get errors in Lighthouse like this:

Properly size images Serve images that are appropriately-sized to save cellular data and improve load time. Learn more.

It shows the 450px version as the unoptimized version.

I now want to use the version with 300px height in the mobile view. But in my code this image is used only in viewports below 265w.

In my research I found a few examples to change the output of srcset. Like these two from here:

function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
    $width = $size[0];

    if ( 740 <= $width ) {
        $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
    }

    if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
        if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
             $sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
        }
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );

And this one:

function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
    if ( is_archive() || is_search() || is_home() ) {
        $attr['sizes'] = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
    } else {
        $attr['sizes'] = '100vw';
    }

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );

I tried to understand it but couldn't figure out how to manipulate a single thumbnail like woocommerce_single in my case.

Do I miss anything or isn't that possible at all?

WordPress: Change responsive image sizes in WooCommerce product page

0 Answers0