JPEG, PNG or WebP: choosing without guessing

Most people choose an image format by whatever their software offered last time. That works until the day a logo arrives with a grey box behind it, or a photograph on a website looks like it was assembled from tiles, or a 40KB screenshot somehow becomes 3MB.

All three come from the same mistake: the format was built for a different kind of picture. Here is what each one really does, so you can choose on purpose instead of guessing.

The one distinction everything follows from

Image formats split into two families, and almost every practical difference comes from which side a format sits on.

• Lossy formats throw information away permanently to save space. JPEG and WebP can do this. Save, reopen, and you do not get the original pixels back. You get a close copy, and the format decided you would not notice the difference.
• Lossless formats keep every pixel exactly. PNG does this. Compress it, decompress it, and the result is bit-for-bit identical to what went in.

Lossless sounds better, but it is simply a different trade. A lossless photograph is often ten times larger than a lossy one that nobody can tell apart from it.

JPEG: for photographs, and nothing else

JPEG (published as the ITU-T T.81 standard) was designed in 1992 around a specific observation about human eyes: we are far more sensitive to brightness than to colour, and we barely notice fine detail in busy areas. So it keeps brightness carefully, stores colour at lower resolution, and discards the fine detail where the picture is already complicated.

On a photograph this is close to magic. A 6MB camera file drops to 400KB and most people cannot see the difference at normal size.

On anything with hard edges it falls apart. Text, logos, screenshots and line drawings are made almost completely of sharp transitions, which is exactly what JPEG throws away first. You get faint smudged halos around every letter, an artefact known as ringing. Once saved, it is permanent.

JPEG also has no transparency. This is the most common format mistake of all: save a logo with a transparent background as JPEG and the transparency is filled in, usually with white or black. That grey box behind a logo is almost always a PNG that was converted to JPEG somewhere along the way.

PNG: for anything with hard edges or transparency

PNG compresses by finding repetition: runs of identical pixels and patterns that recur. A screenshot of a document is mostly white with black shapes, and PNG stores that very efficiently while keeping every edge perfectly sharp.

Give it a photograph and the same strength becomes a weakness. In a photograph almost no two adjacent pixels are identical: a clear sky is hundreds of slightly different blues. There is nothing to find, so the file stays large. A photograph saved as PNG is routinely five to ten times bigger than the same picture as JPEG, with no visible benefit.

PNG supports full transparency through an alpha channel, which is why logos, icons and anything that has to sit on top of something else should be PNG.

One result of this is easy to miss: because PNG is lossless, it cannot be compressed to a target file size. There is no quality dial to turn. The only way to make one smaller is to reduce its dimensions or its number of colours. If a form demands a photo under 20KB, that photo needs to be a JPEG.

WebP: newer, smaller, and now safe to use

WebP does both jobs. It has a lossy mode that beats JPEG by roughly 25 to 35 per cent at equivalent quality, and a lossless mode that beats PNG by roughly 25 per cent. Those are Google's own figures for the format. It also supports transparency in both modes, which JPEG cannot do at all.

The old objection was support, and that objection no longer holds. Every current browser reads WebP, and has done for years. The remaining gaps are in older desktop software (some print workflows, some older versions of Office and Photoshop) and in what other people can open when you email them a file.

So the practical rule depends on who will open the file. For your own website, WebP. It is smaller, so pages load faster, and that helps both readers and search ranking. For a file you are sending to someone, JPEG or PNG, because you have no idea what they will open it with.

The short version

• Photograph, for a website: WebP, falling back to JPEG.
• Photograph, to send to a person or a form: JPEG.
• Logo, icon, or anything needing transparency: PNG.
• Screenshot with text in it: PNG. JPEG will smear the text.
• Line drawing, chart, diagram: PNG, or SVG if you have the original.
• Anything that must hit a specific file size: JPEG or WebP. Not PNG.

Two mistakes that cost the most

Converting JPEG to PNG to “improve quality”. This does nothing. Everything JPEG discarded is already gone; PNG simply stores the damaged version losslessly, in a much larger file. You get a bigger file and exactly the same picture.

Re-saving a JPEG repeatedly. Each save discards more. Open, crop, save. Open again, adjust, save again. After a dozen rounds the damage is obvious. If you are editing, keep a lossless original and export a JPEG at the end, once.

Which format for which job

What you have	Use	Why
A photograph for a website	WebP, with JPEG as the fallback	Same picture, roughly 25–35% fewer bytes
A photograph for a form or an email	JPEG	Accepted everywhere, including systems that reject WebP
A logo, icon or anything with transparency	PNG, or WebP	JPEG has nowhere to store transparency and fills it with a colour
A screenshot with text in it	PNG	JPEG blurs the edges of letters; PNG keeps them exact
A chart, diagram or line drawing	PNG	Large flat areas compress well without loss
A scanned document	JPEG, or PDF if there are several pages	It is a photograph of paper, and paper grain is what makes PNG huge here
Anything you will edit again later	PNG	Every JPEG save discards more detail; PNG saves are lossless
An animation	WebP or MP4, not GIF	GIF is limited to 256 colours and produces files several times larger

The size difference, in the order you should expect it

• A photograph: WebP is smallest, JPEG close behind, PNG several times larger. A 2 MB JPEG can become a 10 MB PNG holding exactly the same pixels.
• A screenshot or logo: the order reverses. PNG is smallest, because flat areas of identical colour compress almost perfectly, and JPEG wastes bytes inventing detail.

That reversal is why both formats are still around. Neither is better. They are built for different pictures, and using the wrong one costs you either size or sharpness.

Converting between them

All of these run in your browser here: PNG to JPG, JPG to WebP, PNG to WebP, or the general converter if you want to choose the output yourself.

One thing to expect: converting a PNG with transparency to JPEG will fill the transparent areas with a solid colour, because JPEG has nowhere to put them. The format causes this, and any tool will do the same. Convert to WebP instead if you need to keep the transparency.