JPG vs PNG vs WebP vs AVIF: Which Format, and Why

Every guide to image formats gives you the same table of pros and cons, and the table is not wrong, but it does not tell you the thing that makes the choice obvious.

Here it is: each format is built around an assumption about what your image looks like. Match the format to the assumption and the file gets small while looking fine. Mismatch them and you get either a bloated file or visible damage.

The two kinds of compression#

Lossless compression stores the same information more efficiently. Nothing is discarded; decompressing reconstructs the original exactly. It is what a ZIP file does. PNG is lossless.

Lossy compression permanently throws information away — specifically, information the human visual system is bad at noticing. You cannot get it back. This is why lossy formats achieve reductions that lossless formats cannot approach, and why saving a JPEG repeatedly degrades it a little each time.

That single distinction explains most of the confusion people have, including the "my PNG got bigger" problem.

JPEG#

The assumption: this is a photograph. Continuous tone, gradual transitions between colours, no hard edges, no need for transparency.

JPEG has been the web's photographic format since 1992, and its design reflects what was known about human vision at the time. Two mechanisms do the work.

Chroma subsampling. Human eyes have far more receptors for brightness than for colour. JPEG exploits this by storing full-resolution brightness information but reduced-resolution colour information — typically at half resolution in each direction, known as 4:2:0. You lose three-quarters of the colour data and, on a photograph, almost nobody can tell.

Frequency quantisation. The image is divided into 8×8 pixel blocks and each is transformed into frequency components. Fine detail lives in the high-frequency components, and the encoder discards those first, progressively, as the quality setting drops. This is why JPEG artefacts look the way they do — blocky 8×8 patterns and coloured fringes around sharp edges.

Where JPEG shines: photographs, at quality 75–85. Universal support in every browser, email client, printer and piece of software written in the last thirty years.

Where it fails: anything with hard edges. Text in a screenshot picks up visible fringing. Logos develop grey halos. Flat colour areas develop faint blocky mottling. And it cannot do transparency at all.

PNG#

The assumption: this image has flat areas of colour, sharp edges, and possibly transparency. Every pixel matters exactly.

PNG compresses losslessly using DEFLATE — essentially the same algorithm as ZIP — preceded by a filtering step that predicts each pixel from its neighbours and stores only the difference. On an image with large flat areas or repeating patterns, those differences are mostly zero, and zeros compress extremely well.

Where PNG shines: logos, icons, interface screenshots, diagrams, anything with text, and anything needing transparency. PNG's alpha channel supports 256 levels of transparency, which is why it is the format for a logo that has to sit on an unknown background.

Where it fails: photographs. There are no flat areas and no repetition to exploit, so the filtering step finds little to remove and you end up storing something close to the raw pixel data. A photograph saved as PNG is routinely five to ten times larger than the same image as a well-tuned JPEG, with no visible benefit.

This is the answer to "why did my PNG get bigger?" Lossless means the encoder cannot discard anything. If the file was already optimised, re-encoding can only re-derive the same information, sometimes slightly less efficiently. The tool did not fail; the format was wrong for the content.

WebP#

The assumption: either of the above. WebP is two codecs sharing a container.

Developed by Google and derived from the VP8 video codec, WebP has a lossy mode that competes with JPEG and a lossless mode that competes with PNG. It supports transparency in both modes — including lossy-with-alpha, which neither JPEG nor PNG can do — and it supports animation.

Google's own compression study found lossy WebP files were roughly 25–34% smaller than JPEG at equivalent SSIM quality, and lossless WebP around 26% smaller than PNG. Independent results vary with the image and the encoder settings, but the direction is consistent.

Support: every current browser. Chrome, Firefox, Safari, Edge and their mobile equivalents have supported it for years. It is no longer a format that needs a fallback for the open web.

Where it fails: outside the browser. Email clients are inconsistent, older desktop software often cannot open it, and print suppliers will usually reject it. WebP is a web format, and the name is accurate.

One thing to be aware of: lossy WebP applies chroma subsampling in a way that can soften strong red and orange edges more than JPEG does at a comparable setting. If you are working with images where saturated colour meets a hard edge — certain logos, some product photography — compare the two rather than assuming.

AVIF#

The assumption: the same as WebP's, but with a much more capable codec behind it.

AVIF is derived from the AV1 video codec. It typically achieves around 50% smaller files than JPEG at similar quality, supports transparency, animation, wide colour gamut and HDR, and handles very low bitrates far more gracefully than JPEG — where JPEG goes blocky, AVIF goes soft.

Support: all major current browsers, though it arrived later than WebP and support in older versions is patchier. Encoding is significantly slower than WebP, which matters if you are processing images at volume.

Practical position: worth using where you control the pipeline and can serve a fallback. The <picture> element makes this straightforward:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description of the photo" width="1200" height="800">
</picture>

The browser takes the first format it understands. Nothing breaks anywhere.

Side by side#

Rough size comparison#

A 2400×1600 photograph, encoded from the same source:

These are illustrative — actual figures vary substantially with image content, and a photograph of a blue sky compresses very differently from one of foliage. The ratios between formats are what to take away, not the absolute numbers.

How to decide, in practice#

Is it a photograph? WebP, quality 75–82. Add AVIF with a WebP fallback if your pipeline supports it. Use JPEG if the destination is email or print.

Is it a logo, icon or diagram? WebP lossless, or PNG if you need maximum compatibility. If it is a vector shape — a logo, an icon, a chart — the real answer is often SVG, which is resolution-independent and frequently a fraction of the size of any raster format.

Does it need transparency? WebP or PNG. Not JPEG, which has no alpha channel at all — this is why a JPEG "with transparency" always turns up with a white or black background.

Is it a screenshot? If it contains interface text, PNG or lossless WebP. Lossy compression on small text produces the characteristic mush that makes a screenshot hard to read.

Does it animate? WebP or AVIF. Or, better, an actual video file — an MP4 or WebM is usually far smaller than an animated image of the same length.

The mistakes worth avoiding#

Saving photographs as PNG. The most common and most expensive error. Check your export settings.

Saving logos as JPEG. Produces visible fringing around edges, and no transparency.

Re-saving a JPEG repeatedly. Every save discards more information. Keep the original, export a copy.

Converting an existing JPEG to WebP and calling it lossless. It is not; the JPEG already lost data, and lossy WebP loses more. Export from the source where you can.

Ignoring dimensions. Format choice is secondary to size. A 4000-pixel-wide image in a 800-pixel column is wasteful in any format — resize first, then choose a format. That order matters more than which format you pick.

---

Our free image compressor converts between JPEG, PNG and WebP in your browser, with a resize step and a before-and-after size comparison. Nothing is uploaded.

Related reading: how to reduce image size for a website without losing quality, why image optimisation is crucial for Core Web Vitals, and compressing JPEGs for email.