Image Format Converter (PNG ↔ WebP ↔ JPEG ↔ AVIF)

Which format when

• WebP — the modern default. Supported by all evergreen browsers since 2020. Typically 25–35% smaller than equivalent JPEG, with optional lossless mode and transparency. Use this for almost everything web.
• AVIF — next-generation format, even smaller than WebP (often 50% smaller than JPEG at the same perceived quality). Slower to encode. Support is now 95%+ in modern browsers. Best for hero images and product photography where every kilobyte matters.
• JPEG — the universal baseline. Use only when you specifically need maximum compatibility (printing services, legacy email pipelines, ancient corporate browsers). Don't use for screenshots of text — JPEG's frequency-domain compression turns sharp edges into mush.
• PNG — lossless, supports transparency. Use for screenshots, diagrams, logos, illustrations with sharp edges. Don't use for photos — file sizes balloon by 5-10× compared to WebP/AVIF.
• GIF — animation only. For still images, anything else is better. For short animations, an animated WebP is smaller and higher-quality, but GIF still wins on universal embedding compatibility (Slack, Discord, ancient forums).

Quality slider — what the number actually means

The quality value is roughly the same scale across JPEG, WebP, and AVIF — but each format compresses differently at the same setting. JPEG at 85% is the classic "visually lossless" sweet spot for photos; WebP at 75% produces a similar-quality result at smaller file size; AVIF at 50–60% often matches JPEG at 85% with much smaller bytes.

For lossy formats below 70%, artifacts become visible: blocky 8×8 JPEG blocks in flat areas, banding in gradients, smudgy AVIF "wax skin" effect on faces. Test both quality and format on a representative image — what looks fine on a logo can look terrible on a portrait. Above 90%, you're throwing away bytes for invisible quality gains.

PNG ignores the quality slider entirely — it's lossless. The slider only affects file size for the lossy formats.

Transparency — what happens during conversion

• PNG → JPEG drops the alpha channel. Transparent pixels become white (or whatever fill color the encoder chooses — usually white). If your image has a transparent background, don't convert to JPEG without a fill plan.
• PNG → WebP / AVIF preserves transparency by default. Both formats support alpha at the same bit depth as PNG (8-bit alpha = 256 levels of opacity).
• JPEG → anything can't recover transparency — there's nothing to recover. JPEG never had alpha.
• SVG → raster requires choosing a background. Without one, the alpha channel from the SVG becomes the alpha of the output (if the format supports it), or transparent areas render as black or white.

Resize quality notes

The browser's canvas does bilinear or bicubic downsampling depending on the engine — both produce reasonable results for moderate downsizes (50-25% of original). Aggressive downsizes (to 10% or less) benefit from multi-step downsampling (resize in stages) to preserve detail, which this tool doesn't do for simplicity. For thumbnail generation at very small sizes, dedicated tools like ImageMagick's -resize with Lanczos filtering produce sharper output.

Upsizing (making images larger) almost always looks bad. The canvas can interpolate, but it can't invent detail. For true AI upscaling, use a dedicated service.

Common pitfalls

• EXIF orientation gets lost. Many phone cameras store images "rotated" via an EXIF Orientation tag, leaving the raw pixels in landscape even when shot portrait. Browsers usually honor the tag on display, but canvas-based conversion typically drops EXIF metadata — so the output might appear rotated. Modern Chrome auto-rotates before drawing to canvas; older browsers don't.
• Re-encoding loses quality even at 100%. JPEG and WebP are lossy formats. Every save-and-reload cycle introduces additional artifacts. Convert once from the highest-quality source; don't re-convert already-converted files.
• AVIF encoding is slow. Browser-side AVIF encoding can take seconds for a large image. WebP is faster; JPEG is fastest. If you're processing many images, consider doing it in a build step with a dedicated tool rather than in the browser.
• Color profiles get lost. Wide-gamut images (sRGB → P3, Adobe RGB) often appear washed out after canvas conversion because the color profile metadata is stripped. For color-critical work, use a tool that preserves the ICC profile.