The web offers you roughly a dozen image formats, but most images you'll ever create, edit, export, or ship fall into maybe five. Knowing which five — and why — is the difference between a bloated PNG on a product page and a lean AVIF doing the same job better. This is the mental model. Keep it close.
01Raster vs vector: the first decision
Before you choose a format, ask what kind of image you have. Raster images are grids of pixels — every photo, every screenshot, every scanned painting. They're resolution-dependent: stretch one beyond its native dimensions and it blurs. Vector images are descriptions of shapes expressed in mathematics. A circle in SVG is defined by its radius and position; render it at 12 pixels or 12 metres and it's still perfect.
If you're exporting a photograph, you're choosing between raster formats. If you're exporting a logo, a chart, or an icon, SVG is almost certainly the right answer. The interesting cases live in between — a logo with photographic texture, or an illustration with millions of paths.
02The raster formats, ranked by usefulness
JPEG turned thirty and refused to retire. It compresses via the Discrete Cosine Transform, discarding the high-frequency detail your eye is least likely to miss — a photo at quality 80 is usually indistinguishable from the original at a fraction of the size. It's your format when you need maximum compatibility with minimum fuss, but it can't do transparency and every re-save degrades it. Treat JPEGs as export targets, not working files.
WebP handles both lossy and lossless compression and carries transparency, making it a credible replacement for both JPEG and PNG in one format. AVIF, built on the AV1 codec, pushes compression further still — often cutting a well-tuned JPEG in half at the same perceived quality. The catch: AVIF encodes slowly, and its aggressive compression can smear fine detail. PNG stays irreplaceable for lossless transparency and pixel-perfect flat-colour graphics, and GIF survives only for animation in legacy channels.
Proportions vary hugely by image content — treat this as direction, not a measurement.
Never export a photograph as PNG for the web. Lossless compression can't compact photographic noise the way DCT-based lossy compression can — the file balloons for no visible gain.
JPEG turned thirty and refused to retire — but for new web work, it's no longer the best tool in the drawer.
03The one vector format you need
SVG renders at any resolution, supports CSS styling and JavaScript, can be inlined directly into HTML, and typically produces tiny files. A logo that would be 40 KB as a PNG can be 2 KB as an SVG. It isn't for photographs — those embedded in SVG are just a raster wrapped in XML — but for anything born in a vector app, it's unbeatable. Serve AVIF and WebP for photos with a fallback like this:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…">
</picture>The browser walks the list and picks the first format it understands. Try the interactive picker on the Format Table, or learn to convert cleanly.
04The mental model, condensed
The format decision is usually that fast. Where it's not — juggling compatibility, encoding time, quality and file-size budgets at once — that's what the rest of this guide is for.