How to improve image quality on my ecommerce site due to compression issues?

Store Design
1

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!

1 Like
2

@Dolochoff

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

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

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

1 Like
3

@KetanKumar

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

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

Pass: fanuth

1 Like
4

Thanks for it

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

5

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

Thanks!

6

@Dolochoff

Thanks for update

let me know which image do you have blurry

7

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

1 Like
8

@Dolochoff

do you mean this images?

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

9

@KetanKumar

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

10

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.

11

@tim_1

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

12

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 ■■■■ job resizing.

That’s my IMHO, of course and I am not a registered as photographyexpert :slightly_smiling_face:

13

@tim_1

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!

14

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.