Solved

file_img_url does not support WEBP?

maxgrind
Shopify Partner
11 0 1

I'm currently utilising Metaobjects to output some content on PDP pages and one of the values is a reference to an image file in the Files section. If i upload a PNG / JPG, it outputs fine in the browser using:

 

<img src="{{ 'example.png' | file_img_url: '500x' }}" />

 

But if I upload a WEBP image, it does not work. Is this just an oversight and is there a way around this (aside from just using PNGs instead)? I can't see any other way of referencing an image file in metaobjects.

 

Thanks

Accepted Solution (1)

thirtycoders
Shopify Partner
135 21 26

This is an accepted solution.

Hi @maxgrind,

 

To display WEBP images in Shopify using metaobjects, you can use the file_url filter or the <picture> element for compatibility:

Using file_url

Directly reference the WEBP image without resizing:

<img src="{{ 'example.webp' | file_url }}" />

Using <picture> Element

Provide both WEBP and a fallback format:

 

 
<picture> <source srcset="{{ 'example.webp' | file_url }}" type="image/webp"> <img src="{{ 'example.png' | file_img_url: '500x' }}" alt="Description"> </picture>

This ensures the image displays correctly in all browsers, with WEBP for those that support it and PNG/JPG as a fallback.

Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 2 (2)

thirtycoders
Shopify Partner
135 21 26

This is an accepted solution.

Hi @maxgrind,

 

To display WEBP images in Shopify using metaobjects, you can use the file_url filter or the <picture> element for compatibility:

Using file_url

Directly reference the WEBP image without resizing:

<img src="{{ 'example.webp' | file_url }}" />

Using <picture> Element

Provide both WEBP and a fallback format:

 

 
<picture> <source srcset="{{ 'example.webp' | file_url }}" type="image/webp"> <img src="{{ 'example.png' | file_img_url: '500x' }}" alt="Description"> </picture>

This ensures the image displays correctly in all browsers, with WEBP for those that support it and PNG/JPG as a fallback.

Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
maxgrind
Shopify Partner
11 0 1

Yeah that's what I thought. It's strange that it's unable to work with file_img_url but does work when using img_url. I guess i'll have to use this fallback, thanks for your help.