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

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

david-kaplan
Shopify Partner
13 0 0

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">

davidkaplan_0-1701744260734.png

Inspector say this. 

davidkaplan_1-1701744297437.png

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

davidkaplan_2-1701744372296.png

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

 

 

davidkaplan_5-1701744464528.png

 

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

 

 

 

Replies 5 (5)

Ugurcan
Shopify Partner
348 7 34

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

Pasilobus | eCommerce Experts, Shopify Apps & Development since 2015 -- www.pasilobus.com
david-kaplan
Shopify Partner
13 0 0

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

 

Rishihuptech
Shopify Partner
676 126 135

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
david-kaplan
Shopify Partner
13 0 0

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
Shopify Partner
2 0 0

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