Convert PNG images to WebP in the browser using the Canvas API. PNG is lossless and often larger than WebP for photographic or gradient-heavy content; re-encoding as WebP with adjustable quality can shrink file size for the web.
How it works
The tool reads your local .png file with FileReader, decodes it into an HTMLImageElement, draws pixels onto an off-screen canvas, and exports with canvas.toDataURL('image/webp', quality). Alpha transparency is composited onto an opaque background during draw—typical browser behavior when flattening PNG to WebP.
When to use it
- Compress UI screenshots or icons for faster page loads
- Preview WebP quality settings before batch conversion
- Convert a single asset when desktop tools are unavailable
Limitations
Lossless PNG transparency and color profiles are not preserved. Animated PNG (APNG) is unsupported. Very large images may hit browser memory limits. Encoder quality depends on the browser’s built-in WebP support.