Which image format should you actually use?

The ten-second decision

Almost every real case is settled by three questions. Work down the list and stop at the first "yes".

1. Is it a logo, icon or diagram that could be drawn with shapes? Use SVG. It stays sharp at any size and is usually the smallest file on the page.
2. Does it need transparency, or contain text, screenshots or hard edges? Use WebP, falling back to PNG if something in your pipeline refuses WebP.
3. Is it a photograph? Use WebP. Use JPG only when something downstream (a printer, an old CMS, a government portal) demands it.

That settles the overwhelming majority of images on the web. The rest of this page explains why, and what to do in the cases that do not fit.

Side-by-side comparison

A note on the numbers you will see elsewhere. Claims like "WebP is 30% smaller than JPEG" are averages across test corpora, not guarantees. The real figure for your image depends on its content, its dimensions and which encoder produced it. Convert one of your own files and compare; that is the only number that matters.

Lossy vs lossless

Every format above is either lossy or lossless, and that one distinction resolves most confusion about image quality.

Lossless formats (PNG, GIF, SVG) store enough to reconstruct the original exactly. Save, open and re-save a PNG a thousand times and the last file is pixel-identical to the first. The cost is size: lossless compression can only exploit real repetition, and photographs contain very little.

Lossy formats (JPG, and the lossy modes of WebP and AVIF) permanently discard information human vision is poor at noticing, mostly fine high-frequency detail and subtle colour variation. That is how a 6 MB photograph becomes a 300 KB JPEG that looks identical on screen.

The consequence people get caught by is generational loss. Each time you open a lossy file and save it again, the encoder re-processes data that was already approximated, and errors compound. Edit a JPEG ten times and the tenth copy is visibly worse than the first, even at a high quality setting every time.

The working rule: keep a lossless master, export lossy copies. Edit the PNG or the camera original; publish the WebP. When something needs changing, go back to the master rather than editing the published file.

The formats in detail

JPG: the photograph default, for thirty years

JPEG divides an image into 8 × 8 pixel blocks, converts each into frequency information, and discards the frequencies your eye weights least. It is superb at continuous-tone photographs and bad at hard edges: the sharp black-to-white transition of text needs high-frequency detail to describe, and discarding it produces the familiar ringing halo.

Its other limitation is structural: JPEG has no alpha channel. There is no such thing as a transparent JPG. Convert a transparent PNG to JPG and every transparent pixel must become a solid colour, which is why careless converters produce black backgrounds.

Use it when: a photograph is going somewhere that will not accept anything newer.

PNG: lossless, and frequently misused

PNG compresses losslessly with DEFLATE, the algorithm behind ZIP. It hunts for repeated byte patterns, which makes it excellent on flat colour, sharp edges and large uniform regions (screenshots, logos, diagrams, pixel art) and poor on photographic noise, where there is nothing to repeat.

The most common mistake on the web is saving photographs as PNG. A 500 KB JPEG routinely becomes a 4 MB PNG carrying exactly the same visible information. If you have photographic PNGs on your site, converting them is usually the largest single saving available to you.

PNG itself has no quality setting, because it is lossless by definition and there is nothing to trade. When a tool offers a "quality" or "compress PNG" control for PNG, it is reducing the number of distinct colours, which is lossy. That works very well on flat graphics and poorly on gradients.

Use it when: you need transparency, sharp text, or a master you will edit repeatedly.

WebP: the sensible default

WebP does what JPEG does, but predicts each block from its already-decoded neighbours and stores only the difference. Since most blocks in a real image resemble the one above or to the left, there is far less to record. It also carries a full alpha channel, so it replaces transparent PNGs at a fraction of the size, which is often the bigger win of the two.

Support is universal in current browsers: Chrome and Android since 2014, Firefox since 2019, Safari and iOS since version 14 in 2020. The friction is outside the browser: older desktop editors, some print workflows and plenty of internal business software still refuse it.

Use it when: the image is going on a website, which is most of the time.

AVIF: better, but not yet effortless

AVIF derives from the AV1 video codec and generally beats WebP, sometimes substantially, at matching visual quality. It also handles wide colour gamut and high dynamic range properly, which WebP does not.

The catch is production rather than consumption. Browsers decode AVIF widely, but very few can encode it, and encoding is computationally expensive (far slower than JPEG). That is why our format converter tests your browser at page load and disables the AVIF option when it cannot produce the file, rather than handing you something broken.

Use it when: you have a build pipeline that can encode it offline, and a WebP or JPEG fallback in a <picture> element.

GIF: largely obsolete

GIF is capped at 256 colours per frame and offers only on/off transparency, which produces jagged edges over any background it was not designed against. For animation, an MP4 or WebM video is typically several times smaller. For still images, every other format here beats it.

Use it when: a platform accepts nothing else.

SVG: not a bitmap at all

An SVG is a text file describing shapes: lines, curves, fills. Because it is instructions rather than pixels, it renders perfectly at any size, from a 16 px favicon to a billboard, from one small file. For logos and icons it is almost always the right answer.

It cannot represent a photograph in any useful way. And because SVG is a scriptable format, files from untrusted sources should be sanitised before you serve them from your own domain.

Four expensive mistakes

Serving photographs as PNG

This is the most costly and most common error on the web. Converting photographic PNGs to WebP or JPG frequently removes 80-90% of their weight with no visible difference. Start here before optimising anything else.

Saving screenshots as JPG

Screenshots are full of text and sharp UI edges, which is exactly what JPEG handles worst. You get visible halos around every letter and a larger file than PNG would have produced. Use PNG or WebP.

Editing the published copy

Each open-and-save cycle of a lossy file compounds damage. Keep the master, re-export from it, and never treat the file on your server as your working copy.

Optimising the format but not the dimensions

A 4000 px photograph displayed in a 600 px column wastes roughly 95% of the bytes downloaded, whatever format it is in. Resize first, then choose a format. The order matters.