Ask canvas for a WebP in Safari and you silently get a PNG
Every browser-based WebP converter I looked at is built on one line: canvas . toBlob ( blob => { /* ... */ }, ' image/webp ' , quality ) It's a reasonable place to start. It also has a failure mode that took me an embarrassingly long time to notice. The silent fallback Safari has never supported WebP encoding via canvas. It decodes WebP fine — that landed in Safari 14 — but it will not encode…
Safari silently delivers a PNG when a WebP request is made using canvas, despite the fact that the browser supports decoding WebP images. This occurs because the toBlob method doesn't throw an error or return null if the requested format isn't supported. As a result, a user could be sent a PNG with the wrong extension, without any indication that something went wrong.
The only way to detect this issue is by checking the blob type after conversion. To properly handle WebP encoding, you must compile the codec to WebAssembly, which introduces additional challenges related to dependency management and build processes.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
