Poor image quality due to compression

Dolochoff
Excursionist
18 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!

KetanKumar
Shopify Partner
14334 1666 5156

@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 Expert | 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
18 0 6

@KetanKumar 

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

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

Pass: fanuth

KetanKumar
Shopify Partner
14334 1666 5156

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Dolochoff
Excursionist
18 0 6

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

Thanks!

0 Likes
KetanKumar
Shopify Partner
14334 1666 5156

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Dolochoff
Excursionist
18 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
14334 1666 5156

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Dolochoff
Excursionist
18 0 6

@KetanKumar 

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

0 Likes
tim
Shopify Expert
2862 118 938

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. 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes