JPEG, PNG, WebP or AVIF: Choosing an Image Format

Choosing an image format is really two questions. Does the image need to be pixel-exact, and does it need transparency? Almost everything else follows from those two answers.

Lossy and lossless

Lossless formats reconstruct the original exactly. PNG, GIF and lossless WebP work by finding redundancy (runs of identical pixels, repeated patterns), and describing it more compactly. Nothing is discarded.

Lossy formats throw information away, choosing what to discard based on models of human vision. JPEG, lossy WebP and AVIF all exploit the fact that the eye is much more sensitive to brightness than to colour, and much more sensitive to smooth gradients than to fine high-frequency detail.

The consequence: lossy formats compress photographs far better and mangle sharp edges. Lossless formats preserve sharp edges perfectly and are enormous for photographs. This single trade-off explains most format choices.

JPEG (1992)

JPEG converts to a luminance/chrominance colour space, downsamples the colour channels (usually to half resolution; this is 4:2:0 chroma subsampling), splits the image into 8×8 blocks, applies a discrete cosine transform to each, and quantises the resulting coefficients. The quality slider controls how aggressively that quantisation happens.

Good at: photographs, anything with smooth tonal gradation, universal compatibility.

Bad at: text, line art, screenshots, logos: anything with hard edges, which produce visible ringing. No transparency. No animation.

The 8×8 block structure is why heavily compressed JPEGs look blocky, and why red text on a coloured background smears. The colour channels were halved before anything else happened.

Practical quality settings: 85 is the usual sweet spot for web photography. Below 70, artefacts become visible on most images. Above 92 you are mostly spending bytes on noise.

One thing worth knowing: JPEG is generation-lossy. Every save re-quantises. Opening a JPEG, cropping it, and saving degrades it again. Keep an original in a lossless format and export JPEGs from it.

PNG (1996)

PNG applies a per-row filter to make the data more compressible, then runs DEFLATE over it. Lossless, with full 8-bit alpha transparency.

Good at: screenshots of interfaces, logos, icons, diagrams, anything with flat colour regions or text, and anything needing transparency.

Bad at: photographs. A photo saved as PNG is typically 5-10× the size of a good JPEG with no perceptible benefit.

PNG-8 uses a 256-colour palette and is dramatically smaller than PNG-24 for images that fit within it: most icons and simple logos do. Most tools will not choose this automatically.

The filtering step is why PNG rewards flat colour so heavily: a row identical to the one above it compresses to almost nothing.

WebP (2010)

Google’s format, derived from the VP8 video codec. It does both lossy and lossless, plus transparency and animation: the only one of the older formats to cover every case.

Typical savings against JPEG at matched quality: 25-35%. Against PNG for images with transparency: often 25% or better.

Use it for: essentially everything on the web, with a JPEG or PNG fallback for legacy clients.

Watch out for: its lossy mode uses 4:2:0 chroma subsampling unconditionally, so saturated red or orange text on a contrasting background can degrade noticeably. Use lossless WebP or PNG for those.

AVIF (2019)

Based on the AV1 video codec. It is the strongest compressor of the four by a clear margin, commonly 50% smaller than JPEG at equivalent perceived quality, and it supports HDR, wide colour gamut, 12-bit depth, transparency and animation.

The catch is encoding time. AVIF encoding is dramatically slower than JPEG, sometimes by two orders of magnitude at high effort settings. For a static asset pipeline that is irrelevant. For encoding user uploads on request, it matters a great deal.

AVIF also handles very low bitrates unusually gracefully. It degrades into softness rather than blockiness, which is far less objectionable.

Side by side

	JPEG	PNG	WebP	AVIF
Lossy	Yes	No	Yes	Yes
Lossless	No	Yes	Yes	Yes
Transparency	No	Yes	Yes	Yes
Animation	No	No	Yes	Yes
Relative size (photo)	100%	~600%	~70%	~50%
Encode speed	Very fast	Fast	Moderate	Slow
Browser support	Universal	Universal	Universal	Broad

The decision tree

1. Logos, icons and diagrams? Use SVG. It scales to any size, is usually the smallest option, and is text so it compresses well over the wire. None of the raster formats compete here.
2. Photograph, no transparency needed? AVIF if your pipeline can afford the encode, WebP otherwise, JPEG as fallback.
3. Photograph with transparency? WebP or AVIF. This is the case PNG traditionally handled badly.
4. Screenshot, diagram or text-heavy image? PNG, or lossless WebP for about 25% less. Never lossy.
5. Animation? WebP or AVIF. Not GIF. It is limited to 256 colours and is startlingly inefficient. For anything longer than a couple of seconds, an actual video file with <video autoplay muted loop> beats all of them.

The bigger win is dimensions

Format choice matters less than not serving a 4000px image into a 400px slot. Downscaling to the displayed size typically saves more than any format switch, and the two compound.

Serve responsive sizes with srcset so phones do not download desktop assets, and always set width and height attributes: without them the browser cannot reserve space, and the page reflows as images arrive, which is what Cumulative Layout Shift measures.

The image resizer and compressor both run in the browser through the Canvas API, so nothing is uploaded. That is worth something when the image is a screenshot of an internal dashboard.