JPG, PNG or WebP: choosing the right image format

Most people pick an image format by habit, or by whatever the save dialog offered first. It usually works well enough that the cost is invisible: a website that loads slowly, a logo with grey smudges around the letters, a screenshot where the text has gone soft.

The formats are genuinely different tools. Understanding the one distinction between them makes the choice obvious every time.

The distinction that matters

JPG is lossy. It discards image data permanently in exchange for a much smaller file, using the fact that human eyes barely notice certain kinds of detail loss. It works extremely well on photographs, where colour changes gradually and small errors disappear into the texture.

PNG is lossless. It compresses without discarding anything, so the image you open is pixel-for-pixel the image you saved. That fidelity costs size, and on a photograph it costs a great deal of size.

WebP does both. It has a lossy mode competing with JPG and a lossless mode competing with PNG, and in each case it typically produces a smaller file than the format it is replacing. It also supports transparency in both modes, which JPG cannot do at all.

Where each one belongs

• Photographs: JPG, or WebP where support allows. Gradual colour change is exactly what lossy compression handles well.
• Logos, icons and line art: PNG or lossless WebP. Hard edges and flat colour are where lossy compression visibly fails.
• Screenshots: PNG. They are full of text and sharp boundaries, which JPG smears.
• Anything needing transparency: PNG or WebP. JPG has no transparency, and saving a transparent image as JPG fills the background with solid white.
• Images for a website: WebP where you can, with a JPG or PNG fallback for older software.

The screenshot case is the one people get wrong most often, and it is the easiest to see. Save a screenshot of a text document as JPG, zoom in, and grey halos appear around every letter. Those are compression artefacts, and they are permanent.

The mistake that compounds

Lossy compression is not reversible, and it is not idempotent either. Every time a JPG is opened, edited and saved again, another round of data is discarded. Do that repeatedly and the image visibly degrades, an effect familiar to anyone who has watched a picture pass through several rounds of sharing.

Converting a JPG to PNG does not repair this. PNG will faithfully preserve every artefact the JPG already contains, in a much larger file. The damage happened at the first save and cannot be undone.

The practical rule follows directly: keep a lossless master, edit that, and export a lossy copy each time you need one. Never edit the lossy copy.

Where WebP still causes friction

Every current browser supports WebP, so for websites the compatibility argument is essentially settled. Outside the browser it is less settled. Older desktop software, some printing workflows and a number of document systems still do not accept it, and people frequently cannot open a WebP you email them.

So the sensible default is WebP for anything you serve on a website, and JPG or PNG for anything you send to a person. If someone needs to open, edit or print the file, give them the format their software certainly understands.

A quick decision procedure

1. Does it need transparency? If yes, PNG or WebP, and stop here.
2. Is it a photograph? If yes, JPG for sharing, WebP for a website.
3. Is it text, a screenshot, a logo or line art? If yes, PNG, or lossless WebP for a website.
4. Is the file too large after that? Reduce the pixel dimensions before reducing quality, since most oversized images are simply much bigger than they will ever be displayed.

That last point is worth more than any format choice. An image displayed in a 600 pixel column does not benefit from being 4000 pixels wide, and resizing it costs no visible quality at all. Resize first, then compress, then pick your format.