Every few years the internet decides there is a new best image format, and every few years the honest answer stays the same: it depends on what is in the picture. A photograph of a beach and a screenshot of a spreadsheet are different kinds of data, and no single format handles both well.
Here is the decision, made once, in plain terms, along with the reasoning so you can make it yourself the next time something changes.
What the formats actually do
Compression comes in two flavours. Lossless compression finds patterns and stores them compactly; unpack it and you get the original back, bit for bit. Lossy compression throws information away, choosing what to discard based on assumptions about human vision. It is not a bug, it is the entire point: our eyes are far more sensitive to brightness than to color, and far more sensitive to large shapes than to fine noise.
- JPEG is lossy, from 1992, and understood by everything that has ever had a screen. It handles smooth gradients of color well and hard edges badly. It cannot store transparency.
- PNG is lossless, handles transparency properly, and is excellent at flat areas of color and sharp edges. On a photograph it produces files several times larger than a JPEG that looks identical.
- WebP does both: a lossy mode that beats JPEG by roughly a quarter to a third at the same visual quality, and a lossless mode that beats PNG. It supports transparency in both modes, which is the thing PNG could do and JPEG could not.
- AVIF is newer, derived from video compression, and typically lands another twenty to fifty per cent below WebP. It is very good at gradients, which is where JPEG traditionally falls apart. It is slower to encode, and older software still trips over it.
The decision, in four questions
Does it need transparency?
If yes, JPEG is out. That leaves PNG, WebP or AVIF. For a logo or an icon with flat color, lossless is the right call and the file will be tiny anyway. For a cut-out photograph with a soft edge, lossy WebP or AVIF with an alpha channel will be dramatically smaller than PNG.
Is it a photograph or a graphic?
Photographs are continuous tone: millions of subtly different pixels, no hard edges except where objects meet. Lossy compression is designed for exactly this and the artefacts hide in the detail.
Graphics are the opposite: screenshots, diagrams, charts, anything with text or flat fills. Lossy compression hates hard edges. Put a screenshot through a JPEG encoder and you get a faint halo of noise around every letter, the visual equivalent of a bad photocopy. Use a lossless format, or a lossy one at a very high quality setting.
Does it have large smooth gradients?
Skies, studio backdrops, soft shadows, anything that fades gently from one tone to another. This is where JPEG shows banding: instead of a smooth transition you get visible steps, like contour lines on a map. AVIF is noticeably better here, and it is the one case where the newer format is worth the extra encoding time regardless of file size.
Who has to open it?
On a website, none of this matters, because the browser tells the server what it can read and you can serve different formats to different visitors. In an email attachment, a print shop’s inbox or a client’s ten year old design software, it matters enormously. JPEG and PNG are the two formats you can send anywhere without a conversation.
The quality slider is not a percentage
A quality setting of 80 does not mean the image is 80 per cent as good. The number is an index into a table of compression parameters, and the relationship between it and the visible result is not linear at all.
What matters in practice is where the curve bends. From 100 down to roughly 85, file size drops fast and almost nothing visible changes. From 85 down to about 70, size keeps dropping and only the most detailed areas start to soften. Below 60, the picture starts to look compressed and everyone can see it.
So the useful range for photographs on the web is 75 to 85, and going higher mostly buys file size rather than quality. The exception is any image that will be edited again later: every re-encode discards more, and the damage accumulates. Keep an untouched original, always.
Size beats format, every single time
This is the part people skip. A 4000 pixel wide photograph saved as a beautifully optimized AVIF is still a catastrophe if it is displayed in a 600 pixel wide column. You have compressed an image that should never have been that size.
Decide the largest size an image will ever be shown at, double it for high density screens, and resize to that before you think about format. A 1200 pixel JPEG at quality 80 will beat a 4000 pixel AVIF at any setting, on every measure that matters, on every connection.
Resize first, then choose a format, then set quality. Doing it in any other order means optimizing the wrong thing.
A working default
If you want one rule to apply without thinking:
- Photographs on the web: resize to the display width times two, then WebP at quality 80, with a JPEG fallback if your stack needs one.
- Screenshots, diagrams, anything with text: PNG, or lossless WebP if everything that touches it supports it.
- Logos and icons: SVG if you have the vector, PNG if you do not.
- Anything with a big smooth sky or gradient: AVIF, and look at it afterwards.
- Anything you will send to another human being: JPEG or PNG.
Do it in batches or you will not do it
The reason most sites are full of oversized images is not ignorance. It is that resizing and converting one picture at a time is dull, and dull work gets skipped under deadline.
The fix is to make the decision once and store it. Whatever tool you use, if it can hold a preset, define presets that match how your images are actually used: a full width hero, a card thumbnail, an email friendly version. Then converting a hundred images is one operation instead of a hundred.
Formats will keep changing. The reasoning will not: work out what kind of picture it is, get it to the right size first, choose lossy or lossless accordingly, and keep the original somewhere safe.
