Choosing between PNG, JPEG, WebP and AVIF
Photographs go in JPEG, WebP or AVIF. Screenshots, logos, icons, diagrams and anything with flat colour or crisp text go in PNG, or in WebP's lossless mode. If you need transparency, that rules out JPEG entirely. If you are choosing a format for the web today and can serve more than one, AVIF first, WebP as the fallback, and the original JPEG or PNG for anything very old.
That is the whole decision. The rest of this explains why, so you can tell when the rule of thumb does not apply.
What each format is actually good at
| Format | Compression | Transparency | Animation | Best for | Worst for |
|---|---|---|---|---|---|
| PNG | Lossless | Yes, full alpha | No | Screenshots, logos, icons, line art, anything with text | Photographs, where files get very large |
| JPEG | Lossy only | No | No | Photographs, where universal support matters | Sharp edges, flat colour, text, anything you will edit again |
| WebP | Lossy or lossless | Yes, in both modes | Yes | A general replacement for both PNG and JPEG on the web | Software older than about 2020 |
| AVIF | Lossy or lossless | Yes | Yes | Smallest files for photographs, wide colour and high dynamic range | Fast encoding, and older software that cannot open it |
Lossless means the decoded image is bit for bit identical to what went in. Lossy means the encoder throws information away permanently in exchange for a smaller file, and you get an approximation back.
PNG is lossless and always will be. Its compression works by predicting each pixel from its neighbours and then deflating the differences, which is brilliant when large areas are identical or repeat, and poor when every pixel differs slightly, as in a photograph. A photo saved as PNG is often five to ten times larger than a good JPEG of the same picture with no visible benefit.
JPEG is lossy and has no alpha channel, so it cannot store transparency at all. It divides the image into blocks, converts each to frequency information, and discards the fine detail your eye is least sensitive to. That works beautifully on continuous tone photographs and badly on hard edges, where it produces the faint halos and mosquito noise you see around text saved as JPEG.
WebP and AVIF are both modern container formats derived from video codecs. Both do lossy and lossless, both support full alpha transparency, and both are supported by every current mainstream browser. AVIF generally compresses harder than WebP, especially at low quality settings, and handles wide colour gamuts and higher bit depths. The trade is encoding time, which can be noticeably slower, and slightly narrower support outside browsers, in older desktop apps and image tools.
Transparency
Only PNG, WebP and AVIF can store a real alpha channel, meaning each pixel carries its own opacity value. That is what lets a logo sit cleanly on any background colour.
If you convert a transparent image to JPEG, the transparency has to go somewhere. Most tools flatten it onto white, some onto black, and you will only find out which when the image appears on a coloured background with a white box around it. If you know the final background colour, flatten deliberately onto that colour rather than letting the converter guess.
When lossy is fine, and when it is not
Lossy is fine for final delivery of photographic content at the size it will actually be displayed. At sensible quality settings the loss is genuinely hard to see.
Lossy is a bad idea when:
- The image has text, thin lines, or large areas of flat colour. Compression artefacts cluster exactly on hard edges.
- The file is a working master you will edit and re-export later.
- The image will be scaled up, or heavily colour graded afterwards, which amplifies whatever the encoder did.
- Exact pixel values matter, as in scientific, medical or forensic work, or a screenshot someone will read numbers off.
Why re-saving a JPEG keeps making it worse
Every time a JPEG is decoded and saved again, the encoder quantises data that has already been quantised, and the rounding error accumulates. It is not that quality is being reduced twice from the original; it is that the artefacts introduced by the first pass are now being treated as real image detail and approximated in turn.
Saving at a higher quality setting does not undo it. Detail removed in the first save is gone. Re-encoding at quality 95 from a quality 60 file just produces a bigger file that faithfully preserves the quality 60 artefacts. If you edit an image repeatedly, keep the master in a lossless format and export a JPEG, WebP or AVIF at the end.
Rough size expectations
These are rules of thumb, not measurements, and real numbers vary hugely with image content. For a typical photograph at the same perceived quality, expect JPEG to be the baseline, WebP to land somewhere around a quarter smaller, and AVIF smaller again, with the gap widening the more you compress. For flat graphics, lossless WebP usually beats PNG, sometimes substantially. Noise and fine texture inflate every lossy format, so a grainy photo will never compress like a clean studio shot.
Resize before you compress
The single biggest win is almost never the format. It is dimensions. An image served at 4000 pixels wide and displayed in an 800 pixel column is carrying about twenty five times more pixel data than it needs, and no encoder can fix that. Resize to roughly the size it will be shown (double, if you are targeting high density screens), then choose the format, then tune the quality setting until you can just about see the difference and step back one notch.