Rendering image using image_url and <img /> => rendered by image_url are blurry

Store Design
6

Hi,

you can use this line:

{{ block.settings.icon_image
| image_url: preload: false, width: block.settings.icon_image.width, height: block.settings.icon_image.height
| image_tag: width: 50, height: 50, loading: ‘lazy’
}}

if your required design part loads within the viewpoint or you don’t want ‘lazy’ then use:

{{ block.settings.icon_image
| image_url: preload: true, width: block.settings.icon_image.width, height: block.settings.icon_image.height
| image_tag: width: 50, height: 50, loading: ‘eager’
}}

Hopefully it will solve your problem.

Thank you
SK