[Support request] Woocommerce Blurry Image

[Johannes]

Hi,

I went through all the recommendations in the forum:

– changed the image sizes in customize – woocommerce – product images
– regenerated all thumbnails
– deactivated all plugins
– looked for css issues

but I do not find the solution. Pls help.

Thats the website: https://flameno.at/

https://flameno.at/hosen/

Many thanks

[Johannes]

in particular i am referring to this page: https://flameno.at/hosen/

[David]

Hi there,

you may want to try:

1. Double the Image Size for the Product Catalog to 616px – this will enable retina displays to show higher quality.

2. Change the column sizes and images to match a better aspect ratio of your original images. If i look at your Single Product image its original size is 1415px, when this is scaled down to 308px you end up with an odd ratio ie. 308 / 1415 = 4.6. Ideally you want this ratio to be a whole number…..

[Johannes]

Thank you, David.

– I changed the catalog images in customize – woocommerce – product images.
– I cannot change the column sizes in customize – layout – woocommerce
Whenever I change it there it does not show any changes.

Best,
Johannes

[David]

It’s not easy to do – and takes a little Maths.
For example if you set your Container Width to 1200px. And you set your columns to 3 – then each column + the Column Gap will equal 400px – you can check the this using the Browser Inspector. So the tricky part is

1. Defining your Container Width.
2. Uploading the Full Image that matches that size.
3. Calculate the exact column widths.

As i said its a bit tricky.

[Johannes]

Since the other products seem to be ok, we will use the same resolution as them.
This might fix it.

Thanks!

[David]

You’re welcome

[Author]

Posts