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

[david-kaplan]

Hi guys, I have an interesting issue. 

When I render .gif with <img /> it looks good. 
<img src="{{ block.settings.icon_image | img_url:'master' }}" width="50" height="50">

Inspector say this. 

But when I render it with image_url it is blurry. 
{{ block.settings.icon_image | image_url: width: 50, height: 50 | image_tag }}

No you can see the first and third icon is blurry. 
Inspector is here. 

Do you guys have any idea? I suspect that image_url and image_tag does the resizing in some different way and not just as well us native html tag. 

Thank you very much for any information or suggestion. 
Thank you 
David

[Ugurcan]

gif icons will render slow. it is best to use svg icons and you can resize them as you like without any quality issues.

[david-kaplan]

Thank you for your answer Ugurcan, I believe that is not the point of this discussion. 

[Huptech-Web]

Hi @david-kaplan 
The height and width attribute in <img> tag will be assigned to the IMG tag & img_url:'master' will fetch high res. image from the Shopify server.

While the width: 50, and height: 50 in image_url will request the specified height and width image from the Shopify server that's why it is showing blurry. So you can assign the desired height and width to image_url which will not make the image blurry.
From this, you will get the idea.

[david-kaplan]

Hi Rishihuptech, 

thank you for your answer. According to your answer I should assign width and height to image_url filter and it will not make the image blurry. 
Please correct me if I understand wrong, but I believe I am assigning the width and height to the image_url.

here {{ block.settings.icon_image | image_url: width: 50, height: 50 | image_tag }}. 

Is there something I am missing in your explanation? 

[SK_Shohan]

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