PNG to WebP
PNG to WebP exports the rendered image through the browser's image/webp encoder, using quality 82 by default and optional proportional resizing. WebP can retain transparency and often reduce web-delivery size, but canvas re-encoding does not preserve PNG metadata, palette, original bit depth, animation, or exact lossless encoding choices.
Runs locally — files stay on your deviceIs this WebP conversion lossless?
Not guaranteed. A quality value is supplied to the browser encoder, so treat the output as potentially lossy.
WebP supports both lossy and lossless capabilities
The format can carry alpha and multiple encoding modes, but canvas toBlob exposes only a MIME request and quality hint rather than full codec controls.
How it works
Choose the image, optional width, and quality. Canvas draws the decoded bitmap and requests image/webp; unsupported browser encoding causes an error.
Key concepts
Format support is browser-dependent
Modern browsers generally encode WebP, but toBlob can return null when unavailable.
Re-encoding drops ancillary data
Canvas represents pixels, not the original chunk structure.
When to use it
- Create a smaller modern-web derivative.
- Keep transparency while testing WebP.
- Resize and re-encode a static PNG.
When not to use it
- Do not expect animated PNG preservation.
- Do not assume lossless output.
- Do not use it as archival conversion.
Worked examples
Transparent logo
- Input
logo.png- Expected output
logo.webp with alpha where supported
WebP can carry transparency.
Screenshot
- Input
ui.png at quality 82- Expected output
Potentially lossy WebP
Sharp edges need inspection.
Animated PNG
- Input
APNG- Expected output
Static rendered frame
Animation is not preserved.
Common mistakes
Calling quality mode lossless
The encoder can discard information. Correction: Compare pixels and file size.
Assuming animation stays
Canvas uses one decoded bitmap frame. Correction: Use animation-aware software.
Deleting the source
Metadata and high-fidelity data may be lost. Correction: Keep the PNG original.
Best practices
- Test transparent edges.
- Provide fallbacks where required.
- Measure actual bytes and visual quality.
Related operations and differences
WebP to PNG
Choose WebP to PNG when you need to convert WebP images to widely compatible PNG.; use PNG to WebP specifically for png.
JPG to PNG
Choose JPG to PNG when you need to convert JPG images to PNG locally.; use PNG to WebP specifically for png.
PNG to JPG
Choose PNG to JPG when you need to convert PNG images to compact JPG files.; use PNG to WebP specifically for png.
Image Compressor
Choose Image Compressor when you need to reduce image file size with adjustable quality.; use PNG to WebP specifically for png.
Image Resizer
Choose Image Resizer when you need to resize images to exact dimensions locally.; use PNG to WebP specifically for png.
Add Text Watermark to Image
Choose Add Text Watermark to Image when you need to place a text watermark in the lower-right corner.; use PNG to WebP specifically for png.
Limitations and privacy
- Static browser-canvas output.
- No explicit lossless toggle, effort, animation, metadata, color-profile, or target-size controls.
- Encoder support and output vary.
Selected images are decoded and processed locally in this browser.
Frequently asked questions
Is alpha supported?
WebP supports it and canvas can export it.
Is output lossless?
Not guaranteed.
Are animations preserved?
No.
Does every browser encode WebP?
Support can vary.