Product image thumbnail extremely blurry in collections page

[seanlim]

I'm having some issues with the thumbnails in my collection page being blurry, as well as when the product page is opened and the image is displayed next to the product description. I know the images are definitely high resolution enough, as when you zoom in the images are of high quality. What can I do to fix this? I'm already using PNG images and the theme, Origin, has no way to edit image quality. My site is newheritagepreserves.com

[Huptech-Web · Accepted solution]

Hi @seanlim 
To fix the issue with blurry image in grid 1st go to card-product.liquid line no.67 and update the code with below

{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 720 }} 360w,{%- endif -%}

Then go to product-thumbnail.liquid line no 88 update code with below

widths: '1100, 1206, 1346, 1426, 1646, 1946'

It will solve the issue with blurry images.