Short answer: JPEG or WebP for photographs, PNG or WebP for screenshots, diagrams and anything with flat colour, and WebP or PNG when you need transparency. SVG for icons and logos. If you only want to remember one rule: WebP is never the wrong answer on the web.
There are dozens of image formats. Three of them cover essentially every image on the web, and picking between them takes about two seconds once you know what each is optimised for.
The two-second decision
- Is it a photo, or something with smooth continuous tone? → JPEG, or WebP.
- Is it a screenshot, diagram, chart, logo or anything with flat colour and hard edges? → PNG, or WebP.
- Does it need transparency? → PNG or WebP. JPEG cannot do it.
- Is it a vector shape — an icon, a wordmark, a simple illustration? → Neither. Use SVG.
The reasoning behind the first two rules is worth understanding, because it explains most surprising compression results.
Lossy versus lossless, in one paragraph
JPEG is lossy: it discards information permanently, and it is designed to discard the information the human eye is least likely to notice. It divides the image into blocks and spends most of its bits on the low-frequency pattern — the broad shapes and shading — while throwing away fine detail. On a photograph this is an excellent trade, because photographs are full of fine detail that nobody misses.
PNG is lossless: what you put in is what comes out, byte for byte. It squeezes the file by finding repeated patterns rather than by throwing anything away. On a screenshot, which is mostly large areas of identical colour, this works extremely well. On a photograph it does almost nothing, because photographic noise never repeats.
Why a screenshot makes a terrible JPEG
This is the single most common format mistake, and it produces a distinctive result.
Text is fine detail at high contrast — the exact thing JPEG is designed to discard. Save a screenshot containing text as a JPEG and the letters develop fuzzy halos, coloured fringing appears around black-on-white edges, and small text becomes mushy. Push the quality down to compensate for the size and it becomes genuinely hard to read.
Meanwhile PNG stores the same screenshot comfortably, because a page of text is mostly identical white pixels, which compress to almost nothing. It is not unusual for a screenshot to be smaller as a PNG than as a high-quality JPEG, while being pixel-perfect rather than visibly degraded.
The reverse mistake is just as common: a photograph saved as PNG. It will be exact, and it will be three to ten times larger than the JPEG equivalent, because the format has no way to exploit the redundancy that is not there.
What WebP changes
WebP is the format that makes both decisions easier, because it covers the whole range.
- It has a lossy mode that beats JPEG — typically 25 to 35% smaller at equivalent perceived quality.
- It has a lossless mode that beats PNG — typically 20 to 30% smaller.
- It supports transparency in both modes, which JPEG cannot do at all.
- It supports animation, as a smaller replacement for GIF.
Browser support is now universal across Chrome, Firefox, Safari and Edge, including the Safari versions that shipped years ago. The old objection — "WebP is not supported everywhere" — has been out of date for a while.
So why does JPEG still exist? Mostly for destinations outside a web browser: print pipelines, older desktop
software, embedded systems, and anything that expects a filename ending in .jpg. That is a real set
of cases, but it is not the same set as "an image on a website".
A comparison table that is actually useful
| JPEG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy only | Lossless only | Both |
| Transparency | No | Yes | Yes |
| Animation | No | No | Yes |
| Best for | Photographs | Screenshots, flat graphics | Both |
| Typical size vs JPEG on a photo | Baseline | 3–10× larger | 25–35% smaller |
| Typical size vs PNG on a screenshot | Comparable, but degraded | Baseline | 20–30% smaller |
| Compatibility | Everywhere, including print and desktop apps | Everywhere | All modern browsers and most desktop apps |
What actually happens when you convert
A conversion is not free, and it is worth knowing which direction costs you something.
JPEG → PNG is safe but pointless. The PNG is an exact copy, including every JPEG artefact that was baked in. The file gets much larger and gains nothing except transparency support, which the original did not have anyway.
PNG → JPEG loses information permanently. The hard edges of text and lines get softened by the lossy step, and it cannot be recovered. If you convert back to PNG afterwards, you get a large file that still has the JPEG artefacts in it.
Either → WebP in lossless mode is safe. The result is exactly equivalent to the input, just stored more compactly. This is the conversion with no downside.
Either → WebP in lossy mode is a normal lossy step. Treat it like saving as JPEG: fine from an original, wasteful and degrading if repeated.
A practical default
If you would rather not think about it: use WebP for everything, in lossless mode for screenshots and
graphics, in lossy mode at quality 80 for photographs. Convert to JPEG only when something specifically
requires a .jpg.
The image converter does these conversions in the browser, in batches, without uploading anything — which matters when the image is a client deliverable, an unreleased design, or a scan of a document. If you are working on file size rather than format, the compressor will get you further, and resizing further still.