file_img_url does not support WEBP?

[maxgrind]

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

[thirtycoders · 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!

[maxgrind]

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.