`Product pictures blurry when on 100% view, but gets clearer as i zoom in

[m4rkl1n]

I’m not sure what I did to my website but many pictures have suddenly became blurry. It used to all be quite clear, so i know its not the images that are low quality.

Previously it became better as i zoomed out, now its the opposite.

Left image is 120%, right is 130, this is the only one where i notice it become more clear instantly. how can I fix this?

Thanks in advance.

https://www.linnovate.co.nz/

[Small_Task_Help]

Hi,

Hope this will work

• Check Image Size Used on Product Pages
• Check How Theme Renders Images in Code (for Developers - Change image width to 1000+ in theme code)
• Re-upload Product Images (Only If Needed) - Set image size to “original” or “large”

[Jacob0908]

Hello @m4rkl1n

How did you import image on the shopify store? I mean liquid code for rendering the image.
Ex:

Please share your code for it. I feel image size is 360x240 now. Original image is good. but as you can see this url, width is fixed by 360px.

https://www.linnovate.co.nz/cdn/shop/files/Stacked_stone_panel.png?v=1749444127&width=360
Please let me know when you send the code. Regards

[Darshan17]

Hi m4rkl1n,

I’d like to review the backend code to understand how the image is being rendered. Would you be comfortable providing me collaborator access?

Once I have access, I’ll check the implementation and get back to you with a solution.

Thanks!

[m4rkl1n]

Hi Jacob,

Not sure if this is what you’re after, but heres a code for my collection list:

<img
srcset="
{%- 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 -%}
{{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w
"
src=“{{ card_collection.featured_image | image_url: width: 1500 }}”
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)
"
alt=“{{ card_collection.featured_image.alt | escape }}”
height=“{{ card_collection.featured_image.height }}”
width=“{{ card_collection.featured_image.width }}”
loading=“lazy”
class=“motion-reduce”

Thanks

[m4rkl1n]

Hi, how can i do so?

[Darshan17]

Hi @m4rkl1n

Here are the steps to provide me the collaborator code.

Once I have a code I will send you a collaborator request.

[Darshan17]

Send me the collaborator code through message.