JPG vs PNG vs WebP vs AVIF: which one to use

Four formats cover almost every image on the web: JPG, PNG, WebP and AVIF. They are not interchangeable. Each is good at something and bad at something else, and picking the wrong one is the most common reason an image is bigger than it needs to be.

This guide gives a simple rule first, then the numbers behind it.

The short answer (link to section)

• Photos: JPG for sharing, AVIF or WebP for your own website.
• Screenshots, logos and diagrams: PNG, or lossless WebP if you want it smaller.
• Anything with transparency: PNG, WebP or AVIF. Never JPG.
• Sending to other people or uploading to a form: JPG. It opens everywhere.

How the numbers were measured (link to section)

All sizes below come from one generated test photo, 2400 by 1600 pixels, with soft gradients, texture and film-like grain. Every file was encoded from the same lossless source. I measured each format at the lowest quality setting that reached a target PSNR, a standard measure of how close the result is to the original. That way the formats are compared at similar quality rather than at the same quality number, which means different things in different formats.

Your own photos will give different sizes. Grain makes images harder to compress, so a clean photo will shrink more. Treat the ratios as a guide and test your own file.

Photos (link to section)

At a PSNR of 36 dB, which is a visible but mild loss:

Two things stand out. First, PNG is 20 to 30 times larger than any of the lossy formats, because it keeps every pixel. Second, AVIF was about 22 percent smaller than JPG, while WebP was the same size as JPG on this image.

Raise the target to 40 dB and the gap changes:

At high quality WebP and AVIF pull ahead of JPG by a lot. That is where the newer formats earn their place.

Graphics, screenshots and logos (link to section)

Flat colours and sharp edges behave very differently. This was measured on a 1200 by 800 pixel graphic with transparency:

JPG is small here, but it is the wrong choice. It adds ringing around edges and cannot keep the transparent background. Lossless WebP was the smallest format that kept the image exactly as it was.

Transparency (link to section)

JPG has no transparency. If you convert a transparent PNG to JPG, the clear area becomes a solid colour, usually white or black. PNG, WebP and AVIF all keep it. For logos and cut-out product shots on a website, WebP is usually the best balance of size and support.

Browser and app support (link to section)

PNG and JPG work everywhere. WebP works in every current browser and in most image apps. AVIF works in current Chrome, Edge, Firefox and Safari, but some older apps and phones cannot open it, and some upload forms reject it.

That is why the safe pattern for a website is to offer several formats and let the browser choose:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img
    src="photo.jpg"
    alt="A green hill under a blue sky"
    width="2400"
    height="1600"
  />
</picture>

A browser that understands AVIF takes the first file, one that only knows WebP takes the second, and everything else falls back to the JPG.

A simple way to decide (link to section)

Convert and compare (link to section)

The quickest way to learn which format suits your image is to try. Convert one file to WebP and one to AVIF, then compare the sizes next to the original.

If the format is already right and the file is simply too big, compress the image instead of changing format.