WebP File
Definition
WebP arrived in 2010, built on the intra-frame coding of the VP8 video codec, and uses a RIFF container with the extension .webp and the MIME type image/webp. It has two distinct modes: a lossy one that competes with JPEG, and a lossless one that competes with PNG and comes out roughly 26 percent smaller on typical web graphics. Unlike JPEG it supports an alpha channel in both modes, so a photograph can have soft transparent edges. It can also hold animation frames, which makes it a direct replacement for a small GIF. Maximum dimensions are 16383 by 16383 pixels, which is only a limit for very large panoramas.
Why It Matters
Browser support is no longer a reason to avoid WebP. Chrome has shipped it for well over a decade, Firefox added it in version 65 in January 2019, Safari in version 14 in September 2020, and Edge since its Chromium rebuild — so every current browser handles it, covering upwards of 95 percent of real traffic. The saving is real and repeatable: a page carrying 1.8 MB of JPEGs typically lands around 1.25 MB in WebP at quality nobody complains about, which on a 5 Mbps connection is roughly a second off the Largest Contentful Paint. What still trips people up is everything outside the browser — some email clients, older desktop image viewers and a few CMS uploaders will not open a .webp, so keep a JPEG copy for anything that gets emailed or handed over.
How It Works
Encoding is usually done with cwebp or a library like sharp: cwebp -q 78 input.jpg -o output.webp is a sensible default, and the numbers on that scale are not interchangeable with JPEG quality numbers — WebP at 75 is roughly JPEG at 85. A near-lossless mode exists for graphics that must stay crisp, and alpha is stored as a separate plane that can itself be compressed. On the serving side the file needs Content-Type image/webp, and the safe way to offer it alongside a fallback is a picture element with one source of type image/webp and an img with the JPEG. The other approach, sniffing the Accept header and returning a different file from the same URL, needs a server that swaps formats on request — a static host will always return the exact file at that path, so do the conversion before uploading and let the markup do the choosing.
Real-World Example
A photographer publishes a single-page portfolio on 99helpers at studio-lane.99helpers.site. The hero photograph was a JPEG at quality 82, weighing 410 KB; re-encoded with cwebp at 78 it is 268 KB, about 35 percent less, and side by side on a laptop the two are indistinguishable. Both files are uploaded, the WebP listed first in a picture element, and the JPEG remains for the visitor on an ancient browser and for the client who asks for something to attach to an email.
Common Mistakes
- ✕Converting from an already compressed JPEG at high quality — you inherit the JPEG artefacts and add a second lossy pass, so start from the master where you can
- ✕Copying the JPEG quality number across — 80 in cwebp is a noticeably softer image than 80 in a JPEG encoder
- ✕Assuming a .webp will open anywhere — plenty of desktop tools and email clients still refuse it, so keep a JPEG for handover
- ✕Expecting the host to serve WebP to browsers that support it and JPEG to those that do not — a static host serves one file per URL, and the picture element is what makes the choice
Related Terms
JPEG File
A JPEG file is a raster image compressed by discarding detail the eye is least likely to miss. It was designed for photographs, and every time you re-save one it loses a little more.
AVIF File
AVIF is an image format built from the still-frame coding of the AV1 video codec. It generally beats WebP by another 20 percent or so at matching quality, at the cost of much slower encoding.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Responsive Images
Responsive images means publishing the same picture at several sizes and letting the browser pick the one that fits. The srcset and sizes attributes are how you describe that choice in HTML.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →