canvas.toBlob() hands back a PNG when you ask it to encode AVIF

In the post's example the call asks for `image/avif` with a quality of 0.8, and the logged `blob.type` comes back as `image/png` ^[5]. A test that asserts the callback ran and the blob is not null passes on exactly that call ^[7]. "Never trust the callback firing as proof of anything," the author wrote ^[8].

The post does not measure how much shipped code does this. It documents the behaviour and the check that catches it ^[24]. The eight formats it lists as decodable are PNG, JPEG, WebP, GIF, BMP, AVIF, SVG and ICO ^[1].

The second trap costs bytes instead of correctness. The saving in a real PNG optimiser comes from colour depth, not from a compression level: a 24-bit pixel can hold about 16 million values, while a logo might use twelve and a screenshot two hundred ^[11]. Store a one-byte index into a palette of at most 256 colours and each pixel costs one byte instead of three or four, which the canvas encoder will never do for you ^[12]. That is a 67 to 75 percent cut in the pixel data before zlib sees it ^[13].

Writing the file yourself means four chunks for an indexed image: IHDR carrying dimensions, bit depth and colour type 3 for palette, then PLTE, then tRNS if anything is transparent, then IDAT ^[15]. Bit depth is worth packing properly. Two colours fit in one bit per pixel, four in two bits, sixteen in four, so a two-colour image stored at eight bits per pixel spends seven of every eight bits on nothing, which the post rounds to 87 percent of its bytes wasted ^[17][18]. zlib will compress the padding for you, at no benefit to anybody.

The last argument in the chain is the one most likely to be typed wrong. `CompressionStream` accepts `deflate`, `deflate-raw` and `gzip`; `deflate` emits zlib format, RFC 1950, with a two-byte header and an Adler-32 checksum, and `deflate-raw` emits RFC 1951 with neither ^[19]. PNG's IDAT payload is zlib-compressed, and browsers now ship that codec ^[20]. So `deflate` is the correct argument here, and a stream built with `deflate-raw` writes IDAT bytes missing the header and checksum a PNG decoder is reading for ^[21].

For a converter that never uploads the file, all of this is the cost of keeping the file local. The post's stated reason for staying in the browser is the input: server-side converters take an upload and hand back a download link, which the author is fine with for a meme and not for a scan of a passport ^[23].