What Is WebP File Format?
WebP is a modern image format developed by Google, with the goal of helping websites deliver media content without slowing down their websites.
According to Google research, WebP images with lossless compression are 26% smaller than comparable PNGs and 25-34% smaller than JPEGs at the same SSIM quality index. Lossless WebP images also support transparency with a relatively low “cost” in terms of bytes added to the image.
WebP also has a lossy compression option. WebP with lossy compression results in file sizes 3 times smaller than comparable PNGs.
In this article:
WebP Image Technology
The webP container
WebP images are stored in a container format based on Resource Interchange File Format (RIFF). RIFF containers are very lightweight, with an overhead of only 20 bytes (while it is possible to add more metadata). The RIFF container can support images with a side length of up to 16,383 pixels.
Beyond the basic use case of a file containing a single image, the WebP container also supports metadata in Exif or XMP formats, transparency, and color profiles using the International Color Consortium (ICC) standard.
WebP lossy compression algorithm
WebP lossy compression is based on intra-frame coding developed for the VP8 video codec, originally developed and open-sourced by Google. It uses a block-based transformation scheme with eight bits of color depth.
WebP compression uses the concept of block prediction. Each block in an image is predicted based on the three blocks above it and one block to the left. Prediction occurs in one of four modes: horizontal, vertical, single color (DC), and TrueMotion. Blocks that can be accurately predicted are not stored by the format.
When blocks cannot be accurately predicted by the algorithm, they are compressed using one of two transformation techniques:
After this transformation, the content undergoes entropy encoding, a lossless compression scheme.
WebP lossless compression
WebP’s lossless compression is a newer algorithm that was developed by Jyrki Alakuijala, a Google engineer. It uses several compression techniques:
- Traditional techniques, including indexed colors, Huffman coding, and dictionary coding.
- Advanced techniques, including dedicated entropy codes for each color channel, and a color cache of recent colors.
Converter software
Google provided a command-line converter for WebP that runs on Linux, known as cwebp, and a decoding library, which is shared with the WebM format. Open source version converters are now available for Windows and other platforms.
WebP Pros and Cons
Pros of the WebP format include:
- Improving website performance—the WebP format is lighter than JPEG and PNG, so a page with WebP images will load faster for users.
- Saving bandwidth—WebP frees up bandwidth and allows websites to offer a richer media experience.
- Improved search engine optimization (SEO)—as part of Google’s Core Web Vitals recommendations, it explicitly recommends using modern image formats like WebP.
- Higher image quality—with WebP there is no need to sacrifice image quality for faster loading.
- Support for additional image features—unlike some other formats, WebP has support for transparency and animation.
Cons of the WebP format include:
- Primarily designed for the Internet and is less useful for viewing images offline.
- Older browsers, such as Edge 12-17 and Firefox 2-64, do not support WebP (see full compatibility table).
- In some cases, WebP compression can slightly degrade image quality. This is important when working with high-resolution images that must be displayed at high fidelity.
WebP Alternatives
WebP vs. PNG
PNG is a widely used image format. Like WebP, it supports transparency, which is an important element for web design. Transparency allows you to structure your images so they don’t conflict with each other while maintaining a consistent design framework.
The key advantages of WebP over PNG are:
- WebP provides 23% smaller file size than PNG with the same image quality.
- WebP supports animation, while PNG does not.
The main advantage of JPG over WebP is that it is supported by all browsers.
WebP vs. JPEG
JPEG is a format widely used on the Internet, initially released in 1992. It uses a lossy compression algorithm, allowing users to define the compression level as a percentage, finding a balance between quality and file size.
The key advantages of WebP over JPEG are:
- WebP provides file sizes that are 25-35% smaller than JPEG for the same level of quality, as measured by the Structural Similarity Index (SSIM).
- WebP supports animation, while JPEG does not.
Like PNG, the main advantage of JPEG is that it is more widely supported by browsers and devices.
Related content: Read our guide to JPEG optimization
WebP vs. AVIF
AVIF stands for the AV1 image file format, an open-source format for storing animated and still images. Released in 2019 by AOMedia, AVIF is an image version of the AV1 video format. It derives from video frames using the AV1 codec and has image size limitations—the default limit of AVIF is 8K (7,680 x 4,320 pixels). Still, users can exceed it using separately encoded tiles.
WebP has an image resolution hard limit of 16,383 x 16,383 pixels—while larger than the default AVIF limit, there’s no workaround like in AVIF. Neither format compares JPEG 200 or PNG, which have limits of up to 5000 megapixels. WebP has more browser support than AVIF.
The WebP format intends to provide higher-quality images in comparable file size to JPEG. However, AVIF provides even greater compression while retaining image quality (for both lossy and lossless compression). WebP compression can have side effects like blockiness and color banding.
Browser-Sensitive WebP Conversion with Cloudinary
The main challenge with WebP is that it is not supported by all browsers and platforms. To offer WebP images on your website and get the benefits of lower image size and improved performance, you need to:
- Convert existing images to WebP
- Store both the original and the WebP version
- Implement code on your site that displays the WebP version to supporting browsers and a fallback, such as PNG or JPG, for other browsers
Cloudinary can help achieve this effortlessly with just one line of code! Here is how:
- Sign up for a free Cloudinary account
- Upload your existing images to Cloudinary’s cloud storage (you can do this via our web interface or through our SDKs)
- Add the image to your site using a special URL like this:
https://res.cloudinary.com/demo/image/upload/w_300,f_auto/nice_beach.jpg - The f_auto parameter works the magic – even though the original file is JPG, on supported browsers, Cloudinary will automatically convert the file to WebP.
That’s it! With one simple step, you can convert all your images to WebP for supported browsers, while continuing to serve traditional formats for unsupported browsers.
Cloudinary can do much more than format conversion – learn more about our Media Experience Cloud.
