Allow image block to upload webp

I’m a little surprised that I can’t upload .webp images to the image block, especially since @steve has advocated for optimizing images by using next gen formats on Builder’s official blog, and also the file field type allows for .webp uploads:

Would be great if this were supported!

Hi Ersin, you should be able to select it if you click on the Options button in your file browser and select “All Files”

Great hack! Thanks @ancheetah

@ancheetah it looks like webp uploads sometimes don’t work. And 100% of the time, webp upload previews in the “select file” modal are broken.

Hi @ersin, can you please share an example of a webp file that won’t upload? Sometimes if it is a large file, it just takes a little longer. The thumbnail/previews missing is a known issue in our backlog.

Here’s an example: https://catchco.com/wp-content/uploads/2019/05/pdp-header-gamechaner.png

(Yes, the file extension is .png, but if you download it and run file pdp-header-gamechaner.png on it, you’ll see that it’s WebP. It’s coming from my client’s WordPress install, I think it’s possible that WordPress renamed it to .png. At any rate, I renamed it to .webp before uploading to Builder.)

Here’s the URL that Builder turns it into after uploading: https://cdn.builder.io/api/v1/image/assets%2F2277cffef75f4fb1b3462607b91e7deb%2F5a5ea20168ad4459aa28fec37cb6d27b

Here’s what it looks like in the Visual Editor (Builder.io: Drag and drop Visual CMS):

Here’s what it looks like when previewing the draft:

On my end, I changed the file extension to webp and it uploads and previews ok. Can you try re-uploading? I do see that the image url looks blank but your page is on localhost so that could make it difficult to investigate. Can you create re-create the issue on a deployed app? Thanks!

Hey, so I couldn’t exactly reproduce, this is what happened when I tried: Loom | Free Screen & Video Recording Software | Loom

CodeSandbox: Builder React SDK repro (webp rendering) - CodeSandbox

Content: Builder.io: Drag and drop Visual CMS

Seems more like a quirk of how Builder handles webp at the moment (see my loom above). My request is that webp (and avif) are handled in the same way as png, jpeg, and svg. They should “just work” without having to go through the srcset injection step, or it should be instantaneous the way it appears to be w/ those other formats.

Thanks for the feedback Ersin!

1 Like