Modern image formats can save 25-50% file size over JPEG / PNG with no visible quality loss — meaningful when you’re shipping pages to mobile users on slow networks, or paying for asset CDN bandwidth. This tool converts between the four mainstream raster formats entirely in your browser.
How conversion works
The browser’s createImageBitmap() decodes any image format it natively supports into a bitmap. The bitmap gets drawn onto a hidden canvas, and canvas.toBlob(mime, quality) re-encodes it in the target format. Conversion is one-shot — no client-server round-trip, no re-uploading the file each time you tweak quality.
For JPEG output, the canvas is filled with white before drawing because JPEG has no alpha channel. PNG, WebP, and AVIF all preserve transparency.
Format characteristics
| Format | Lossy? | Alpha? | Browser support | Best for |
|---|---|---|---|---|
| JPEG | Yes | No | Universal since 1996 | Photos, fallback for old browsers |
| PNG | No | Yes | Universal since 2003 | Graphics, screenshots, transparency, lossless needs |
| WebP | Both | Yes | All modern browsers (2020+) | Web default — 25-35% smaller than JPEG |
| AVIF | Both | Yes | Chrome/Edge 85+, Safari 16.4+, Firefox 113+ for display (encoding limited) | Smallest files at equivalent quality |
Example: shrinking JPEGs for the web
A 1.2 MB camera JPEG converted to WebP at 80% quality typically lands around 280 KB — a 4× reduction with no perceptible difference at normal viewing distances. Same image to AVIF at 80% drops to ~190 KB. For a page with 5 hero images, that’s the difference between a 6 MB page and a 1 MB page.
Example: PNG to WebP for screenshots
A 350 KB PNG screenshot of a UI converts to WebP-lossless at ~120 KB (no quality loss, just better compression). To WebP-lossy at 90% it drops to 60 KB with no visible artefacts on UI elements (sharp edges, flat colors compress especially well in WebP). Whether to keep the lossless or lossy path depends on whether you want bit-exact round-trips.
Example: photo to AVIF
A landscape JPEG (2 MB) → AVIF at 70% → ~250 KB. AVIF’s main strength is photos: its block size and prediction modes were designed for the texture-heavy regions where JPEG most aggressively wastes bytes. The encoding is 5-20× slower than JPEG, but that doesn’t matter for a one-shot conversion.
When format conversion is the wrong tool
- Lossy → lossy round-trips degrade quality. Converting JPEG to JPEG (or WebP to WebP) at any quality setting passes the image through a lossy encoder again. If you just want a smaller file in the same format, use the compressor instead.
- GIF for animation. This tool handles still images only. Animated GIFs lose animation. Convert to MP4 with a video encoder, or to animated WebP with a dedicated tool.
- TIFF, RAW, HEIC as inputs aren’t reliable. Browsers vary in what they decode via
createImageBitmap. HEIC specifically needs a separate tool (heic2any) — see the HEIC to JPG converter when shipped.
Common mistakes
Picking PNG for a photo. PNG is lossless, so it preserves every pixel — but photographs have so much information that PNG produces files 5-10× larger than JPEG at indistinguishable quality. PNG is for graphics, not photos.
Using JPEG for screenshots with sharp text. JPEG’s compression algorithm trades fidelity for size in 8×8 blocks. Sharp boundaries (text edges, UI lines) get smeared into “ringing” artefacts. PNG or WebP-lossless preserves them.
Cranking quality to 100% on JPEG. Maximum-quality JPEG is still lossy — and still much bigger than the same image at 92%. You almost never benefit from 100%; 90-95% is the sweet spot.
Converting AVIF to JPEG for compatibility. Yes, AVIF has limited support — but if your audience is on a modern browser (Chrome / Safari / Edge in 2024+), AVIF is fine. For a true universal fallback, ship both AVIF and JPEG via <picture> with <source type="image/avif"> and let the browser pick.
Comparing the source/output sizes against your OS file manager. macOS reports decimal MB; Windows reports binary “MB” (really MiB) under the same label. The same file appears ~5% smaller on Windows than on macOS. The data-size unit converter explains the two conventions.
What this tool does not do
It doesn’t batch-convert multiple files. One file at a time — see the image resizer for batch workflows.
It doesn’t resize. Source dimensions are preserved exactly. To shrink dimensions, use the image resizer. For HEIC-specific input (iPhone photos), the HEIC to JPG converter handles the WASM decode first.
It doesn’t strip metadata (EXIF, ICC). Most browsers’ canvas drops metadata by default; some preserve ICC color profiles. If you need guaranteed metadata stripping, use a dedicated stripper.
It doesn’t upload anywhere. Conversion happens in-browser via Canvas API.