WebP image format

What is the WebP image format?

WebP is an image format developed by Google that compresses photos and graphics to significantly smaller file sizes than JPEG or PNG while keeping comparable visual quality. A typical WebP file is 25 to 35 percent smaller than an equivalent JPEG and even more compact than PNG for graphics with flat colors or transparency. Because image weight is usually the largest contributor to a page's total download size, switching to WebP is one of the most direct ways to speed up a site without changing its design or content.

WebP was released in 2010 and has since become one of the recommended formats in Google's own PageSpeed Insights and Lighthouse audits, which flag legacy JPEG and PNG images as an opportunity to save bytes. It is now supported natively by every major browser, which removed the main barrier that kept adoption low for years after its release.

‍

How WebP compression works

WebP uses prediction-based compression borrowed from video codecs: it predicts a block of pixels from neighboring blocks already decoded, then only encodes the difference, which is far more efficient than compressing each block independently as older formats do. The format supports both lossy compression, which discards some visual detail for a smaller file, and lossless compression, which preserves every pixel exactly while still shrinking the file compared to PNG.

Serving WebP with a JPEG or PNG fallback for older browsers uses the picture element:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image" width="1200" height="630">
</picture>

The browser downloads the WebP source when it supports the format, and silently falls back to the JPEG in the img tag otherwise, with no JavaScript required.

‍

Types and variants

• Lossy WebP: comparable to JPEG, discards imperceptible detail for maximum compression, best for photos.
• Lossless WebP: comparable to PNG, keeps every pixel exact, best for logos, screenshots, and graphics with sharp edges.
• WebP with transparency: supports an alpha channel like PNG, at a fraction of the file size.
• Animated WebP: a direct replacement for animated GIF, with far smaller files for the same frame sequence.

‍

WebP vs JPEG vs PNG

‍

Best practices and common pitfalls

• Always provide a fallback with the picture element rather than serving WebP as the only source, to protect any visitor on an outdated browser.
• Set explicit width and height attributes so the browser reserves layout space and avoids shifts while images load.
• Use lossy WebP for photos and lossless WebP for logos or UI graphics; applying the wrong mode wastes either quality or file size.
• Re-export existing JPEG and PNG assets rather than only using WebP for new images, since legacy images are usually the largest untapped savings on an older site.
• Do not assume a CMS or hosting platform converts images to WebP automatically; verify with an image audit tool that files are actually served in the format.

‍

Impact on performance and SEO

Image weight is one of the biggest levers for Core Web Vitals, particularly Largest Contentful Paint, since large hero images are frequently the single heaviest resource on a page. Switching JPEG and PNG assets to WebP typically cuts total image weight by a quarter to a third with no visible quality loss, which shows up directly in PageSpeed Insights and Lighthouse scores. Faster loading pages also tend to have lower bounce rates and better crawl efficiency, since search engine bots can process more pages within the same crawl budget when each page is lighter.

‍

WebP at BeBranded

We convert and serve images in WebP by default on the sites we build, paired with lazy loading and a CDN to keep page weight and load times as low as possible. Every project is audited against Core Web Vitals thresholds before launch, and image format is one of the first levers we check. See our website service for how we handle performance across the sites we design and build.