Choosing an image format

Most image format decisions are made by whatever the export dialog defaulted to. That is usually harmless and occasionally very expensive, because the gap between the right format and the wrong one for a given image is routinely a factor of ten in file size, or the difference between crisp text and a smeared mess. This guide covers what each format is actually built for.

Two kinds of compression, and why the distinction decides everything

Every raster format takes one of two approaches, and almost every format mistake comes from applying the wrong one.

Lossless compression encodes the image so it can be reconstructed byte for byte. It works by finding redundancy: runs of identical pixels, repeated patterns, predictable relationships between neighbouring pixels. PNG and lossless WebP work this way. The saving depends entirely on how repetitive the image is, so a screenshot with large flat areas compresses dramatically while a photograph barely compresses at all.

Lossy compression discards information that human vision is poor at detecting, then compresses what remains. JPEG converts blocks of pixels into frequency components and throws away the high-frequency ones, because our eyes are far more sensitive to broad tonal shifts than to fine detail. It also stores colour at lower resolution than brightness, exploiting the fact that we perceive luminance much more precisely than chroma.

The consequence is a simple rule with a lot of explanatory power: lossy compression assumes your image looks like a photograph. When it does, the results are extraordinary, with 90 percent size reductions at no visible cost. When it does not, and particularly when the image contains text or hard edges, the same machinery produces visible damage while saving very little.

What each format is for

Working through them in rough order of age:

• PNG is lossless with full alpha transparency. It is the correct choice for screenshots, UI assets, icons, diagrams, logos, and anything containing text. It is the wrong choice for photographs, where it commonly produces files five to ten times larger than a visually identical JPEG.
• JPEG is lossy, has no transparency, and remains excellent at what it was designed for. Photographs, renders, and images with smooth tonal gradients compress superbly. Its weaknesses are text, sharp edges, and flat colour areas, where it produces ringing and blocking.
• WebP does both lossy and lossless, and supports alpha in either mode. Lossy WebP typically lands 25 to 35 percent below an equivalent JPEG; lossless WebP typically beats PNG by around 20 percent. For web delivery it is close to a default choice, since browser support has been universal for years.
• AVIF compresses better still, often 50 percent below JPEG, and supports HDR and wide colour gamut. The cost is encoding time, which can be an order of magnitude slower, and slightly less consistent support outside browsers. It is worth using for large hero images where the bandwidth saving justifies the build-time expense.
• SVG is not a raster format at all. It stores drawing instructions rather than pixels, so it scales to any size and any pixel density without degrading. For logos, icons, and diagrams it is almost always the right answer, and it is frequently smaller than a PNG of the same artwork.

The transparency trap

The most common conversion mistake is sending an image with an alpha channel to a format that has none. JPEG cannot store transparency under any circumstances, so every transparent pixel must be flattened onto some background colour during conversion.

Most tools flatten onto white, which is invisible when the image will sit on a white page and glaringly wrong everywhere else. A logo designed for a dark header acquires a white box. A soft drop shadow becomes a grey smudge, because the semi-transparent pixels at its edge get blended against white and the result is baked in permanently.

There is no recovery from this. The alpha channel is not hidden in the JPEG somewhere, it is gone. If you need transparency and small files, WebP gives you both, and PNG gives you transparency at a size cost. Those are the only options.

Why converting between lossy formats accumulates damage

Lossy compression is not idempotent. Decoding a JPEG and re-encoding it does not reproduce the same file, because the encoder makes fresh decisions about what to discard, and it is now working on an image that already contains the previous encoder artefacts.

The artefacts are treated as real image content and preserved at some cost in bits, while genuine detail continues to be discarded. Repeat this often enough and you get the characteristic degraded look of an image that has been screenshotted, saved, re-uploaded, and re-compressed across a dozen platforms.

Two practical rules follow. Always convert from the highest-quality source you have, rather than from an intermediate copy. And when editing, work in a lossless format and export to a lossy one exactly once, at the end.

Dimensions matter more than format

It is worth stating plainly, because it is routinely overlooked while people optimise the wrong variable: serving an image at larger pixel dimensions than it will ever be displayed at wastes more bandwidth than any format choice.

A 4000 pixel wide photograph displayed in a 800 pixel wide column carries twenty-five times more pixel data than it needs. No amount of format tuning recovers that. Resize first, then choose a format, then tune quality, in that order.

For responsive delivery, the srcset attribute lets the browser pick an appropriately sized file for the device, and the picture element lets you offer AVIF and WebP with a JPEG fallback. Together they solve most of the problem declaratively.

A short decision procedure

If the artwork is a logo, icon, or diagram that exists as vector, use SVG and stop. If it contains text or screen content, use PNG, or lossless WebP if you control the delivery. If it is photographic, use WebP or AVIF for the web, and JPEG when handing the file to someone else. If it needs transparency, that rules out JPEG entirely.

Then check the dimensions before you check anything else.

Frequently asked questions

Tools referenced in this guide