JPEG vs PNG vs WebP: which image format should you use?

Picking an image format is one of those decisions that looks trivial and quietly costs you either quality or bandwidth for years. The three formats you will actually choose between on the web are JPEG, PNG and WebP, and the right answer depends almost entirely on one question: what kind of image is it?

How JPEG compression works (and why it blurs text)

JPEG is a lossy format built around the discrete cosine transform (DCT). The encoder splits the image into 8×8 pixel blocks and converts each block from pixel values into frequency coefficients — a description of how quickly brightness and colour change across the block. Smooth gradients become a few low-frequency numbers; fine detail becomes many high-frequency ones.

The compression trick is quantisation: the encoder divides those coefficients by a quality-dependent table and rounds the results. High-frequency detail gets divided by larger numbers, so much of it rounds to zero and is discarded. Human vision is far less sensitive to fine detail in colour than in brightness, so JPEG also stores colour at reduced resolution (typically 4:2:0 chroma subsampling — one colour sample per 2×2 block of pixels).

This is why JPEG is superb for photographs, which are full of soft gradients and natural texture, and terrible for screenshots and diagrams. A hard black-to-white edge — text on a background — needs exactly those high-frequency coefficients JPEG throws away, so you get the familiar smudgy ringing halo around letters.

One more consequence: generation loss. Every time you open a JPEG, edit it and save it as JPEG again, the encoder re-quantises and discards more information. After a handful of save cycles, visible artefacts accumulate that no quality setting can undo. Keep an original (or work in PNG) and export to JPEG once, at the end.

How PNG works

PNG is lossless. It filters each row of pixels (predicting each pixel from its neighbours and storing only the difference) and then compresses the result with DEFLATE — the same algorithm as ZIP. Decode a PNG and you get back the exact pixels that went in, every time, no matter how many times it is re-saved.

That makes PNG the natural home for:

• Screenshots and UI captures — flat colour regions and sharp text compress extremely well losslessly, and stay pin-sharp.
• Logos, icons and diagrams — few colours, hard edges.
• Anything needing transparency — PNG supports a full 8-bit alpha channel, so pixels can be anywhere from fully opaque to fully transparent. Baseline JPEG has no transparency at all.

The cost shows up with photographs. Natural images have almost no repeating patterns for DEFLATE to exploit, so a photo saved as PNG is routinely 5–10× larger than the same photo as a reasonable-quality JPEG, with no visible benefit.

Where WebP fits

WebP, released by Google in 2010, is really two formats in one container:

• Lossy WebP uses intra-frame prediction techniques borrowed from the VP8 video codec — it predicts each block from already-decoded neighbours and encodes only the residual. In practice it produces files roughly 25–35% smaller than JPEG at comparable visual quality.
• Lossless WebP typically beats PNG by around 20–25% on the same images.

Crucially, both modes support full alpha transparency. A photographic image with a transparent background — a product cut-out, say — is the case where WebP wins by a landslide: as PNG it might be 800 KB, as lossy WebP with alpha it can be under 100 KB.

Browser support stopped being an argument years ago: every current browser (Chrome, Firefox, Safari since 14, Edge) decodes WebP. The remaining friction is outside the browser — some older desktop software, email clients and CMS pipelines still choke on it, and people you send a .webp file to may not know what to do with it. That is a workflow question, not a technical one.

Typical size differences

Rules of thumb for a 1920×1080 image, assuming sensible quality settings:

Content	JPEG (q≈80)	PNG	Lossy WebP
Photograph	~200–400 KB	2–4 MB	~150–300 KB
Screenshot with text	~150 KB, smudged text	~200–500 KB, sharp	~100 KB, sharp at high quality
Flat-colour logo	poor fit	tiny (often <50 KB)	tiny, slightly smaller

Two caveats. First, resolution dominates everything: halving both dimensions quarters the pixel count, which usually saves far more than fiddling with quality sliders. Resize first, then compress. Second, quality settings are not comparable across formats — JPEG q80 and WebP q80 are different scales.

Decision table

You have…	Use	Why
A photo for a website	WebP (or JPEG as fallback)	Smallest at photographic quality
A photo to email or archive	JPEG	Universal, opens everywhere
A screenshot	PNG (or lossless WebP)	Text stays sharp
A logo or icon with transparency	PNG or WebP	Alpha channel; SVG is better still if it is vector art
A photo needing transparency	WebP	Only sane option; PNG works but is huge
An image you will keep editing	PNG	Lossless — no generation loss

The short version

JPEG for photos going anywhere and everywhere; PNG for screenshots, graphics and anything mid-edit; WebP when you control the destination (your own website) and want the smallest files, or when you need transparency on a photographic image. And whatever you export for other people, keep a lossless original — the pixels you throw away with a lossy save are gone for good.