Skip to content
WebAuditOS
Start free audit

Test your website now

Free, no card. We read only public pages.

Run free audit →

Performance

What is a WebP file, and should your website use it?

WebP is an image format that is usually much smaller than JPEG or PNG at similar quality. How it compares with AVIF, browser support, and how to switch safely.

WebP is an image format developed by Google that supports lossy and lossless compression, transparency and animation. Google's comparisons found WebP files 25 to 34 percent smaller than comparable JPEGs and about 26 percent smaller than PNGs. Every current major browser supports it, so most websites should serve WebP or AVIF instead of JPEG and PNG.

Published · Last updated

By Michal Měřínský. Audit methodology.

What WebP is

WebP is an image file format from Google. It can replace JPEG for photos, PNG for graphics with transparency and GIF for animations, usually with smaller files. A .webp file opens in every modern browser and most image editors and operating systems.

How much smaller is it?

Google's own comparisons found lossy WebP 25 to 34 percent smaller than JPEG at equivalent quality, and lossless WebP about 26 percent smaller than PNG. Real savings depend on the image and the settings, so test with your own images. On image-heavy pages that difference shows up directly in loading time, especially on mobile.

WebP or AVIF?

AVIF is a newer format that often compresses better than WebP, particularly for photos, but encodes more slowly and is a little less widely supported in older software. A common approach is to offer AVIF first and WebP as the fallback:

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

Browsers pick the first format they support, and the img tag still works for anything else.

How to switch

  • Use your framework or host's image pipeline if it has one. Many convert and resize automatically.
  • Otherwise convert at build time, keeping the originals:
cwebp -q 80 hero.jpg -o hero.webp
  • Serve each image at the size it is displayed, with srcset for different screens. Format alone does not fix an image twice as wide as it needs to be.
  • Check the result by eye. Very low quality settings can blur text and edges.

Converting a 4000 pixel wide photo to WebP and displaying it at 800 pixels still wastes most of the bytes. Resize first, then convert.

Does it work everywhere?

Support is no longer a concern for websites. Chrome, Edge, Firefox and Safari all display WebP, Safari since version 14 on macOS Big Sur and iOS 14. The picture element with a JPEG fallback covers the small share of very old browsers and apps that still exist, at no cost to everyone else.

When not to use it

  • Logos and icons that are simple shapes are often better as SVG.
  • Images people download and edit, such as press kits, may be better in a widely editable format.
  • Email clients have patchy support, so email images are usually safer as JPEG or PNG.

What a scan can and cannot tell you

WebAuditOS uses image-URL format hints in served HTML, checks responsive markup when at least three eligible images are present, and measures Largest Contentful Paint, which large images often slow down.

It does not measure how much each image could shrink, or judge the visual quality of your compression.

The biggest image on a page is usually the LCP element. Convert and resize that one first.

Short answers

Is WebP supported everywhere? In all current major browsers, yes.

Does WebP lose quality? Lossy WebP does, like JPEG. Lossless WebP does not.

Is WebP good for SEO? Indirectly. Faster images help loading speed and Core Web Vitals.

How do I open a WebP file? Any current browser, and most image viewers and editors.

In the product

The checks this maps to

Every check named here runs on every scan, on every plan - what a plan changes is how many pages are crawled, how long the history is kept and what you can do with the result. These are the ids the findings carry, so you can match a line in a report to the explanation above.

Performance

How do you compress images for a website without losing quality?

How to make website images smaller without visible quality loss: resizing, formats, quality settings, responsive images and lazy loading, in order.

Performance

How do you speed up a website?

The changes that make the biggest difference to load time, in the order to try them: server response, images, JavaScript, fonts, caching and third parties.