Why is the main product image on my craft theme blurry?

[Beccacraftyting]

EDIT: I seemingly fixed the issue myself by following the instructions of someone else that had an issue with a different theme. (https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1439751/highlight/true#M378862) Will keep this updated if I find any further issues.

---

I’m having an issue where on the main page of my site, the main product card image is looking blurry (the image doesn’t show how bad it actual looks, but it is a noticeable quality drop) even though the image is a large resolution and looks perfectly fine after clicking onto the products actual page. Any ideas why this is the case and how to fix it?

Images of the problem:

If it helps the site is https://craftytingsshop.com/ to see the quality difference.

[beckybee]

SOLVED: I was looking under Sections > collage.liquid. when in fact the solution was under Snippets > card-product.liquid lines 66 and 89:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 4)…etc, etc.

Where is says “DIVIDED_BY: 1” …this was originally set to 4, so for lines 66 and 89 I changed the 4 to a 1 and it’s all good.

---

Hey, I’m using the Craft theme and have blurry collage images on the main page.

I’ve tried 1000 x 1000 JPG at 72, 150, 300 resolution, I’ve tried a 500 x 500 image at 72, 150, 300 …nothing works. Every upload looks the same on the front end.

I found a link to a question with the same problemhttps://community.shopify.com/c/shopify-design/craft-theme-main-product-blurry/m-p/1561729 and they said they solved it by going to this thread: (https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1439751/highl…).

I went to that link but I can’t find the link of code I need to amend (very amateur here). I think this is the code I need here, but I don’t know what the actually issue is. Help would be appreciated:

{%- when ‘image’ -%}

{%- if block.settings.image != blank -%} {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}

{{ block.settings.image | image_url: width: 3000 | image_tag:
loading: ‘lazy’,
sizes: sizes,
widths: ‘550, 720, 990, 1100, 1500, 2200, 3000’
}}
{%- else -%}
{{ ‘image’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}
{%- endif -%}

[dopsip]

thank you very much I wouldn’t find myself

it works for me on the featured collection products