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!
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.
Thanks for it
can you please share particular section screenshot so i will provide code
Thanks for update
let me know which image do you have blurry
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!
do you mean this images?
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.