Product images appear blurry in Dawn theme collection views and sliders, while displaying clearly on individual product pages. The root cause is that Shopify’s CDN serves low-resolution images (e.g., 360x) for collection thumbnails instead of higher-resolution versions.
Primary Solution:
product-card.liquid file in the theme codesrcset attribute that defines image resolutions for different viewport widthsImportant Considerations:
featured_media.width condition matches or exceeds the requested image size to avoid pixelationimage_tag filter for streamlined responsive imagesStatus: Multiple users confirmed this code modification successfully resolved their blurry image issues across Dawn versions 7.0 through 15, though some reported the problem resolved automatically after theme updates.
We have an issue that our product images in collection views and product sliders e.g. on “home” landing page are blurry. When clicking on the individual product the images are crystal clear on the product page.
I already read through this forum but could not find a fix without changing the entire theme. So I really need your help to fix this.
Thanks in advance for any advice!
Please check following URL for help
I know this thread but to what I understand their solution is to rebuild everything in craft theme. I would not really like to do it because it will be much work. Is there any code solution?
After some investigation I found the following:
The original full resolution image is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test.jpg?v=1629651700
The file it pulls to be displayed on the page in the collection is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test_360x.jpg?v=1629651700 And this file is much too low resolution for the image size. But I can not find out why it is using such a low resolution and not a higher resolution version. Any idea how to fix that?
Did you manage to find out?
I’m hunting for the same thing.
I’m also struggling with this - please let me know if you find a solution.
I found it.
Find your product-card.liquid file and then this:
that's the code that finds the current viewport width and then the image resolution that goes with it.
you can choose what resolution image gets used for each viewport width. Its the resolution followed by an x that tells Shopify image server how big to render an image, ie filename_360x.jpg
I just upped every one to the next res up, so instead of a 360 pixels wide image, I go for the next one, 533 pixels. Rinse and repeat, and we get:
```markup
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '360x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '533x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '720x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '940x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1440x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
do the same for the set below, which renders the alternate (mouseover) images.
Thanks! I’m struggling to find that section in my code. Could you please send a screenshot of where you found it?
I can do that tomorrow morning. Meanwhile look for your product-card.liquid file
I’m on Dawn, so that might make a difference.
Do not be aggressive with the difference between size changes, spend time testing the minimum size needed when unsure.
Keep in mind when changing the default sizes of image outputs there will be a decrease in website performance, and an increase in customers bandwidth usage by serving larger images. Remember 1 image very rarely exists in isolation so this is compounded by EVERY product shown on a page using such a change.
For templates that display ALOT of product images extra effort should be spent prioritizing which products are allow to server bigger images.
Per @SpotterJ 's fix ,
To avoid edge cases of pixelation with responsize images make sure to to check that the featured_media.width is of a minimum size or the exact size value used with img_url.
The shopify cdn will not increase an images file size but this may not stop oddities with a theme frontend code, browsers quirks behavior, or the CDN’s cropping behavior.
So cut it off from the start to avoid inverting the situation where instead of blurry image a store now has an edge case of pixelated images because the master image is too small and interpreted wrong. Or your just plain not getting the image size you expect while developing. This will be more apparent the larger the delta between the size change i.e. forcing 1000px width on a 600px image, or 1440px when the image is only 1000px, and a theme tries to display it at an inappropriate larger width.
Taking the original 165,
{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
If you want a 360px wide image for screensizes of 165w and lower.
Check that the images actual width is suitable, this can become a bigger and bigger problem as you escalate through images sizes with bigger relative sizes.
{%- if product_card_product.featured_media.width >= 360-%}{{ product_card_product.featured_media | img_url: ‘360x’ }} 165w,{%- endif -%}
Yes it can be kinda rare for products to have such a small original image size but you want to stop 1 set of edge cases from being able to create more edge cases.
Avoid vastly different values where the images actual size could be hundreds of px smaller than the images original size.
So asking for a 1440px when an images max original size is 1200px:
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: ‘1440x’ }} 1066w,{%- endif -%}
Will output an image that is only 1200px wide potentially leading to an edge case image pixelation issues in a theme.
Fix the minimum to either exact size needed or be within a reasonable distance so 1440 ~ 1400 ,etc
{%- if product_card_product.featured_media.width >= 1440 -%}{{ product_card_product.featured_media | img_url: ‘1440x’ }} 1066w,{%- endif -%}
Technical notes - the initial code in Dawn for the width condition size , img_url size and viewport width size all use the same value making developer maintenance easier , because creating values for something like srcset is currently clunky for liquid to handle logically and not easy to do it in a way that’s also highly configurable.
There’s also the option of using Resolution switching, i.e. retina devices https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_same_size_different_resolutions where using vastly different image size is expected.
Note there’s also a new html filter image_tag that can streamline making responsive images
https://shopify.dev/changelog/make-images-responsive-with-the-new-image_tag-filter
https://shopify.dev/api/liquid/filters/html-filters#image_tag
Hi
We would like to go through your store so that we could get the exact feasible solution for you.
So, kindly share your store URL as well as the screenshots for the same !!
Thanks
We have gone through your store and found that your theme hasn’t been updated as the previous DAWN theme version that you are using consists of the issue you described above.
So , we would recommend you to update your theme as the issue has been fixed in the updated DAWN theme.
Do let us know if you have any further query
You can connect on Email
Thanks - https://www.amourstationery.com/
Sarah, you can share your details on arpansrivastava@cedcommerce.com.
Thanks
@PaulNewton Really interesting stuff all round, and you are right about performance. One would need to look at specific resolution requirments.
Would you know how to make the html image filter work with other image type, ie file_img_url?
I only added my store 2 weeks ago so it seems to be the latest version that i’m using.
