Choosing between PNG, JPEG and WebP

Choosing an image format is usually decided by habit rather than by what the image contains, which is how a screenshot of text ends up as a blurry JPEG and a photograph ends up as a four-megabyte PNG. The rule that actually works is short: photographs go to a lossy format, flat graphics go to a lossless one.

The three formats worth using

JPEG

Lossy, and designed around how human vision works. It discards fine colour detail that the eye is poor at noticing, which is extremely effective on photographs and destructive on sharp edges. No transparency. Universally supported by everything.

PNG

Lossless: what you put in comes out unchanged. It supports full alpha transparency and compresses runs of identical colour very well, which makes it excellent for screenshots, logos, diagrams and anything with text. On a photograph it is enormous, often ten times the equivalent JPEG.

WebP

Supports both lossy and lossless modes plus transparency, and is typically 25 to 35 percent smaller than JPEG at comparable visual quality. Every current browser supports it. Outside the browser, support is good but not universal, so it is the right default for the web and a poor choice for a file you are emailing to someone who will open it in whatever their computer came with.

Why the wrong choice looks wrong

JPEG works in 8×8 pixel blocks and discards high-frequency information. Around a hard black-on-white edge — the edge of a letter — that produces visible ringing, sometimes called mosquito noise. It is why a screenshot saved as JPEG looks slightly dirty around the text, and why the artefacts get worse each time the file is re-saved.

PNG has the opposite problem. It compresses by finding repetition, and a photograph has almost none: every pixel differs slightly from its neighbours. There is nothing to exploit, so the file stays large.

Transparency is the decision that cannot be undone

JPEG has no alpha channel. When a transparent PNG is converted to JPEG, the transparent areas must become some colour — usually white, sometimes black — and the transparency is gone permanently. A logo that looked correct on one page arrives with a rectangle around it on another.

If an image has transparency you need, PNG and WebP are your only two options. The image converter fills transparent areas with white when producing JPEG and says so, because the alternative — filling with black — surprises people badly.

Quality settings, and why 80 is the usual answer

The JPEG and WebP quality scale is not linear or perceptual. In practice:

• 95–100 is very large for almost no visible gain over 90.
• 75–85 is the sweet spot for photographs. Most people cannot distinguish quality 85 from the original at normal viewing size, and the file is a fraction of the size.
• 60–75 is acceptable for thumbnails and background images.
• Below 60 shows visible blocking, especially in skies, gradients and around edges.

Images containing text need higher settings than photographs, because artefacts around glyphs are much easier to see than artefacts in foliage.

Generation loss is real

Every lossy save discards information permanently. Opening a JPEG, cropping it and saving it again re-encodes the already-degraded pixels. Do that repeatedly and the image visibly falls apart.

The practical rule: keep the original. Edit from it each time rather than from the exported version, and treat exports as disposable. Converting a JPEG to PNG does not repair anything — it produces a larger file containing exactly the same damage.

Resize before you compress

This is the saving people forget. A 4000-pixel-wide photograph displayed in a 800-pixel column is carrying twenty-five times more pixels than it can use. Reducing the dimensions to what will actually be displayed usually saves far more than any quality setting, and costs nothing visually.

Compression is the second step, not the first. The image compressor adjusts quality; cropping to what matters with the crop tool reduces the pixel count as well.

Quick reference

Where you have vector source material — a logo, an icon — SVG beats all of these, because it scales to any size without loss and is usually smaller. The SVG optimiser will strip the editor metadata that design tools leave behind.