Three formats cover essentially all raster images on the web. They compress in fundamentally different ways, which is why using the wrong one can triple your file size.
How each one works
JPEG is lossy and built for photographs. It converts to a colour space where brightness and colour are separate, throws away colour detail your eye barely registers, then compresses what remains. It has no transparency and no lossless mode.
PNG is lossless. It predicts each pixel from its neighbours and compresses the differences. Brilliant for flat colour and sharp edges, terrible for photographs - where every pixel differs from its neighbour and there is nothing to predict.
WebP does both. Lossy WebP uses prediction techniques borrowed from video compression; lossless WebP generally beats PNG by around 25%. It supports transparency in both modes, which JPEG cannot do at all.
The size difference in practice
For a typical 1200×630 photograph at visually equivalent quality:
| Format | Typical size |
|---|---|
| PNG | 900KB–1.5MB |
| JPEG at 80% | 90–150KB |
| WebP at 80% | 60–110KB |
| AVIF at 80% | 45–85KB |
For a flat-colour logo with transparency:
| Format | Typical size |
|---|---|
| PNG | 15–40KB |
| WebP lossless | 10–30KB |
| JPEG | impossible - no transparency |
| SVG | 1–4KB, and infinitely scalable |
The decision rule
- Vector artwork - logos, icons, diagrams: SVG. Not a raster format at all.
- Photographs: WebP, quality 80.
- Screenshots containing text: WebP lossless, or PNG. Lossy compression makes text edges mushy.
- Anything needing transparency: WebP. PNG if you must support a very old client.
- Animation: WebP or a video file. Never GIF - an animated GIF is routinely 10× the size of an equivalent MP4.
Browser support, honestly
WebP is supported in every current browser, including Safari since version 14 in 2020. The compatibility argument against it expired years ago.
If you genuinely need to cover ancient clients, <picture> handles it in five lines:
<picture>
<source srcset="/photo.webp" type="image/webp" />
<img src="/photo.jpg" alt="..." width="1200" height="630" />
</picture>
The browser picks the first source it understands. Old clients silently get the JPEG.
Two things people get wrong
Converting a PNG screenshot to lossy WebP. Text edges become fuzzy. Use lossless WebP for anything with type in it.
Re-encoding an already-lossy image. Converting a JPEG to WebP re-encodes lossy data that has already been through one lossy pass, so artefacts compound. Convert from the original whenever you still have it.
The single biggest win is usually not the format at all - it is dimensions. A correctly-sized JPEG beats an oversized WebP every time. Resize first, then convert.
Launch it where the numbers are checked
RankCert ranks products on domain control we verify ourselves. Listing is free and the link stays dofollow whether or not you display the badge.