WebP is an image format developed and promoted by Google.1 It’s specifically designed to be used on websites, and it is designed as a better alternative to JPG and PNG files. By using more efficient algorithms to compress the image, it results in smaller files while maintaining equivalent image quality to JPGs and PNGs.2 And smaller file sizes mean a quicker website.
The most common place you’re likely to have come across a WebP image is when downloading an image from a website. If you right-click on an image and save it, you might end up with a .webp version rather than the .jpg or .png version you expected. It’s by no means all websites, but a growing number of websites (including this one) are implementing WebP in response to Google’s push for websites to meet the standards of what they’re calling Core Web Vitals (more on that below).
You’re unlikely to run into WebP images elsewhere. No cameras or phones save WebP images natively. And it’s not a typical choice for sharing images in other ways.
WebP Image Examples
WebP images can average around 50% smaller in file size compared with a JPG of equivalent image quality–sometimes it’s more; sometimes it’s less, and it depends on the compression settings used. Of course, image quality is mostly subjective in the eye of the beholder, but here’s a couple of practical examples. I’m not putting these here as an extensive test of WebP vs JPG–that’s available elsewhere.
For these, I’ve created these in a non-typical way. I’ve generated both the WebP and JPG directly from a TIF master file. But that’s not the standard way that most WebP images are created. For workflow and convenience reasons, most WebP images that you come across in the wild on websites have been created from JPGs or PNGs. That is, they’re compressed derivative versions of files that were already compressed, which isn’t an ideal way of doing things in terms of image quality.
Embedding them here on the page wouldn’t be very useful. Because of the way my site is set up, you’d be seeing smaller versions, and most likely, both would actually be WebP versions. So here are some direct links where you can download them:
Both were generated with XnConvert with an image quality setting of 60. There are ways to tweak the quality settings, but that’s not the purpose here.
WebP Compatibility
WebP compatibility with web browsers has increased, but it’s still not universal. While most browsers have gradually added support, Internet Explorer and Safari are still holdouts (Safari support is partial).
Here’s a WebP image. If you can see it here, the web browser or app you’re currently using can display WebP images.
Uses for WebP
There are many different image file formats, each with its own strengths and weaknesses that make them well suited to some uses and not suited to others.
WebP is a Good Choice For …
The best use for WebP images is for displaying images on websites.
The highly optimized compression algorithm means that files can be much smaller than JPGs at equivalent image quality.
And smaller files bring many benefits on the web, such as faster websites and less bandwidth used.
WebP can be used in place of both JPG and PNG file formats, and it has advantages over both of those.
WebP is NOT a Good Choice For …
Aside from using on a website, the WebP format isn’t a good–or at least, typical–choice for anything else.
No cameras or scanners save images as WebP.
You can’t upload WebP images to most online sharing services. An exception is YouTube (owned by Google), where you can upload WebP for banner images and video thumbnails.
How to Convert WebP Images
If you’ve downloaded a WebP image and need to convert it to JPG, there are several image editing apps that can do it. One of my favorites is XnConvert–it’s free, cross-platform, and powerful. I’ve put together a guide on how to convert JPG to WebP with XnConvert. To go the other way, simply change the output format to JPG instead of WebP.
WebP for Optimizing Websites
WebP images are also a good option if you’re trying to optimize your website to meet Google’s Core Web Vitals. If you’re getting warnings on your Core Web Vitals reports (or PageSpeed Insights or GTMetrix) to use next-generation image formats, WebP is one of those and is currently the best option in most cases.
WebP isn’t the only option–there are others, like AVIF and JPEG XL–that are angling to replace WebP. But, for now, the one with the most traction is WebP.
Setting up a website to serve WebP images is beyond the scope of this post, and, frustratingly, it’s more complicated than it should be.
The creation of the WebP version is simple enough. You can create the WebP images manually (more on this below), use scripts or plugins on your website to generate the WebP versions automatically, or use a service that generates them on the fly and stores them away from your server.
One quirk of the way it’s implemented is that because WebP is not universally compatible, it usually means your website has to have both WebP versions and original JPG or PNG versions. A website that only uses the WebP file format for all visitors is likely to be unreadable to some visitors (or, at least, they won’t be able to see the images). So it’s not really a case of JPG or WebP but JPG plus WebP.
Another quirk of the way it’s implemented is that most WebP methods—at least, the most practical ones–create the WebP versions from the JPG versions. So it’s taking an already compressed original file and creating a second-degree compressed version. For image quality, that’s hardly ideal and goes against best practices if the priority is on image quality. But it’s by far the most practical way to implement WebP on websites that use large numbers of images.3
Setting your website up to serve WebP images is more complicated than it should be. The trick is in serving them to compatible browsers and serving JPG/PNG versions to visitors whose browsers aren’t compatible with WebP. And doing it all reliably.
It usually involves some combination of server configuration and scripts on your website. If you’re using WordPress, there are plugins and services that can make this easier (eg. ShortPixel, EWWW Image Optimizer, or Imagify/WP Rocket) with automated integration. They’re typically paid services.
There are also paid services that can generate and serve the WebP versions while keeping them off your server, so you don’t run into server storage space issues. Cloudflare Pro plans (with Polish enabled) and BunnyCDN (with Bunny Optimizer add-on) are examples.
FAQs
Does WebP support transparency?
Just like the PNG image file format, WebP does support transparency. So a WebP image can have a transparent background, for example, making it useful for graphics and logos.4
Does WebP support metadata?
Metadata is information that is included in the file that provides information about the file. Simple examples include things like the date and time the image was created, the camera or software used to create the image, the orientation of the image, or copyright information about the image. More complex metadata types include things like ICC color profiles or processing information for image editors.
The WebP format does include support for metadata such as EXIF, XMP, and ICC. It can support IPTC, although that’s not common. In general, WebP is designed to be lean, and extra metadata information embedded within the file works against that (which is why many image optimization methods strip out image metadata).
You can find much more technical information about how metadata is stored and structured in WebP here.
- Technically, Google acquired the WebP format from On2 Technologies, a company that developed video encoding technology. Google acquired On2 Technologies in 2010. ↩
- WebP has a sister format for video called WebM. ↩
- If you want to be technical, it’s often worse than that. Many content management platforms such as WordPress will create derivative thumbnail versions when you upload a new image into the Media Library. So that’s already a second or third-generation compressed file there. And the WebP versions are created from those versions. So WebP is far down the chain. ↩
- Another good option for some logos is SVG. ↩
