File_img_url does not support WEBP?

Store Design
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

2

Hi @maxgrind ,

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

Using file_url

Directly reference the WEBP image without resizing:

Using Element

Provide both WEBP and a fallback format:

Description

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

Thanks!

3

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.

1 Like