Pictures lose clarity when uploaded

Ammar9
New Member
1 0 0

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)

pic 1.PNGpic 2.PNGpic 3.PNGpic 4.PNG 

 

High Quality Pic for comparison:

Landing page banner 1 edited.jpg

 

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.

Reply 1 (1)
JonWright
Shopify Partner
771 110 332

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 )

If helpful then please Like and Accept Solution
Owner of Neuralcandy Shopify Agency