Poor image quality due to compression

[Dolochoff]

Hi guys!

So I am nearing the end of the creation of my site (with the help of very cool people here!) and I have encountered one problem that a lot of people seem to be having with no clear solution - poor image quality due to reduction by Shopify's compression (both product images and others)

Currently, I have 2 versions of my site, one on Shopify, another one on Wix (for comparison) and although I would like to go with Shopify, when I compare image quality, it is really disappointing.. On mobile its absolutely fine, but PC version is really poor. 

Images are in JPG format, high resolution, high quality and low in size (not more than 500KB), so I would definitely be ok without compression..

Is there a solution to this - disabling compression etc.? Images are such an important part of e-commerce..

Help is very appreciated, Im sure Im not the only one!

[KetanKumar]

@Dolochoff 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Dolochoff]

@KetanKumar 

Hey, huge thanks for the reply! Here you go:

Site: https://chocolateinbetween.myshopify.com/

Pass: fanuth

[KetanKumar]

Thanks for it 

can you please share particular section screenshot so i will provide code 

[Dolochoff]

Sure! Could you specify what section exatcly should I send you? Code? If yes, which section?

Thanks!

[KetanKumar]

@Dolochoff 

Thanks for update 

let me know which image do you have blurry 

[Dolochoff]

@KetanKumar 

Well actually all of them! They might not look blurry, but when I compare them to the original, they are; it really does make a difference, especially when showcasing fine design of small size. 

But if you just showed me how to solve the problem with one picture (of one product for example) I could do the rest myself!

[KetanKumar]

@Dolochoff 

do you mean this images?

https://cdn.shopify.com/s/files/1/0532/0156/7898/files/kompresintas_fonas_2000x.jpg?v=1612986547

[Dolochoff]

@KetanKumar 

Yeah, this picture would be one example! But also all the others too - for example all product pictures

[tim]

Can you also share a link to WIX page for comparison?

So far, I only see the obvious problem with girl images shown on hover on homepage as you're using 'grande' images and they are 400x600 (grande  means fit into 600x600px) and you need to fill 480x720px area, so they are stretched.

Also, there may be a little problem because image sizing is programmed a bit off(for whatever reason), say for 1920x1080 screen a 1944px-wide image is used as your Hero image and this causes resizing in browser. And this kind of resizing may be bad for grainy images like yours.

You may try opening your slideshow.liquid section, find this line:

data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"

and change it to reflect real-life screen width, for example, include 1920,  1368, 1440, etc (properly sorted, of course). Similar to

data-widths="[540, 720, 900, 1080, 1296, 1368,  1512, 1680, 1728, 1920, 1944, 2048, 4472]"

This will make theme server 1920px wide image for 1920px-wide screen and avoid resizing in browser.