What Is WebP? WebP vs PNG vs JPG and When to Use It
WebP is an image format developed by Google and announced in 2010. A WebP file (.webp) stores a picture with either lossy compression, based on the VP8 video codec, or lossless compression, and both modes support alpha transparency and animation. Its purpose is simple: smaller files than JPG, PNG or GIF at similar visual quality.
Try it free: Image to WebP Free to use, no account needed.
That makes WebP the default choice for many websites, and it's why you now see .webp files when you save images from the web. This guide explains what is a WebP file, how WebP vs PNG and WebP vs JPG really compare, where WebP is the wrong choice, and how to open and convert it. To turn a PNG or JPG into WebP right now, use the free image to WebP converter, which runs in your browser.
What is WebP? How the format works
A WebP file is a small container (based on RIFF, the same structure WAV audio files use) that holds one of two kinds of image data:
- Lossy WebP compresses the image like a single frame of VP8 video. It predicts each block of pixels from its neighbours and stores only the difference, which is where the savings over JPG come from. It works in 8-bit Y'CbCr 4:2:0, so colour detail is stored at half resolution, as in most JPGs.
- Lossless WebP is a separate codec that reproduces every pixel exactly, like PNG, but with better compression tools.
Both modes can carry an alpha channel for transparency, and a WebP file can contain several frames with timing, which makes it an animated WebP, a smaller replacement for animated GIFs. A WebP image can be up to 16,383 × 16,383 pixels.
WebP is also documented outside Google: RFC 9649, published by the IETF in November 2024, describes the format and registers the image/webp media type that servers send in the Content-Type header.
How much smaller are WebP files?
Google's WebP documentation gives these figures from its own tests:
- WebP lossless images are 26% smaller than PNGs.
- WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM, a measure of how similar an image looks to the original.
- Lossless transparency costs about 22% additional bytes, while lossy WebP with transparency typically gives files 3× smaller than PNG.
These are averages, not guarantees. Applied to real numbers, a 200 KB PNG screenshot would be about 148 KB as lossless WebP (200 × 0.74), and a 500 KB JPEG photo would land between about 330 KB and 375 KB as lossy WebP. For a page with ten 300 KB photos (3,000 KB in total), the same range means 1,980–2,250 KB, a saving of 750–1,020 KB on every uncached visit.
Individual files can do better or worse. A JPEG that was already compressed hard can even get bigger when you re-encode it, so always compare the output size with the original.
WebP vs PNG vs JPG vs AVIF
| JPG | PNG | WebP | AVIF | |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossy and lossless | Lossy and lossless |
| Transparency | No | Yes | Yes | Yes |
| Animation | No | Only as APNG | Yes | Yes |
| Bit depth | 8-bit | Up to 16-bit | 8-bit | 8, 10 or 12-bit |
| Browser support | Universal | Universal | All current browsers (Safari 14+) | Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+ |
| Best for | Photos that must open anywhere, print, email | Screenshots, logos, editing masters | Web photos and graphics, transparent or animated | Web images, with a WebP or JPG fallback |
WebP vs PNG
Is WebP better than PNG? For a website, usually yes. Lossless WebP keeps every pixel of a PNG and, by Google's figure, averages 26% smaller, while lossy WebP with alpha can shrink transparent product photos much further. PNG still wins in three places: it opens in every program ever made, it supports 16-bit colour for high-precision editing, and it stays the safer format for a master file you'll edit again. For screenshots with small coloured text, use lossless WebP rather than lossy, because 4:2:0 colour subsampling can blur thin red or blue lines.
WebP vs JPG
For photos on the web, lossy WebP gives similar quality at a smaller size, and unlike JPG it can be transparent or animated. JPG's advantage is compatibility: every camera, printer, email client and office program reads it. If a file leaves the browser, JPG is the safer choice.
AVIF, based on the AV1 video codec, is the newer rival. It supports higher bit depths and can often compress further, but encoding is slower and support arrived later. A common setup is AVIF first, WebP second, JPG last.
Browser support for WebP
Every current major browser displays WebP, including lossless, transparent and animated files:
- Chrome 32 and later, Edge 18 and later, Firefox 65 and later, Opera 19 and later.
- Safari 14 and later on macOS 11 Big Sur or newer, and Safari on iOS/iPadOS 14 and later.
Only old systems miss out, such as Internet Explorer or a Mac stuck on macOS 10.15 Catalina. Google Search also indexes WebP images: its image guidelines list BMP, GIF, JPEG, PNG, WebP, SVG and AVIF as supported.
When not to use WebP
WebP is a delivery format for screens. Skip it in these cases:
- Print. WebP is RGB only, with no CMYK mode, and print services usually ask for PDF, TIFF or high-quality JPG.
- Editing masters. Every lossy save loses a little detail. Keep the original PNG, TIFF, RAW or your editor's project file, and export WebP only for publishing.
- Files you send to other people. Older versions of image editors, office suites, email clients and upload forms may reject
.webp. Send JPG or PNG when you don't know the recipient's software. - Images over 16,383 pixels on either side, such as large panoramas or maps.
- Heavily compressed JPGs. Re-encoding adds a second generation of artefacts and may not save anything.
How to use WebP on a website with a fallback
Since all current browsers support WebP, a plain <img src="photo.webp"> works for almost everyone. To cover older browsers too, use the <picture> element: the browser picks the first <source> whose type it supports and otherwise falls back to the <img>.
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Blue armchair in a bright living room"
width="1200" height="800">
</picture>
Keep alt, width and height on the <img>, because they apply whichever file loads. Also check that your server sends Content-Type: image/webp; on an old Apache setup you may need AddType image/webp .webp in .htaccess.
WebP matters for SEO mostly through speed. The Largest Contentful Paint (LCP) metric in Core Web Vitals is often a hero image, and a smaller file downloads sooner, especially on mobile connections. Our article on why image loading speed matters for Core Web Vitals explains how LCP is measured and where compression and lazy loading fit in. Format alone won't fix an image that is four times wider than the space it fills.
How to open WebP files on Windows and macOS
How to open WebP files depends on your system:
- Any browser: drag the file into a Chrome, Edge, Firefox or Safari window.
- Windows 10 and 11: open it in Photos or Paint. If Windows doesn't recognise the file, install Microsoft's free Webp Image Extensions from the Microsoft Store, which also adds thumbnails in File Explorer.
- macOS 11 Big Sur and later: double-click to open it in Preview; Quick Look (Space bar in Finder) shows it as well.
How to convert WebP
How to convert WebP depends on the direction you need.
To WebP, in the browser: the TimeToTime WebP converter converts one PNG, JPG or other browser-readable image at a time. Choose a quality from 1 to 100 (default 80), click Convert to WebP, and it shows the output size and how much smaller or larger it is than the original, for example "67% smaller" when a 1,250,000-byte PNG becomes a 412,500-byte WebP. Transparency is kept, and the image never leaves your device. There's no batch mode or resizing, EXIF metadata isn't copied, and an animated GIF becomes a still image. Safari may not be able to encode WebP; the tool then says so and saves a PNG, so use Chrome, Edge or Firefox. If you also need to cut the dimensions, the Image Compressor has a maximum width setting and can also output WebP.
To WebP, on the command line: Google's cwebp tool from the libwebp package converts single files or whole folders with a script:
cwebp -q 80 in.png -o out.webp
cwebp -lossless logo.png -o logo.webp
-q sets quality from 0 to 100 (default 75), and -lossless switches to lossless mode.
From WebP to PNG or JPG: on macOS, open the file in Preview, choose File › Export and pick PNG or JPEG. On Windows, open it in Paint and use File › Save as. On the command line, dwebp in.webp -o out.png writes a PNG.
FAQ
What is a WebP file?
A .webp file is an image in Google's WebP format. It can be a photo (lossy), a pixel-exact graphic (lossless), a transparent image or a short animation, and every current browser opens it.
Is WebP better than PNG?
For web pages, usually: lossless WebP averages 26% smaller than PNG with identical pixels. For editing masters, 16-bit images and files other people must open in any program, PNG is the safer choice.
Does converting to WebP reduce quality?
Lossy WebP discards some detail, like JPG; at quality 75–85 the difference is hard to see in most photos. Lossless WebP keeps every pixel. Converting a JPG to lossless WebP won't restore detail the JPG already lost.
Why do websites use WebP instead of JPG?
Smaller files load faster and use less bandwidth, which helps Largest Contentful Paint. WebP also supports transparency and animation, which JPG can't.
Can I convert WebP back to JPG or PNG?
Yes. Use Preview's Export on a Mac, Paint's Save as on Windows, or dwebp on the command line. The result can't be better than the WebP, so keep your originals whenever you can.
Try it free: Image to WebP Free to use, no account needed.