Three image formats, three different jobs. A practical guide to choosing one without burning a weekend on encoder benchmarks.
You have a 4 MB JPEG. Lighthouse is yelling at you. Someone on Hacker News said AVIF is "30% smaller than WebP." Your PM wants the hero image to load in under 200 ms on a 4G connection in Lagos. You open three browser tabs, read three contradictory benchmarks, and end up converting everything to WebP because it sounds like the safe middle. That choice is fine — most of the time. But "most of the time" hides three different jobs, and the wrong format costs you either bandwidth, compatibility, or build time you don't have to spend.
Here's the practical breakdown — what each format is actually good at, the gotchas the marketing pages skip, and a decision tree you can apply in under thirty seconds.
1. JPEG: the lingua franca that won't quit
JPEG turns 33 this year. It still ships on every camera, every browser, every photo printer, and the vast majority of the open web. The format compresses photographs by throwing away high-frequency detail in 8×8 pixel blocks — a technique called the discrete cosine transform — which is exactly the right trade-off for natural images full of gradients.
Where JPEG falls down: text, line art, screenshots, anything with sharp edges. The blockiness you see around UI elements in a poorly-encoded JPEG is the algorithm doing its job badly on content it wasn't designed for. It also has no alpha channel — transparent PNG-to-JPEG conversions get flattened to white (or whatever background the encoder picks).
The honest reason to still reach for JPEG in 2026 is reach. If your audience includes a long tail of legacy clients — embedded browsers, RSS readers, screenshot bots, ten-year-old phones — JPEG is the format that everything reads without a fallback chain.
2. WebP: the obvious 2020s default
Google released WebP in 2010 and spent a decade arguing for it. In 2020 Safari finally shipped support, and the format went from "Chrome's pet project" to a real cross-browser option overnight. WebP supports both lossy and lossless modes, has an alpha channel, supports animation (think small video clips replacing GIFs), and produces files roughly 25–35% smaller than equivalent JPEGs at matching visual quality.
"WebP is an image format that uses either (i) the VP8 key frame encoding to compress image data in a lossy way, or (ii) the WebP lossless encoding. These encoding schemes should make it more efficient than currently used formats."
— RFC 9649 §1 (IETF, public domain)
The catch: WebP's lossless mode is excellent (often beating PNG by 20–30%) but its lossy mode at very high quality settings produces softer images than JPEG. If you compare a JPEG quality-95 and a WebP quality-95 side by side, the WebP sometimes looks slightly smudged on fine textures — skin, fabric, foliage. At quality-80 and below, WebP wins almost every time.
3. AVIF: the bandwidth king (with caveats)
AVIF arrived in 2019, built on the AV1 video codec, and the compression ratios are genuinely startling. A photograph that's 200 KB as a JPEG is often 80 KB as a WebP and 40–60 KB as an AVIF at matching quality. For a hero image on a marketing page, that's the difference between hitting a Core Web Vitals target and missing it.
The caveats are real, though. AVIF encoding is slow — on a typical CI runner, encoding a single 4K image can take 30 seconds or longer at the higher effort settings. Cached encodes solve this for serving, but the first build of a 5,000-image catalog can ruin your afternoon. Decode is fast, but older devices (anything pre-2021 on mobile) may struggle on long pages with dozens of AVIFs.
Browser support hit "good enough" in late 2023 when Edge joined Chrome, Firefox, and Safari. Anything older than that needs a fallback — usually a <picture> element listing AVIF, WebP, JPEG in order.
4. The 30-second decision tree
If you're picking one format and stopping there:
- Photographs, modern web audience → AVIF with a WebP fallback. Saves real bandwidth.
- Photographs, mixed audience (older devices, email, embedded) → WebP with a JPEG fallback. Honest middle ground.
- Screenshots, UI mockups, charts → WebP lossless, or PNG if you need anything to consume it without fuss.
- Animations under 5 MB → WebP. AVIF supports animation but tooling is patchier.
- "It must work everywhere, even in 2007" → JPEG. Don't overthink it.
The browser-friendly way to ship this is a <picture> element with <source> children — the browser picks the first format it understands and ignores the rest. No JavaScript, no UA sniffing.
5. Encoder traps that bite people
Three pitfalls we've seen burn even careful teams. First, quality numbers don't translate across formats. WebP quality-80 is not the same perceptual quality as JPEG quality-80 — WebP at 80 is closer to JPEG at 90. Re-encoding "at the same quality" between formats almost always means re-tuning per format.
Second, EXIF and color profiles travel with the file unless you strip them. A camera-original JPEG might carry GPS coordinates, lens serial numbers, and 12 KB of ICC profile metadata. WebP and AVIF preserve this faithfully — meaning the "smaller" file you served might still be leaking location data from the photographer's phone. Our EXIF stripper removes this in one step before you encode.
Third, resizing first beats encoding harder. A 4000-pixel-wide image displayed at 800px is wasting 96% of the bytes. Resize to the displayed dimensions (or 2× for retina) then encode. Our image resize and image compress tools run entirely in the browser — useful when you don't want to upload originals to a third-party service.
The pragmatic bottom line
For most websites in 2026, the right answer is both: serve AVIF to modern browsers, WebP to slightly older ones, JPEG as the last resort. The bandwidth savings on AVIF alone usually pay for the extra storage within weeks. If you only ship one format — pick WebP. It's the format whose support story is least likely to bite you. Need to convert images between any of these without uploading them anywhere? Our image converter handles all three formats in the browser, no server round-trip.
← All articles