What is WebP?

The difference is architectural. JPEG describes each 8 × 8 block independently using a frequency transform. WebP's lossy mode borrows intra-frame prediction from the VP8 video codec: it predicts each block from the pixels already decoded above and to its left, then stores only the difference between the prediction and reality.

Most of an image is highly predictable from its neighbours, so those differences are small — and small numbers cost few bits. That single change accounts for most of the 25–35% advantage.

It also degrades more gracefully. At low quality WebP tends to blur, where JPEG breaks into visible 8 × 8 squares. WebP at quality 60 is still usable; JPEG at 60 generally is not.

The genuinely useful thing about WebP is that it covers both jobs. Lossy WebP replaces JPEG for photographs. Lossless WebP replaces PNG for screenshots, logos and line art. Both modes support a full alpha channel.

That means a site can standardise on one format for every image rather than deciding per file — and every one of them is smaller than what it replaced.

Do not carry your JPEG number across. WebP holds together better at the low end, so WebP at 75 looks roughly like JPEG at 82 while being noticeably smaller.

Starting from your usual JPEG value produces WebP files larger than they need to be, which is exactly how people conclude — wrongly — that WebP did not help. For photographs, 75 to 80 is the useful range.

Outside the browser. Email clients are unreliable, plenty of desktop applications still refuse it, and print workflows generally do not accept it. Send a stranger a WebP and there is a real chance they will not know what to do with it.

Decode speed. Slightly slower than JPEG, which is measurable on low-powered devices rendering many images at once.

AVIF is smaller. Typically another 20–30% below WebP. If you have a build pipeline that can produce three formats, AVIF first with WebP as the fallback captures more. For most sites, WebP alone captures the majority of the benefit for a fraction of the effort.

If you want the saving without the compatibility question, serve both and let the browser choose:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="1600" height="1067">
</picture>

Browsers that understand WebP take the first source; everything else falls through to the JPEG. One extra line of markup and one extra file.