Flow Theme - Product page images are blurred

[Kasperh9]

Hi everyone!

So I'm currently setting up a website for a friend of mine. But with the flow theme the product images, on the product pages are really really blurred. 

This is not because we have low quality images, because we do in fact have very very high quality images.

This is the link to the store:

https://chefgear.dk/ 

Code is:

Kira1105

I really hope that one of you can help me out. We we're supposed to launch today, but we have to delay it due to this problem.

Thank you so much for your time!

[dmwwebartisan]

@Kasperh9 

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, 

[Kasperh9]

Hey!

Thank you so much for your time!

I think I get it, but I'm not sure if that is the thing that has gone wrong here.

If you have 2 extra minutes, maybe take a look at this thread:

https://community.shopify.com/c/shopify-design/bad-quality-images/td-p/1328355/highlight/false 

I have the same exact issue, and the images we use are 4000x5000 (ish).

However, when we tried to upload an image with the resolution of 1600x2000 it was still blurry?