What is WebP? Google's Web Image Format Explained
What is a WebP file?
WebP is an image file type created by Google that provides lossy and lossless image compression for the web. Launched in 2011, it has effectively gone mainstream since its widespread browser adoption in 2020. WebP files can be recognized by the filename extension .webp.
WebP is an open-source technology; anyone can download and contribute to the source code. The WebP format was developed to reduce the size of compressed images without losing quality. The format does this by using predictive coding similar to that used in encoding video keyframes.
Google’s research shows it has managed to successfully compress images into significantly smaller file sizes. The company reports that WebP boasts the benefit of being 26% smaller than PNG files and 23–24% smaller than equivalent JPG files. A WebP image size can be up to 16,383 × 16,383 pixels.
Key features of WebP images
One of the advantages of the WebP image format is that it can handle more features (such as transparency and animation) than other file formats. Some other advantages include the following:
- Lossy and lossless compression. WebP can be used for either lossy or lossless compression. These terms identify what happens when image compression is reversed. Lossy compression loses data when the file is decompressed, while lossless loses very little to no data. The advantage of lossy compression is it creates a much smaller file size than lossless can.
- Transparency. WebP images support transparency (i.e., an alpha channel). PNG files do, too, but JPEGs do not. Transparency adds less data than other formats, and is especially useful when designing websites. It allows you to create uneven borders on a shape and see the background behind the shape. It also allows you to create depth and contrast with page elements layering above and below each other. You can even create more advanced visual effects like glassmorphism that make your site look fresh and modern.
- Animation. WebP images can be animated, like the well-known GIF. This is an advantage over JPEGs which don’t support animation. WebP animated files are also smaller in size than GIF or APNG files.
- Metadata. WebP supports adding metadata to images using both XMP and EXIF. Metadata is useful for giving context to digital images, including time and location data attached to an image from a digital camera. You can add tags and short descriptions to images with metadata that help search engines identify images, boosting your SEO.
- Color profile. You can embed an ICC profile for color management to a WebP file, which is managed by the International Color Consortium. An ICC file can be imported into image editing programs like Adobe Photoshop to help manage color in a file across devices or for printing.
The benefits of the WebP format that most web admins and users will appreciate are as follows:
- Faster loading times. Due to the smaller file sizes, pages with WebP images load faster. That’s a huge boost to site enjoyment: according to Website Builder Expert, every second delay in loading reduces visitor satisfaction by 16%, and one in four visitors will abandon a website completely if it does not load within 4 seconds.
- Less media storage. WebP’s enhanced compression also means less storage space. This is crucial for sites that host a large amount of images.
- Saves more bandwidth. Bandwidth is the rate at which the server can transfer data to end-users within a specific time. WebP can free up bandwidth, allowing websites to offer more content. This is especially important for websites with many images, like food, travel, or photography blogs.
- Improves search engine optimization. The increased loading speed from using smaller image files positively affects site ranking in search engines like Google.
What Are the Disadvantages of WebP?
The main disadvantage of WebP is its less-than-universal adoption by hardware and software providers. For example, Adobe Photoshop doesn’t support it by default: to edit a WebP file on Adobe Photoshop, you need to install the WebPShop plugin first. Also, according to Google developers, CPU usage can be up to 2.2x higher for animated WebP images compared to animated GIF.
Where is the WebP format supported?
WebP is already considered a widely adopted standard. As of 2022, it has a 97.4% market share among web browsers. This includes Google Chrome, Safari, Firefox, Edge, and Opera. Website builders like Wix, Squarespace, and Webflow and graphics tools like Photoshop now commonly support WebP images as well.
Though so many tools support WebP, JPEG is still the most popular image format on the web. Out of all websites, 76.6% use JPEG and only 6.2% use WebP.
How do I create WebP images?
Mobile phones and digital cameras typically save JPEG, HEIF, or raw (uncompressed) images. Some stock photography collections offer WebP downloads, but many still use JPEG. So in many cases, you will not start with a WebP image; you will need to convert some other image format to WebP, likely after cropping, scaling, and other adjustments. GIMP (GNU Image Manipulation Program) has supported WebP images since about 2017, and Adobe Photoshop supports WebP through its free WebPShop plugin.
If you have images in a non-WebP format, you will need an image converter. There are plenty to choose from, and most succeed at the basic task of converting a file to WebP. The oldest converter, and one that is still very useful for batch processing or fine-tuning, is Google’s WebP converter cwebp. Another example is XnConvert.
What is the future for WebP?
Despite its obvious advantages over JPEG, PNG, and GIF formats, development of WebP has been slow and adoption even slower. Other newer image formats that have been in the works for less time than WebP are chasing some of the same goals. Should we skip WebP and use one of them instead? While we don’t have time to delve into the details here, the following formats are directly competing with WebP for market share:
The HEIC (High-Efficiency Image Container) uses High Efficiency Video Coding (HEVC, H.265) for storing images. HEIC offers smaller file sizes than JPEG for the same quality level (roughly half the size of an equivalent JPEG), and animation support (to replace GIF).
On the downside, HEIC is encumbered by patents that limit its use for major commercial projects, even on devices licensed for consumer use. It is also slower to encode and decode.
The AVIF (AV1 Image File Format) competes with HEIC. AVIF is supported in Chrome, Firefox, Safari, and Opera. It also works in VLC and GIMP. Its main advantage over HEIC is that it is not encumbered by license restrictions.
A semi-compatible successor to JPEG, JPEG XL seems most likely to eventually fill the role of the universal online image format. JPEG XL provides improved quality for the same file size compared to HEIC and AVIF, among other benefits.
Considering the many positive aspects of the WebP format, including faster website loading time, less bandwidth usage, and reduced storage requirements, virtually any site or social media platform can benefit from using the WebP format now. Development of image compression algorithms is ongoing, so other formats may eventually come to replace WebP, but that should not stop website admins from going ahead and using this improved technology.
*The opinions reflected in this article are the sole opinions of the author and do not reflect any official positions or claims by Acer Inc.
About Ashley Buckwell: Ashley is a technology writer who is interested in computers and software development. He is also a fintech researcher and is fascinated with emerging trends in DeFi, blockchain, and bitcoin. He has been writing, editing, and creating content for the ESL industry in Asia for eight years, with a special focus on interactive, digital learning.
Ashley is a technology writer who is interested in computers and software development. He is also a fintech researcher and is fascinated with emerging trends in DeFi, blockchain, and bitcoin. He has been writing, editing, and creating content for the ESL industry in Asia for eight years, with a special focus on interactive, digital learning.