Which image format should you use?

JPEG, WebP, AVIF, JPEG XL and PNG, measured on the same two images. AVIF wins on photographs and loses on flat graphics, and neither result matters as much as the thing most people skip.

The short answer

Don't pick one. Produce several and let the browser take the one it can read. Modern HTML has a tag for exactly this, and it costs you nothing at page-load time — every browser downloads one image, just not the same one.

And resize before you agonise over formats. The numbers below show why: on our test photograph, resizing did 96% of the work and the best format choice added 2%.

What we measured

Two source images, run through the same optimizer at two widths each, with no manual tuning. A 3,033,804-byte photograph (4032 × 3024, a normal phone camera original), and a 19,536-byte flat graphic with transparency (a 512 × 512 app icon). Sizes are the bytes actually delivered over the wire. You can reproduce any row by running the same image through the tool.

A photograph

Format	At 1280px	vs JPEG	At 360px	vs JPEG
AVIF	47.4 KB	−56%	8.4 KB	−45%
JPEG XL	55.3 KB	−49%	10.2 KB	−34%
WebP	62.5 KB	−42%	11.7 KB	−24%
JPEG	108.0 KB	—	15.4 KB	—
PNG	468.5 KB	+334%	46.2 KB	+199%

This is the result everyone expects: AVIF is comfortably the smallest, JPEG XL close behind, WebP a solid improvement on JPEG, and PNG catastrophically wrong for a photograph. PNG is lossless, so it faithfully preserves every bit of sensor noise in the sky. That is the opposite of what you want here.

A flat graphic with transparency

Format	At 512px	vs JPEG	At 192px	vs JPEG
WebP	3.6 KB	−60%	1.6 KB	−52%
AVIF	5.4 KB	−40%	2.6 KB	−24%
JPEG XL	6.2 KB	−32%	3.0 KB	−13%
JPEG	9.0 KB	—	3.4 KB	—
PNG	9.6 KB	+7%	4.6 KB	+32%

The order changed. On the graphic, WebP is the smallest and AVIF is 52% bigger than WebP — the reverse of the photograph. "Just use AVIF" is common advice and it is wrong for logos, icons, screenshots, charts and anything with large areas of flat colour and hard edges.

Note also that the JPEG column is a trap here. JPEG cannot store transparency at all, so those two numbers are for an image that has silently gained a background. It is smaller than PNG and useless for the job.

The part almost everyone skips

Our photograph started at 3,033,804 bytes. Delivered as a 1280px JPEG it was 107,951 bytes.

Resizing saved 96.4%. Switching that JPEG to AVIF saved a further 2.0%.

Both are worth having, and the second one is nearly free once you are re-encoding anyway. But if you are choosing where to spend attention, the format debate is the small half. A 4032px photograph displayed in a 700px column is carrying about thirty times more pixels than the screen can use, and no codec rescues that.

The same applies to phones. Sending a desktop-sized image to a 360px screen wastes most of the bytes before the format has any say.

So which one, then?

Photographs — AVIF first, JPEG XL or WebP next, JPEG as the fallback.
Logos, icons, screenshots, anything flat — WebP first. Keep PNG if you need guaranteed lossless or very wide compatibility.
Transparency — WebP, AVIF, JPEG XL or PNG. Never JPEG.
Email attachments and messaging — JPEG, resized. Universal beats clever when you have no idea what will open it.

Let the browser choose

You do not have to guess which format a visitor's browser reads. Offer several and it will take the first one it understands:

<picture>
  <source type="image/avif" srcset="photo_small.avif 360w, photo_large.avif 1280w">
  <source type="image/webp" srcset="photo_small.webp 360w, photo_large.webp 1280w">
  <img src="photo_large.jpeg" srcset="photo_small.jpeg 360w, photo_large.jpeg 1280w"
       sizes="100vw" loading="lazy" decoding="async">
</picture>

Each browser downloads exactly one file. Old browsers get the JPEG and never know the rest existed. The srcset widths do the other half of the job, letting a phone take the 360px version instead of the 1280px one.

Try it on your own image

The optimizer produces this whole set from one upload — every format above, at two widths, plus the <picture> tag ready to paste. It also strips EXIF metadata by default, so location and camera details do not travel with your photograph.

Optimize an image