Picture quality with zoom

[RubenM2412]

Hi fokes,

Im currently working on adding products to the site.

Now I encountered a little problem regarding image quality.

My settings are 540×540 pixels and my picture dimensions are also 540×540

Now with zoom disabled the picture is more blurry and stretched then when zoom is enabled. When I hoover on the picture and zoom the picture gets smaller and shows the original perfect quality.

To show you an example I came across on this forum:

https://rotatingmassmedia.com/store/products/dirt-rag-trail-jersey/

That is exactly what is happening to me too. The picture gets blurry again once zoomed out. Even if both settings and pictures are 540×540 px

How can I get to show the original perfect quality picture there?

Thanks so much !

Ruben

[RubenM2412]

Anyone? My post is getting buried 🙁

[Kyle – SUPPORT]

I’m not sure about this, I will forward this to the developer!

Thanks for your patience.

– Kyle

[Swift Ideas – Ed]

Hi Ruben,

The zoom script pulls in the full image size for that image – so simply you just need to upload a larger image. It will be resized for the product page.

Hope that helps.

– Ed

[RubenM2412]

Hello Ed,

Thanks for your reply:)

Unfortunately, this doesn’t work.

I’ve tried adding pictures of over 1200x1200px, but the single product image still looks a bit blurry compared to the original.

Any other ideas?

Thanks so much

Kind regards,

Ruben

[Swift Ideas – Ed]

Can you send me a link to your site to check? We have tested this here, and confirmed that it’s working as expected.

– Ed

[Kyle – SUPPORT]

Hi Ruben

Your image is 640 x 480, so how come you are using 540 x 540 as your dimensions? I’m guessing this is why it is blurry, before zoom the image is resized to 562 × 449.

– Kyle

[RubenM2412]

Thanks for the reply !

I will get the login details on here asap.

@ Kyle : That is not my page 🙂 This was just an example to show you the problem. Zoomed in perfect quality standard size blurry

Thanks again

[Swift Ideas – Ed]

Let us know, we’ll take a look 🙂

– Ed

[michaelagwunobi21]

I’m having this problem too

[Melanie – SUPPORT]

Can you make sure you checked if you tried all the solutions already posted? If not, please attach your login details in a private reply and we’ll check it out!

[saturnerond]

I came across the same “blurry image” issue as I have to display crystal-clear sculpture details images. Here is my understanding so far and what I tried (or not).

A 562px wide thumbnail is always used as the product main image. This thumbnail size is generated by the theme itself –ie, changing Woocommerce or WordPress media settings will not make your 540px image look better.
– When uploading a 540px image, an enlarged 562px thumbnail is generated. This size increase makes the image blurry (a matter of resolution). When zooming over the product image, the full size image is displayed : clean, but smaller (540px wide in your case) than the product main thumbnail (562px wide) = you have no zoom effect
– When uploading a say 1200px wide image, this image is downsized to 562px as well and gets a bit blurry too, but much less than when the image is enlarged. This is not a theme issue but due to the way WordPress handles image resizing

I decided to upload ~850×1275 images (2/3 format). The product image is a bit blurry indeed, but of acceptable quality and users can get a crystal-clear view of details when zooming.
Alternatively you can :
– Make the 562px wide thumbnails with an image editor and upload them into your WordPress upload folder to replace those generated by WordPress. This makes good quality product images but is not exactly handy
– Try (I didn’t) to upload images at a higher resolution (for instance 92-100dpi rather than 72) and see whether this makes better quality thumbnails or not. This anyway will make your site slower, which is not good
– If your web host has the Imagick engine installed, you can try (I didn’t) to use the ImageMagick plugin. This one handles image resizing differently and is meant to make better quality images

In any case, keep the 540×720 Woocommerce image settings suggested to display portrait images. This image size (catalogue image setting) is required to display product thumbnails properly on Archive pages (shop, categories) and related/up-sell products.
– The image span size on such pages is 270px wide. A 540px wide (2 x 270) image makes it Retina-okay
– The Product Detail same 540×720 setting only tells WordPress to not generate a different thumbnail size for the products main image, as this one will not be used (the 562px thumbnail is instead). This ensures your disk space is not loaded with useless image files

In a nutshell,
– The theme overrides Woocommerce main product image size : You definitively need to upload images wider than 562px. Length is not an issue, as far as you don’t go beyond a 2/3 ratio (or maybe you would need to untick hard crop)
– You need however to stick to the 540×720 suggested settings for Woocommerce images
– After that, whether images get blurry or not is not theme-dependent

Voilà. Please tell me if I’m wrong somewhere.

[saturnerond]

Sorry, I’ve been confusing
If you want to use square images your Woocommerce settings need to be 540x540 indeed. But you still need to upload images larger than 562px. Larger is your full-size image, bigger is the zoom factor (and your file size).

[Swift Ideas – Ed]

Hi there,

You don’t need to stick to those image sizes, and larger resolutions are strongly suggested if you want to take use of the zoom feature. The zoom feature uses the full image size, so if you are using an image that is the same size as the area at it’s maximum, then it will have to zoom on the image, not an area of the larger image.

– Ed

[fabiohenriqueoc]

Tenho o mesmo problema. Não sei o que fazer.