Fill Transparent WebP

For each source pixel with colour (Rs, Gs, Bs) and alpha As (0-255), and a fully-opaque background (Rb, Gb, Bb), the output is (t·Rs + (1−t)·Rb, t·Gs + (1−t)·Gb, t·Bs + (1−t)·Bb, 255) where t = As / 255. Fully transparent (t=0) → output is the background. Fully opaque (t=1) → output is unchanged. Semi-transparent → smooth linear blend. No premultiplied-alpha gotchas because getImageData returns straight (unpremultiplied) values.

Several platforms still don’t render alpha well – older email clients, some chat thumbnails, certain print pipelines, and most fax-style export formats. Filling transparency with the destination background colour ensures the icon looks intentional everywhere instead of “this used to have a checkerboard”. The output WebP is still smaller than a PNG-fill alternative.

The opaque pixels round-trip exactly (RGB unchanged). Semi-transparent pixels are blended once into RGB at full opacity – that’s a lossy operation by definition (you’ve discarded the alpha). The WebP encoder may further compress depending on the quality slider. Use quality 100 for the visually-lossless output; lower values trade quality for file size.

They blend proportionally with the fill colour. An anti-aliased dark-blue logo edge on a white fill (50% alpha) gives a medium-blue pixel – exactly what compositing on a real white background would produce. No haloing as long as the source’s anti-aliasing was correct against transparency.

Not in this tool – single solid colour only. For a gradient fill, do it in two stages: fill with one anchor colour here, then load the result into an editor (Photoshop, GIMP, even a CSS preview) and overlay a gradient on a separate layer. Doing gradient fills correctly with anti-aliased edges needs per-pixel destination colour, not the single hex value the picker takes.

It’s the quality argument passed to canvas.toBlob('image/webp', q). 1 = maximum compression (large artefacts), 100 = highest quality (largest file, often visually lossless). Default 92 is the recommended “looks the same as the source to most eyes” trade-off. The stats line shows the output file size so you can sweep the slider and pick a good point.

No – only the first frame is processed. The browser’s Image() decode treats an animated WebP as its first frame for canvas use, so subsequent frames are discarded. For animated WebP transparency filling, you need a frame-by-frame pipeline (libwebp’s webpmux is the standard tool).

20 MB upload cap. Practical canvas limit is ~16,384 px per side. The composite is O(pixels) – a 4K image (~8M pixels) processes in under 100 ms; WebP encoding may take another 100-500 ms depending on the browser. Stats line surfaces final encoded size so you know what was paid.

No. The page is three static files (HTML, CSS, JS) and runs entirely in the browser via the File API, Canvas, and Blob APIs. No fetch, no XHR, no analytics, no cookies. You can disconnect from the internet after the page loads and the tool keeps working.