Hello!
I am having this problem where every image I upload, becomes a lower quality on my site. What is especially remarkable: on my product page the product pictures are blurry but when you click on the product and then go back to the product page the picture is sharp. Does anybody know how to fix this for all pictures when I upload them? Thank you so much beforehand.
Greetings,
Mel
if possible to share screenshot which one is blurry
Hii I had the same issue I tried removing the sizes option from this code and it worked somehow. Hope this helps
Hii I tried removing some code and it worked for me somehow
from this remove sizes option. hope this helps you too
can you please send original image
please upload bigger size
Dear Neha,
Thank you for your reply! Could you show me which parts you edited?
<img
srcset=“{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w”
src=“{{ card_product.featured_media | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ card_product.featured_media.alt | escape }}”
class=“motion-reduce”
{% unless lazy_load == false %}loading=“lazy”{% endunless %}
width=“{{ card_product.featured_media.width }}”
height=“{{ card_product.featured_media.height }}”
I removed below part and it works for me
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
Thank you !
Wow, this works great !! Thank you so much for the help :)) Appreciate it! Do you have any idea about other pages? I have images on my Home Page and About Page.
Do the same thing remove that part from the coding of the home page and about page images?
Thank you!
Thank you! I removed codes with “size” in assets → image-banner-liquid
This makes all images on other pages sharp for me :).
Remove these codes beginning at line 40 and 70:
Hi! Do you have any idea how to do the same with Dawn 7.0? The code is slightly different :S
hi Neha, I cannot locate this code.. where can I find it?
