Poor image quality due to compression

Dolochoff
Excursionist
19 0 6

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!

Replies 13 (13)

KetanKumar
Shopify Partner
36839 3635 11972

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dolochoff
Excursionist
19 0 6

@KetanKumar 

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

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

Pass: fanuth

KetanKumar
Shopify Partner
36839 3635 11972

Thanks for it 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dolochoff
Excursionist
19 0 6

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

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@Dolochoff 

Thanks for update 

let me know which image do you have blurry 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dolochoff
Excursionist
19 0 6

@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
Shopify Partner
36839 3635 11972

@Dolochoff 

do you mean this images?

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dolochoff
Excursionist
19 0 6

@KetanKumar 

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

tim
Shopify Expert
3258 232 1178

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. 

Dolochoff
Excursionist
19 0 6

@tim 

Hi and thanks for the reply! Sorry for late response, had to stay longer at work today;

I'll gladly share wix page - I think the difference will be quite clear this way, so there it goes:

Wix - https://wix.to/hMDiDKk

Shopify - https://chocolateinbetween.myshopify.com/

Pass: fanuth

tim
Shopify Expert
3258 232 1178

While you can't directly compare the Hero images, I'd say that product pictures are way over sharpened. Yes, they look better at first, but then they are getting difficult to look at. If you say that they descend from the same master image, both Shopify and Wix I'd say that Wix does a shit job resizing.

That's my IMHO, of course and I am not a registered as photography expert 🙂

Dolochoff
Excursionist
19 0 6

@tim 

I see your point about sharpness in Wix, but I'd rather choose oversharp than undersharp - especially having in mind the small dimensions of my designs.

Also, why can't we directly compare the Hero images? I really think the way it looks on Wix is much nicer, the sharpness of Logo letters is clear, also one can see the graininess of the BnW film photo on Wix version much better.

But anyway - my question would be: is it possible to somehow tweak or disable Shopify's image compression system? I'd really love to at least play with it and see how it goes.

I would love to stay with Shopify, I think it is much more superior to Wix in terms of E-commerce, but man, getting the visuals just right is soo important here too..

Thanks for the help!

tim
Shopify Expert
3258 232 1178

No, you cannot control the way compression and resizing work in Shopify. Can try PNG as Shopify does not compress them as much, but unfortunately, they are much heavier.

Finally, I remember some people mentioned in forums serving  their images from other hosting providers, like Sirv, which can even automatically fetch "master" images from Shopify for further processing. This will require significant theme changes though.