[Support request] Blurry Woocommerce images

Home Forums Support [Support request] Blurry Woocommerce images

Home Forums Support Blurry Woocommerce images

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #708791
    Anna

    Hello, I have a problem with product images on my site. They are blurry on product page, but when I refresh the same page they get sharp. I used “regenerate thumbnails” but it didn’t work. I tried to make page width smaller, but it didn’t help too. Customizer did’t help too – image sizes on product page are 400px, but theme doesn’t seem to see that. It happens only when I have GP as a theme. When I have for example twenty seventeen all images are ok.

    Also second question, is there any way to change the proportions of thumbnails displayed under big image? They are square now, but my images are in proportion 3×4.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #708888
    David
    Staff
    Customer Support

    Hi there,

    GP uses the base Woo templates, the single product page columns are 48% of the container width, so your product image is being output at 525px. So you would need to increase the image size or reduce the container width.

    The gallery thumbnails can be adjusted using this filter:

    add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
        return array(
            'width'  => 100,
            'height' => 133,
            'crop'   => 0,
        );
    } );

    https://docs.generatepress.com/article/adding-php/

    Note: crop => 0 is uncropped, change this to 1 to crop the image. You will need to regenerate thumbnails afterwards.

    #708894
    Anna

    None of these work for me πŸ™ They are still blurry on product page, they get sharp only when I refresh the page.

    #708901
    David
    Staff
    Customer Support

    Can you try opening the page in an incognito / private browser?

    #708902
    Anna

    Yes, and the result is still the same.

    #708905
    David
    Staff
    Customer Support

    the images are still being output larger than 400px. Have you tried increasing the Product image size to say 600px?

    #708907
    Anna

    My images size is 573×784. It is not the fault of their size, because when I refresh the page they are sharp. It’s even ok when I just move the browser window and then they are suddenly getting sharp.

    #708932
    David
    Staff
    Customer Support
    #708940
    Anna

    Sorry, but I can’t see on this video if images are blurry or not πŸ™ The video is blurry itself πŸ™‚

    But here are my screenshots, before and after refreshing the page (or moving browser window): https://we.tl/t-MT23pPP5d5.

    #708943
    David
    Staff
    Customer Support

    Its odd, as i am not seeing a change in quality when refreshing or adjusting the browser. This sounds like a caching issue or another plugin such as Jetpack Photon effecting the images.

    #708961
    Anna

    I do not have jetpack, it is very odd because I also tried two other computers and other browsers and problem is the same. Nothing helps. But it happens only when GP is activated πŸ™

    #708967
    David
    Staff
    Customer Support

    Strange. To eliminate any resizing issue can you set your product image width to 473px – which is the exact container size. Let me know.

    #708996
    Anna

    Ok, reducing container width + setting image width to original (573px) helped. It’s not 100% quality but it’s much better now πŸ™‚ Thank you.

    Do you have any idea about my second question: is there any way to change the proportions of thumbnails displayed under big image? They are square now, but my images are in proportion 3Γ—4.

    #709005
    David
    Staff
    Customer Support

    Thats great. May be worth considering uploading an image that is twice the size of the woo product image size. Then when it is resized by Woo it will be an exact 50% reduction which reduces the chances of pixel artefacting / blurring. Also you have an image twice the size which would be used in the Zoom or lightbox.

    Did the above filter not work for resizing the gallery thumbs?

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.