PNG vs JPEG vs WebP: Which Format to Use

JPEG uses lossy compression tuned for continuous-tone images — photos with smooth gradients and millions of subtle colour shifts. It throws away detail the eye barely notices and can shrink a photo to a fraction of its original size. The trade-off is that it has no transparency and struggles with hard edges and text, where it produces visible "halo" artifacts. For any real-world photograph destined for the web or email, JPEG at 75–85% quality is usually the smallest sensible choice.

Inside a JPEG the picture is first converted from red, green and blue into one brightness channel and two colour channels, and the colour channels are usually stored at half resolution in both directions — the 4:2:0 subsampling that discards half the data before real compression even begins. Each channel is then cut into 8×8 pixel blocks and divided by a quantisation table that decides how much of each level of fine detail survives. That is why JPEG handles skin, sky and foliage beautifully but mangles a one-pixel border: the block edge has nowhere to hide.

PNG is lossless: it stores every pixel exactly, so nothing is ever degraded no matter how many times you save it. That makes it ideal for logos, icons, screenshots, line art and anything with sharp edges or text — and it is the go-to format when you need a transparent background. The catch is size: for a full photograph, a PNG can be five to ten times larger than the equivalent JPEG, because lossless compression simply cannot match lossy on complex imagery.

PNG compresses in two stages. Each row of pixels first goes through one of five filters — None, Sub, Up, Average or Paeth — which replace absolute values with the difference from the pixel to the left or above, turning smooth runs into long stretches of zeros. DEFLATE, the same algorithm behind ZIP, then squeezes that output. On flat graphics most of the work is done by the filtering rather than by DEFLATE itself.

When a PNG comes out too heavy, the usual fix is fewer colours rather than more compression. PNG-8 keeps a palette of at most 256 entries and stores one index per pixel instead of three or four bytes; for a flat logo or a screenshot that is visually identical and typically 60–70% smaller. It only fails on photographs and long gradients, where 256 colours show up as visible banding.

WebP, developed by Google, offers both lossy and lossless modes plus transparency — effectively combining the strengths of JPEG and PNG in one format. In practice a lossy WebP is typically 25–35% smaller than a JPEG of the same visual quality, and a lossless WebP is usually smaller than a PNG. Every current browser supports it, so for new projects WebP is often the best default. Keep a JPEG or PNG fallback only if you must support very old software.

WebP also handles transparency differently from JPEG, which has none at all: its alpha channel is compressed separately and losslessly, so a lossy WebP still carries a clean cut-out edge at photographic file sizes. The one hard limit is that WebP cannot exceed 16383 pixels on either side, so very long panoramas and tall stitched infographics still have to be PNG or JPEG.

Two newer formats sit beyond WebP. AVIF, built on the AV1 video codec, is commonly 20–40% smaller than WebP at matched quality and is strongest at low bitrates and on noisy images; current versions of Chrome, Firefox, Safari and Edge all decode it. The costs are encoding time, often several times slower than WebP, and a tendency to smooth away fine grain and texture when pushed hard.

JPEG XL is technically appealing — it can repackage an existing JPEG losslessly at roughly 20% smaller and turn it back byte for byte — but browser support is still partial, so it is not a format to publish as your only copy. In practice, keep WebP as your baseline and add AVIF as an extra source for browsers that accept it.

You do not have to pick one winner for the whole site. The picture element lets you list several sources, and the browser takes the first type it understands — AVIF, then WebP, then an ordinary image tag with a JPEG or PNG as the final fallback. Nothing is downloaded twice, because the choice is made before any request goes out.

A simple rule to fall back on: photographs → JPEG or WebP; logos, diagrams, screenshots and anything with transparency → PNG or lossless WebP; when in doubt and targeting modern browsers → WebP. Override it when the file will leave the browser — an email attachment, a document, a print job — where JPEG and PNG remain the safest things to send.