JPEG vs PNG vs WebP vs AVIF vs JXL
Five formats, five different trade-offs. This guide explains how each one actually compresses, where it falls apart, and how to pick without guesswork.
The one-line version
Use JPEG for photographs where maximum compatibility matters, WebP as the safe modern default, AVIF when you want the smallest possible file, and PNG whenever the image has sharp edges, text or transparency. Use JXL when you want a modern archive-grade format and control the software that opens it.
How each format compresses
JPEG — the universal workhorse
JPEG has been the default photographic format since 1992, and it is still the one every tool, browser and printer understands. It is lossy: it splits the image into blocks, transforms them into frequency data, then throws away the high-frequency detail your eye is least sensitive to. That is why pushing quality too low produces the characteristic blocky, ringing artefacts around edges.
Strengths: tiny files for photos, universal support, fast to encode and decode. Weaknesses: no transparency, poor on sharp edges and text, and it degrades every time you re-save it. Never re-compress a JPEG repeatedly.
PNG — lossless, and proud of it
PNG stores every pixel exactly. It uses prediction filters plus DEFLATE, so it compresses well when large areas repeat — flat colours, UI, screenshots, diagrams, logos. It also supports full alpha transparency, which JPEG cannot.
Strengths: pixel-perfect output, transparency, ideal for text and line art. Weaknesses: photographs compress terribly — a photo saved as PNG can easily be five to ten times larger than the same photo as JPEG. Note that PNG output is always lossless, which is why it is the safe choice when you cannot afford any quality loss.
WebP — the pragmatic middle
WebP was designed by Google as a drop-in improvement over JPEG and PNG, and it does both jobs: a lossy mode for photographs and a lossless mode for graphics, plus alpha transparency. In practice, lossy WebP usually lands 25–35% smaller than JPEG at comparable quality, and it is now supported by every current browser.
Strengths: good savings with broad support; handles transparency in lossy mode too. Weaknesses: a handful of older or niche tools still cannot open it, and lossless WebP is not always better than optimised PNG.
AVIF — the smallest files
AVIF is built on the AV1 video codec, and it is the most efficient format in wide use today. Compared with JPEG it typically produces much smaller files at the same visual quality — often around half the size — and it also supports transparency, wide colour gamut and HDR.
Strengths: best compression by a clear margin, modern feature set. Weaknesses: encoding is slow (seconds rather than milliseconds per image), and very old browsers cannot display it. For a batch of images this is the format where patience pays off most.
JXL — the modern archival option
JPEG XL (JXL) is designed as a successor to JPEG. It offers both lossy and lossless modes, full alpha transparency, wide colour gamut and HDR, plus progressive decoding. At comparable quality it usually produces smaller files than JPEG, which makes it attractive for archival and for pipelines where you control the decoder.
Strengths: efficient compression in one format that can be lossy or lossless, modern features, no patent licensing. Weaknesses: encoding is slow at higher effort settings, and browser display support is still uneven — Chrome and Firefox do not show JXL files by default, so it is not yet a safe replacement for WebP or AVIF on the open web. tinyimg can encode and decode it, but test your target viewers first.
Side by side
| Format | Compression | Transparency | Best for | Watch out for |
|---|---|---|---|---|
| JPEG | Lossy | No | Photos, maximum compatibility | Artefacts at low quality; degrades on re-save |
| PNG | Lossless | Yes | Screenshots, UI, logos, text | Very large for photographs |
| WebP | Both | Yes | General-purpose modern default | Occasional tool gaps; lossless rarely beats PNG |
| AVIF | Both | Yes | Smallest files, image-heavy sites | Slow to encode; needs a recent browser |
| JXL | Both | Yes | Archives, high-quality photos, controlled pipelines | Slow to encode; uneven browser display |
Choosing by what the image actually is
- A photograph (people, landscapes, products) — AVIF first if you can afford the encode time, otherwise WebP. Fall back to JPEG only when a downstream tool insists on it.
- A screenshot or UI mock — PNG, or lossless WebP. Sharp 1-pixel lines and text are exactly where the lossy formats smear.
- A logo or icon with flat colour — PNG or lossless WebP; consider SVG if it started life as vector art.
- An image needing transparency — PNG, WebP, AVIF or JXL. JPEG simply cannot do it.
- Something already heavily optimised — leave it alone. Re-encoding an optimised file frequently makes it bigger.
The practical answer for the web: export AVIF and WebP, then serve them with a JPEG fallback via <picture>. Newer browsers get the small file, older ones still see the image.
Two rules that matter more than format choice
- Resize before you compress. Serving a 4000-pixel-wide photo in a 800-pixel slot wastes far more bytes than any codec difference can recover. The web performance guide covers sizing budgets.
- Keep your originals. Every lossy save is irreversible. Compress copies, and treat the compressed files as build output rather than as your archive.
Try it on your own files
Because the numbers depend heavily on your particular images, the only reliable benchmark is your own set. tinyimg can compress one batch into several formats at once, so you can compare the sizes side by side — and everything runs locally, so nothing is uploaded while you experiment.