JPEG vs PNG vs WebP vs AVIF

Lossy vs lossless — the only distinction that really matters

Every image format on the web falls into one of two buckets. Lossless formats throw nothing away — what comes out of the decoder is bit-for-bit what went in. Lossy formats deliberately discard detail your eye is bad at noticing in exchange for dramatically smaller files. Pick the wrong one and you either ship a 4 MB screenshot that should have been 80 KB, or a logo that comes back from the encoder full of mushy artifacts.

JPEG — built for photographs

JPEG is from 1992 and still the workhorse of the web. It uses a Discrete Cosine Transform (DCT) on 8×8 pixel blocks, quantises the high-frequency coefficients, and Huffman-encodes the rest. That pipeline is brilliant for continuous-tone photographs — skin, sky, foliage — and terrible for sharp edges, screenshots, or text, where the block boundaries become visible as ringing. JPEG has no alpha channel.

PNG — sharp edges and transparency

PNG (1996) is fully lossless. It applies one of five row filters and then DEFLATE compression. That makes it excellent for screenshots, logos, UI assets, pixel art, and anything with a transparent background. The cost is size — a photograph stored as PNG is typically 5–10× the JPEG equivalent. PNG supports an 8-bit alpha channel, indexed colour, and a palette mode for tiny icon files.

WebP — the pragmatic upgrade

WebP, from Google, ships both modes. Lossy WebP uses the VP8 intra-frame predictor and beats JPEG by roughly 25–35% at the same visual quality. Lossless WebP beats PNG by around 20–25%. It supports alpha in both modes and animation. Browser support is universal in 2026 — every evergreen browser has shipped it for years — and it is the safe default for new web assets unless you specifically need PNG's lossless guarantee for screenshots.

AVIF — the current size champion

AVIF is the still-image profile of the AV1 video codec. The intra-frame compression is roughly a generation ahead of WebP: typical savings are 40–50% versus JPEG at matched quality, sometimes more on flat, gradient-heavy images. It supports 10- and 12-bit colour and HDR, which neither JPEG nor PNG can express.

The trade-off is CPU. AVIF encoding is slow — orders of magnitude slower than JPEG — so it is usually produced once at build time and served from a CDN. Browser decode is widely supported in 2026 across Chrome, Firefox, Safari, and Edge, but very old devices may still need a WebP or JPEG fallback via <picture>.

And HEIC?

HEIC is what iPhones save photos as. It uses HEVC compression and is comparable to AVIF in efficiency, but HEVC's patent situation kept it off the open web. Browsers do not decode it natively, which is why a HEIC from your phone has to be converted before you can use it online.

What to pick

• Photograph for the web — WebP (or AVIF if your toolchain supports it).
• Screenshot, logo, or anything with sharp edges and transparency — PNG, or lossless WebP.
• Legacy compatibility with email clients and Office documents — JPEG.

You can compress, resize, or convert PNG to JPG directly in your browser with Toolkiya — the file never leaves your device.