Image

What Is WebP and Why Do Websites Use It?

Published March 3, 2026 · Updated March 15, 2026 · 4 min read

WebP is an image format developed by Google and released in 2010. It was designed to replace both JPG and PNG on the web with a single format that compresses better, supports transparency, and loads faster. Most websites you visit today are already serving WebP images without you noticing.

How WebP compression works

WebP uses two compression modes. Lossy mode is based on the VP8 video codec's key frame encoding — a more sophisticated approach than JPG's discrete cosine transform. For photographs and complex images, it typically achieves 25–35% smaller file sizes than JPG at the same visual quality.

Lossless mode uses a combination of techniques borrowed from PNG and other lossless compressors. For graphics with flat colours and sharp edges, it typically achieves 25% smaller files than PNG at identical quality.

WebP also supports animation (replacing GIF with much smaller files) and alpha channel transparency in both lossy and lossless modes — something JPG cannot do at all.

Why websites switched to WebP

The business case is straightforward: smaller images load faster, and faster pages rank better in Google search, convert better, and have lower hosting costs. A site with 50 product images might save 20–30% of its image payload by switching to WebP — which can represent several megabytes on a single page.

Google's PageSpeed Insights and Core Web Vitals both flag "serve images in next-gen formats" as a performance recommendation, which pushed many developers to adopt WebP. CDNs like Cloudflare, Cloudinary, and Imgix can serve WebP automatically to browsers that support it.

Browser compatibility

WebP is now supported by all major browsers — Chrome, Firefox, Safari (since 2020), and Edge. The one meaningful gap is very old browsers, particularly Safari versions before 14, which still have a non-trivial presence among iPhone users who haven't updated their iOS.

The standard solution is the HTML <picture> element, which lets you specify WebP as the preferred source with a PNG or JPG fallback:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo">
</picture>

Content negotiation: servers can also deliver WebP automatically using the Accept header. When a browser supports WebP, it includes image/webp in its Accept header. A server or CDN can detect this and serve .webp files to compatible browsers while serving .jpg to others — no HTML changes needed.

When WebP isn't the right choice

WebP is a delivery format. It's not great for editing, because most image editors don't support it natively (Photoshop added support in 2021; many others still don't). Keep source files as PNG or TIFF and export as WebP.

Some upload forms and email clients still don't accept WebP. If an image needs to go to an external system — a product listing marketplace, an email campaign, a client's system — check what formats it accepts before converting to WebP.