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!
Kinda resurrecting this thread as I’m seeing a similar issue with webp files that I upload. This page is still being created, but it shows the issues with webp files:
I’m seeing any webp images that I upload into symbols (with input fields) don’t see to work properly. I’m seeing this:
It appears as though webp images that AREN’T in Symbols work fine on that page, but any images in Symbols are broken. Am I crazy?
(EDIT: I changed the first 2 images in the block I screenshot above to be PNGs and they appear fine now. I left the last 2 as webp, and they’re still “broken”)
