WebP vs AVIF vs JPEG vs PNG: Which Image Format Should You Use?

Choosing the wrong image format is one of the easiest ways to make a website slow — or to make crisp graphics look muddy. Here's a practical guide to the four formats that matter on the web today, and exactly when to use each.

The contenders

JPEG (1992). The old workhorse for photos. Lossy compression tuned for natural images. Universal support, but no transparency and the least efficient compression of the group.

PNG (1996). Lossless — pixels are preserved exactly — with full transparency support. Perfect for logos, icons, and screenshots with text. Terrible for photos: a photographic PNG is often 5–10× larger than an equivalent JPEG.

WebP (2010). Google's replacement for both: lossy mode beats JPEG by roughly 25–35% at equal quality, lossless mode beats PNG, and it supports transparency and animation. Supported by every current browser.

AVIF (2019). The newest, based on the AV1 video codec. Typically another ~20% smaller than WebP for photos, with excellent quality at very low file sizes. Support is now solid in modern browsers, but encoding is slower and very old devices miss out.

Real-world size comparison

A typical 1600px photo at visually comparable quality:

• PNG: ~2,800 KB (don't do this)
• JPEG (quality 75): ~280 KB
• WebP (quality 75): ~190 KB
• AVIF (quality 60): ~150 KB

Same picture, same perceived quality — nearly a 2× difference between JPEG and AVIF, and an 18× penalty for using PNG on a photo.

Which format for which job

• Photographs → WebP (or AVIF with a WebP/JPEG fallback)
• Logos, icons, flat-color graphics → SVG if possible; otherwise PNG or lossless WebP
• Screenshots with text → PNG or lossless WebP (lossy formats smear text edges)
• Images needing transparency → WebP (photos) or PNG (graphics)
• Email newsletters → JPEG/PNG (email client support for WebP is still patchy)
• Maximum compatibility (old devices, uploads to unknown systems) → JPEG

The workflow that gets you 80% of the benefit

1. Resize first. A 4000px image shown at 800px wastes most of its bytes. Use the Image Resizer to match your display size (2× for retina screens).
2. Convert to WebP with the Image Converter.
3. Compress to the lowest quality that still looks good — usually 70–80 for photos — with the Image Compressor.

For HTML, the <picture> element lets you serve AVIF to browsers that support it and fall back automatically:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="...">
</picture>

Common mistakes

• Photos saved as PNG — the single most common image-weight problem on the web.
• Recompressing already-compressed JPEGs repeatedly — each save adds artifacts. Keep an original and export from it.
• Quality 100 exports — quality 80 is visually identical for most photos at half the size.
• Ignoring image dimensions — format choice can't fix an image that's 5× larger than its display size.

Everything above runs privately in your browser: resize, convert, then compress. Your images never touch a server.