What is WebP and why does it make pages lighter?

If you've ever searched for site speed advice, you've met "convert your images to WebP". What is WebP, and is it worth it?

What is WebP?

WebP is an image format Google introduced for the web. It's a multi-purpose format: lossy compression (like JPEG), lossless (like PNG), transparency (alpha channel) and animation (like GIF) — all in one format.

A short comparison

Feature	JPEG	PNG	WebP
Good for photos	Yes	Heavy	Yes
Transparency	No	Yes	Yes
Animation	No	No	Yes
Size at similar quality	Medium	Large (for photos)	Usually smaller
Compatibility	Everywhere	Everywhere	Modern browsers

The exact savings depend on the image; a fixed percentage claim for all images isn't honest. Practical rule: for photos, WebP usually beats JPEG; for transparent graphics, it usually beats PNG — but measure the actual file size for each case.

Where to use WebP

• Photos inside sites and blogs.
• Banners and hero images.
• Transparent graphics instead of heavy PNGs.

Where not to

• Simple logos and icons: SVG is better.
• Files you'll print or edit professionally: keep the original JPEG/PNG/TIFF.
• Where the destination app can't open WebP (some older software); export JPEG or PNG instead.

How to convert

• With an upload-free online tool, like the image tool;
• With the command-line tool cwebp;
• With libraries like Pillow in Python or sharp in Node.

A Pillow example:

from PIL import Image
Image.open("photo.jpg").convert("RGB").save("photo.webp", "WEBP", quality=80)

Fallback for very old browsers

If you must cover ancient browsers, use the <picture> element with a JPEG fallback:

<picture>
  <source srcset="a.webp" type="image/webp">
  <img src="a.jpg" alt="Describe the image">
</picture>

For the full optimization workflow, see compressing images for the web.

Common questions

Does WebP ruin quality? Lossy mode drops some information, like JPEG; at sensible quality it's usually indistinguishable. Lossless mode keeps every pixel.

Can WebP do animation? Yes — this site's hero lettermark is an animated WebP loop, replacing what used to need a video or Lottie.