What Is WebP — Should Your Site Switch to It
Downloaded an image and it's some mysterious ".webp" your favorite editor won't open? Or the other way around — you're optimizing a site and every guide chants "convert your images to WebP"? Let's unpack what the format is, why it took over the web, how much lighter than PNG and JPG it really is — and when chasing it isn't worth it.
WebP is an image format by Google (2010) built specifically for the web. It does everything at once: lossy compression (like JPG), lossless (like PNG), transparency and animation (like GIF). Files are on average 25–35% lighter than JPG and ~26% lighter than PNG at the same visible quality. Supported by every modern browser. Not for: print, vector logos (that's SVG territory) or as a master format.
Where WebP came from
By the late 2000s the web ran on three veteran formats: JPG (1992) for photos, PNG (1996) for graphics with transparency, GIF (1987) for animation. Each solved one problem and dragged along the limitations of its era. In 2010 Google introduced WebP — a format based on the VP8 video codec, designed with a single goal: shrink web traffic. The logic is simple: images are the heaviest part of pages, and both Google Search and Chrome benefit from a faster web.
What WebP can do
The format's headline feature: it merges the abilities of all three veterans:
| Capability | JPG | PNG | GIF | WebP |
|---|---|---|---|---|
| Lossy compression | ✅ | ⛔ | ⛔ | ✅ |
| Lossless compression | ⛔ | ✅ | ⛔ | ✅ |
| Transparency | ⛔ | ✅ | partial | ✅ |
| Animation | ⛔ | ⛔ | ✅ | ✅ |
In practice: a photo compresses smaller than JPG with no visible difference; a transparent logo weighs less than PNG; animation is several times lighter than GIF. The underlying difference between compression approaches is covered in PNG vs JPG.
How much WebP actually saves
Google's official numbers: lossy WebP is 25–34% smaller than comparable JPG, lossless is ~26% smaller than PNG. Our own experience agrees: the PNG logo previews in the Trace Logos catalog are served as WebP and weigh on average 95–98% less than the originals — though resizing to card‑grid dimensions does part of that work.
WebP wins biggest on photographic imagery with transparency — the stuff that previously had to be saved as heavy PNG-24 because JPG can't do alpha. Those files shrink severalfold. On tiny simple images (16×16 icons) the difference is barely visible.
Support: is it safe yet
Yes. Since 2020 WebP is supported by every current browser: Chrome, Safari (since macOS Big Sur / iOS 14), Firefox, Edge, Opera and Yandex Browser. Remaining friction lives outside browsers:
- Older editors and viewers may not open WebP (fix: update or convert).
- Some social networks and messengers convert WebP on upload or reject it.
- Print shops want TIFF/PDF/PNG; WebP isn't a print format.
If a file won't open — convert it back: any online converter, macOS Preview ("Export As…"), or pasting into Figma and exporting PNG takes a minute.
How to convert images to WebP
- Online: Squoosh (a Google project with a before/after slider), Convertio and dozens of others.
- Command line: the official tool —
cwebp input.png -q 80 -o output.webp; quality 75–85 covers most cases. - Automatically on your site: bundlers and CDNs (Vercel, Cloudflare, ImageKit) convert on the fly and serve each browser the best format it supports — the right path for large sites.
- Editor export: Photoshop (since 23.2) and Figma export WebP directly.
In HTML the classic gradual‑adoption pattern is the <picture> tag: the browser picks WebP, older clients get the PNG fallback. More on embedding graphics: how to embed SVG on a website.
When you don't need WebP
- Vector logos and icons. WebP is raster. A logo in it blurs when scaled; the right choice is SVG (see SVG vs PNG for logos).
- Masters. Keep originals in PNG/TIFF or vector and generate WebP as a derived delivery format. Re‑compressing lossy over lossy degrades the image.
- Print. Print shops don't take WebP.
- When you already use AVIF. The newer AVIF compresses another 20–30% beyond WebP but encodes slower. For maximum optimization the modern stack is AVIF + WebP fallback; for simplicity — just WebP.
How we do it
The Trace Logos catalog uses exactly this scheme: logo masters live as SVG and full‑size PNG, while lightweight WebP previews are generated automatically for the card grid. Browsing the catalog you load megabytes instead of tens of megabytes — and when you download a logo you get the full master in the format you need.