Blurry product images in Dawn theme

[rusinov]

Hey guys, I'm having issues where my product images are very blurry on the front end. They are fine when I preview them on the back end. Start happening after I've switched to the new Dawn theme. Images that I've uploaded are 1000px +, but site displaying them at half of that. Is there a way to fix that? Site: sapandbark.com

Thanks!

[rusinov]

Ok so check it out. 
First, go to where you see what theme you got, from there add new theme and choose dawn, it will add it as a new theme. After it’s installed, go to that theme’s code editor and copy everything from that media file. Now go to your theme’s code and paste/replace that copied code in exactly same file. Save and done. Let us know if it works for ya.

[blowerband]

Thanks @rusinov what if I just created my store fresh again?  Im doing a total resdesign so shopify suggested I start another trial where I loaded my products and choose the dawn theme.  I just did this two days ago so I would assume its the latest and greatest version of the theme and my pictures were horriable.  Let me know if im not understanding still.  

[rusinov]

Installing the theme again and activating it will accomplish same thing, yes.

[blowerband]

Unfortunately for me they are still very blurry ill upload a pic when i get
a chance.

[Eggae]

Images in my products page looks fine but all my images on the product grind are blurred. Can you help? Thanks.

[rusinov · Accepted solution]

Ok I think I found the actual solution. Look for product-card.liquid

And then change these lines (there are couple of them in that file:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }

Basically, just change "divided_by: 4" to "divided_by: 1"

Voila!

[rusinov]

Also in product-thumbnail.liquid:

find "sizes=" lines and replace first part of them with this (see screenshot):

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 0 | divided_by: 1 }}px, ...

This should fix blurry product images on the product pages themselves too. 

Took me forever to find these. But no more blurriness. That's some janky code there Shopify...

[LisaNielsen]

Hi @HamishDavisonIC ! I tried following your instructions as my pictures are waaay to huge using the Dawn theme, whenever I click on an individual product. However, the image is not reducing, even if I change it to something like 20%. Do you know what I am doing wrong? 

Here's a screen shot of the code, I have changed:

Here's a link to a specific product so you can see the image size:

https://www.tinyreusers.com/products/806

I tried following your YouTube video but the text is too small, I can't see what you are looking at in the code.

Any ideas?

[Butterflykeys]

I've just migrated to shopify because I had thought I wouldnt really need to touch any code. So with that I would like to say shame on shopify for making their flagship theme buggy and not fixing it or providing support for it.

With that said, I think I have fixed the issue. 
The issue is in main-product.liquid at line 171. 
Replace: 

sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 12), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)"

With:

 sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 4), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)" 

I hope this helps someone, as now i'm using the latest version of DAWN on Feb 7, 2022

[lambcrash]

This took a lot of faffing about.  If you're reading this comment so late into the thread, I assume nothing so far has worked for you and you are still pulling your hair out.

My issue was that only the first product image on the collections page looked sharp; it was the ones after it that looked a bit blurred. It seems the changes you need to make will depend on the image size you use, so applying a solution in this thread that someone else got working may not necessarily work if you're not using the exact same size images as they are. Perhaps this is obvious if you have more experience with CSS, but it wasn't for me at the time.

How I fixed it:

My offending product image(s) is 1080, not 1200, so I tweaked Butterflykeys' solution above by navigating to main-list-collections.liquid and searched for min-width, then I changed the code in line 39 which refers to the image size that the problem image belongs to. For example, I ended up changing the 1000 to become 1080, which (I assume) will then only compress images that are larger than 1080, so what was previously this:

 {%- if collection.featured_image.width >= 1000 -%}{{ collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}

Became this:

 {%- if collection.featured_image.width >= 1080 -%}{{ collection.featured_image | img_url: '1080x' }} 1080w,{%- endif -%}

Which I guess is saying, hey - if the picture size equals or is larger than 1080, resize it to 1080. I didn't change the next line, so images larger than 1500 have hopefully not been affected.

I hope this helps anyone else still struggling with the problem.

[Butterflykeys]

Try using a photo that has a 1:1 aspect ratio instead of 16:9.

[hw31]

thx but i dont think that this can be a longterm solution. 16:9 is the standart.

[Jules81]

Have you updated your theme as described here? 

https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1431588/highl...

[Butterflykeys]

If you use the "Image" block instead of the "Product" block the image will show crisp, however it wont link back to the item. 

Otherwise you'd have to find the proper section in the code where the large photo of the collage is created and change the size properties to something like the following: 
(min-width: 1200px) 737px, (min-width: 750px) 500px, calc(100vw - 30px)

[lambcrash]

Hi thanks. They are square 1080 by 1080 already. I don’t know it seems to be fixed now.

[hw31]

thx! im not sure if im searching at the right location. i guess i have to edit the theme? when i then enter any of the above code it cant find anything. could you please give me more detailed instruction where i have to search for it?

[noap]

Hello, my issue is also that my collection photos are blurry but when gpoing into the actual individual product photos they are crystal clear. i cvannot find the section you are referign to to try and fix? my images are 1296x1829 thanks for any help

[donfromunu]

I had the same issue. I found that if you go to the product-template.liquid, you can change the product image size in second line of code.  Since all of my product images are 1600x1600, I change the line of code to:

{% assign product_image_size = '1600x1600' %}

[DJ2023]

Hi Lisa,

I noticed your store is working correctly now.  May I ask what you did?  I started with Dawn, updated to Craft, tried different code but my images are still blurry when they are clicked on.  the images are 2500x2500 so have plenty of quality.  Thanks in advance! DJ