All pictures are blurry unless i zoom in/out

[m4rkl1n]

I'm not sure what I did to my website but many pictures have suddenly became blurry. It used to all be quite clear, so i know its not the images that are low quality.

Previously it became better as i zoomed out, now its the opposite.

Left image is 120%, right is 130, this is the only one where i notice it become more clear instantly. how can I fix this?

Thanks in advance.

https://www.linnovate.co.nz/

[Dan-From-Ryviu]

Hi @m4rkl1n 

You can go to Online Store > Themes > click "..." in Current theme > Edit code > open card-product.liquid, remove those lines of code, save file and check again.

[m4rkl1n]

Hi, this has not fixed the issue. It also affects all images, not just product/collection images.

[SEOAnt-Jeffery]

Hi @m4rkl1n

This is Jeffery from SEOAnt APP Team to have a look at your issue!

I feel very sorry to hear about this situation from you after reading. There are several factors that will make images display in a blurry way. Please kindly further check based on my shared feedback below, and see if one of them can do something for your store. Thank you!

1. The way of uploading images. There are two ways of uploading images on Shopify: adding an image from a local device and adding an image from a URL. If you choose the way of adding an image from a local device, Shopify will compress this kind of image if the backend detects that the size of the image is too large, or it will slow down the store's speed. Therefore, the image will be blurred after uploading. If you consider the way of adding an image from a URL, this situation will be reduced.

2. Other apps' affection. If you installed other external apps from the Shopify admin page, which will optimize image sizes on the store. Your image quality will be affected. Another severe situation is when you install several apps or plugins from the backend; they will compress your store images based on the settings over and over again, which will lead to an overcompression situation. Thus, my suggestion here is to have a carefully check whether your store installed such kind of apps or plugins to do so and if so, better uninstall or remove the unnecessary ones and keep the most popular and valid one only, so that they will not be in chaos and affect your store images too much.

3. Code causes code. Kindly check via this way with your team or developers if they add or insert related code blocks, which will change the property or status of images existing on your web pages. If there is one of them related to this blurry situation, comment or disable related code contents immediately and test again if this issue persists. In this way, you can investigate and dig out the cause code to prevent this issue from happening again.

Since you only share the store URL in this topic, I find it quite hard to locate your issue-related URLs. If possible, you can also share the issue-related URLs here and I will check them with our APP Team developers for further review. Thank you!

[m4rkl1n]

Hi, the images are all uploaded from my computer as a file, not URL.

The issue can be seen from the main URL that i provided, in the collection list.

Thanks

[SEOAnt-Jeffery]

Hi @m4rkl1n

Thank you for giving me more details about this issue. I appreciate your response very much.

If the images are all uploaded as a file directly, may I know if you do the image compression before uploading? If you did the compression before, you can further check if the tool used to compress is working fine or not, as some compression tools will change the image size and quality. It is suggested to have a lossless compression before uploading as a file to Shopify directly.

One more thing, you said the issue exists in the collection list, but I notice plenty of collection pages on your store. May I know if this issue happens on all the collection lists or one of them specifically? You can still choose to share with me the page URL, for example. Thank you!

[m4rkl1n]

I think it affects all, but more obvious on some like the one i provided at the beginning, or decorative wall panels, if you zoom into that you can see it becomes clearer, in the first collection of main page.

And it's definitely not related to compressing, i haven't compressed any images and even so, it was all fine before and only recently became blurry.

[SEOAnt-Jeffery]

Hi @m4rkl1n

I have checked your images on the collection page again, and it seems like they are all good so far. I guess it may be due to the loading issue on your website. You can have a test on other browsers and see if normal or not.

If you are not compressing images in the process of uploading, then it should be related to the image displaying on the Shopify end. You can also seek help from Shopify and share this situation, then double-check if there are other ways to optimize this situation. Thank you!