Why are my product images suddenly blurry on Debut theme?

Store Design
1

Hello,

I’m having problem with all my product images turn blurry recently.

I have use edit program to change all my product picture into square HD 2048x2048.

It was fine, the image were all clear even when zoom in. However just recently, I don’t understand why, all image turn blurry. even i upload new one, it sill blurry. I even test with my previous copy debut theme (for backup), the result is the same.

Anyone have any idea/suggestion?

Thank you in advance.

2

Hello @sophearot ,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) & screenshot where you want to do modification, so that I will solve your issue here!

3

Hello,

https://alyn-japan.myshopify.com/

please check. all image are blurry.

4

@sophearot

In most cases when your images appear blurry and change color it’s because the image was stripped of its color profile, and compressed upon importing.

You’ll want to ensure that the images you’re using are 1024x1024 high-resolution photos to ensure that the compression doesn’t alter the appearance. Additionally, if the photos are blurry or pixilated (image artifacts) on the storefront, this means that the size filter used in the theme template is too small. Image “artifacts” are a result of image compression which is applied to JPG images on the storefront. Image compression is applied to make sure that page load times are within reason.

The compression amount can be controlled in the theme files by increasing the image size parameter. Increasing the size limit will increase page load time so you’ll need to decide what the right balance is between image quality and page load speed. Once you have figured out what parameters you want, we can escalate the request to Theme Support and they can take a look at what size filter to use. This would require reaching out to our support via email/phone/chat. Our compression rates are as follows:

  • Original images: 90%
  • URLs with size less than 1024px: 75%
  • URLs with size greater than or equal to 1024px: 85%

All images uploaded to Shopify get stripped of their color profile for two reasons:

  • Browsers vary in their support for color profiles, so they end up looking differently when being viewed for example on Firefox vs. Internet Explorer. We want to make sure your site looks the same across all major browsers.
  • Color profiles can take up huge amounts of disk space, so this can result in very heavy loading times without gaining anything from it.

To rectify this, make sure to save the image without a color profile. This process varies depending on the different image editing programs. For example, in Adobe Photoshop, to save an image without a color profile is achieved by selecting Save for Web… from the File menu.

I hope this helps resolve the issue you’re seeing with your images!

All the best

5

Hello,

I don’t think it the problem with my image.

It seem like the blurry only to those image i use for as first position.

The other picture (same quality/resolution) are fine as original.

Is there any setting / changes to avoid this blurry?

I have upload same picture, one put as first position, another as later position.

And the result as expected, first turn blurry, second is fine.