Why are images on my Dawn theme site appearing blurry?

Store Design
,
1

The images on my site appear blurry even after updating the theme, verifying all image sizes are correct (they were never blurry before…) and using previously accepted answers on here. The most odd thing is that it seems to happen at the collection level but not the product level. Any ideas on how to resolve this or if there’s some sort of code issue affecting my site?

You can see the issue at: https://www.darrenmcnabbphotography.com/products

2

Hi @DarrenM

You can try go to your Online store > Themes > Edit code > open card-collection.liquid file, find those lines of code

{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}

Update to this

{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500w }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}