How can I maintain image quality when resizing for my e-commerce homepage?

[Ammar9]

Hi, 

We have an e-commerce website for jewellery business:

https://niya-kk.myshopify.com/

pass: osoadmin

High-quality pictures are very important in our line of work. We have very high quality pics, but when we resize them for our homepage, the quality/clarity is lost. This is not just for the main sliders but for all pictures in our homepage. (Below 4 pics are samples of unclear pics)

 

High Quality Pic for comparison:

I think the quality is lost because of the auto-image size reduction Shopify does. Can you please advise how to resolve this issue as clear images are very important for us.

[JonWright]

I think you'll need to experiment to get the best results. You're right that Shopify auto-optimizes images but not significantly. I think you have some other issues:

Just looking at your hero images:

- You have Opacity set to 1 which will darken your images, you can change this to 0 in your theme customization options

- Your images are all PNG, I think you'd be better to use JPEG (same quality for smaller Kb size)

- Your hero images are all really small (30-40Kb), at that file size they are never going to be great quality so you need to up it to around 100-150Kb (if your sources images are all high quality as you say then they are probably much bigger than this, so you'll need to optimize them down to an appropriate size)

- If you optimize them to 85% as a JPEG then Shopify won't optimize them further, so you should get the results you are expecting (there is an article here which shows you what Shopify optimizes and what it doesn't https://help.shopify.com/en/manual/online-store/images/theme-images#compression-rates )