Low resolution on product page

  • Resolved kureman

    (@kureman)


    1 year, 7 months ago

    Hello,

    I noticed that, on a big screen (= computer), the resolutions of the images that have been reduced with the plugin are quite low on some pages, especially on the simple product pages of my store.

    The resolution is good when zooming in on the image but the picture looks a bit blurry before that.

    Is there any way to avoid the loss of quality on the product pages?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    Hi @kureman,

    Thank you for your message.

    I made a test for 3 images:

    • the eventail-encre-de-chine-face.jpg image weighs 1.21 MB, and after conversion to WebP weighs 48 KB (0.048 MB)
    • the eventail-encre-de-chine-tampon.jpg image weighs 1.84 MB, and after conversion to WebP weighs 176 KB (0.176 MB)
    • the eventail-komaru-pochette.jpg image weighs 1.28 MB, and after conversion to WebP weighs 55 KB (0.055 MB)

    Here I have added images in both JPEG and WebP versions. I don’t think there is any difference between the two images.

    You can reduce the weight of the images even more by converting the images to AVIF. Images in AVIF format will weigh approximately 55% less compared to images converted to WebP. The image quality of AVIF format is the same or better than that of WebP format, despite being much lighter.

    Can I ask you for more information about blurred images?

    Best,
    Mateusz

    Thread Starter kureman

    (@kureman)

    Hi @mateuszgbiorczyk ,

    Thank you for your fast answer!

    Indeed I don’t see any difference on your images either. But I see a quality difference on my site, in fact, even on mobile. I don’t know the cause yet.

    I took some screenshots here
    – The image named “1-Eventail-product page-1” is a image of a product as I see it on my site, you can see it’s a little blurry
    – The image named “2-Eventail-product page-2” is the same image as #1 but I pressed on the magnifying glass in the right upper corner. You can see the quality is better.
    – The image named “3-Eventail-product page-1-zoomed” is the same image as #1 but I zoomed in with my two fingers (or ctrl+mouse on PC). It’s very blurry.
    – The image named “4-Eventail-product page-2-zoomed” is the same image as #2 but I zoomed in with my two fingers (or ctrl+mouse on PC). The quality is good.

    I am using two plugin to compress images : TinyPNG and Converter for Media. These images are not compressed with TinyPNG yet.
    Could I try to disable Converter for Media only to check if the quality changes?

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    @kureman Please remember that the blurring of images depends on many factors. The main one is the image resolution and the resolution of the displayed image, i.e. an image 1200x1200px is displayed as 500x500px. This can cause a change in quality.

    You can deactivate the plugin. When disabled, the original files will be loaded. However, please remember to clear the cache in your browser or use incognito mode.

    Thread Starter kureman

    (@kureman)

    Hi @mateuszgbiorczyk

    Thank you again for your answer. You’re right, the quality issue is not due to Converter for Media, it’s as you said a problem with the resolution of the displayed image. I don’t know how to get a better quality yet..

    I thought the TinyPNG plugin, which duplicates the original image into multiple images fit for woocommerce etc might help here but I don’t think it does.

    Anyway, I close this topic since your plugin works fine ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Low resolution on product page’ is closed to new replies.