JPEG, PNG, WebP and AVIF: How to Choose the Right Image Format

The one distinction that decides most of it: lossy or lossless

Lossless compression stores your image so that every pixel can be reconstructed exactly. Save, reopen and save again a thousand times and nothing changes. Lossy compression throws information away permanently in exchange for much smaller files, and each save cycle throws away a little more.

This matters more than any benchmark. If an image is a working file that you will edit again, keep it lossless. If it is a finished asset going onto a web page, lossy is almost always the correct answer, because the data you lose is data a human eye will not notice while the bytes you save are real.

The practical trap is generation loss. Opening a JPEG, cropping it, and saving it as JPEG again re-encodes the whole image. Do that five or six times through a workflow and you will see blocky edges and colour smearing around high-contrast details. Keep a lossless master, and export lossy copies from it each time rather than editing the exports.

What each format actually does

The size figures are ranges rather than promises. Compression efficiency depends heavily on image content: AVIF pulls far ahead on smooth gradients, skies and skin tones, while its advantage narrows on noisy, highly detailed photographs where there is simply less redundancy to exploit.

A decision process that works

Rather than memorising the table, work through the questions in order and stop at the first one that applies.

1. Does the image need transparency? If yes, JPEG is out. Use WebP for web delivery, or PNG if it must open in anything and everything.
2. Is it a screenshot, diagram, logo, chart or anything with flat colour areas and sharp text? Use PNG, or lossless WebP for the same pixels at a smaller size. Lossy formats produce visible fringing around hard edges.
3. Is it a photograph destined for a web page? Use AVIF with a WebP or JPEG fallback. This is where the newer formats earn their keep.
4. Does it need to be opened by arbitrary third-party software, printers, or an old system you do not control? Use JPEG for photos and PNG for graphics. Compatibility beats efficiency when you cannot test the destination.
5. Is it an archival master or an editing source? Use PNG, or the original camera format. Never archive in a lossy format.

Transparency, and why converted logos get grey edges

When you convert a transparent PNG to JPEG, every transparent pixel has to become something opaque. Different tools make different assumptions: some fill with white, some with black, some with whatever the canvas colour happened to be. A logo with soft anti-aliased edges will then show a halo of the fill colour against any other background.

If you must produce a JPEG from a transparent source, flatten it deliberately onto the exact background colour it will sit on, rather than letting the encoder choose. If the background will vary, you need a format with alpha and there is no way around it.

Colour profiles and metadata survive conversion badly

Two things travel alongside the pixels: the colour profile, which tells a display how to interpret the numbers, and the metadata, which records camera settings, capture time and sometimes GPS coordinates.

Images tagged with a wide-gamut profile such as Adobe RGB or Display P3 will look flat and desaturated if the profile is dropped and the file is then treated as sRGB. If your converted images look duller than the originals, a lost profile is the usual culprit. For web work, convert to sRGB deliberately before export rather than hoping the profile survives.

Metadata stripping cuts both ways. It removes location data you probably do not want to publish, which is good, but it also removes authorship and copyright fields, which may matter to you. Know which behaviour your tool has before you batch-process a folder of client work.

Serving modern formats safely

You do not have to choose one format for every visitor. The picture element lets the browser pick the first source it understands, so modern browsers take the small AVIF and everything else falls back gracefully.

• List sources from most to least efficient: AVIF first, then WebP, then a JPEG or PNG in the img tag itself.
• Always keep a real img element inside picture. It carries the alt text and is what older browsers and assistive technology actually use.
• Set width and height attributes on the img so the browser reserves the right amount of space and the page does not jump while images load.
• Only bother with three formats where the file is large enough for the saving to matter. For a 4 KB icon the extra requests and build complexity cost more than they save.