canvas.toBlob() Can Silently Hand You Back a PNG When It Can't Encode What You Asked For

I was building a small in-browser image converter — drop in a PNG or JPEG, get back a WebP or AVIF, no server involved — and ran into a failure mode that doesn't look like a failure at all. The conversion "succeeds." The download works. The file just isn't the format you asked for, and unless you check for it, you'll never know.

The shape of the problem

The whole point of doing this client-side is that the image never leaves the browser. No upload, no server round trip, no queue. The pipeline is short:

const loadBitmap = async (file: File) => {

if ('createImageBitmap' in window) return createImageBitmap(file);