WebP Compression

Why the WebP format was introduced

For many years, the web relied mainly on three image formats: JPEG for photographs, PNG for graphics with transparency, and GIF for simple animations. JPEG lossy compression works well for photographs but can create artifacts around sharp edges. PNG preserves pixels losslessly and supports transparency, but photographic images in that format can be large. GIF uses a palette of at most 256 colors for one frame and provides one-bit transparency.

As image download time became more important, a format was needed that combined lossy and lossless compression, transparency, and animation. Images are often among the larger resources on a page, so their format affects transfer and rendering time. In 2010, Google introduced WebP, designed for delivering images on the web.

WebP as a container for several compression modes

WebP is a container format based on the Resource Interchange File Format (RIFF) and supports several image-compression modes. The container can hold a lossy VP8 image, a lossless VP8L image, or a VP8X extended header together with chunks carrying alpha data, animation, and metadata. Chunk headers identify their type and size, so a decoder can read the relevant part of the file. The container also permits metadata chunks such as EXIF and XMP. Animation frames can use either lossy or lossless coding. The VP8X extension header records feature flags and canvas dimensions, while EXIF, XMP, and ICCP chunks can carry metadata. During animation, the decoder composes frames on a shared canvas using their position, duration, and update method.

A single $.webp$ file can be one of the following:

• A lossy image:This mode competes with JPEG. At comparable SSIM quality, lossy WebP images were 25-34% smaller than JPEG in Google's comparison. The range describes a quality and size comparison, while the result for a particular image depends on content and settings. The mode uses predictive compression based on VP8, so smooth areas and sharp edges can receive different treatment.
• A lossless image:This mode competes with PNG. In Google's study, lossless WebP images were on average 26% smaller than PNG while preserving exact pixel values. The result depends on the type of graphic, colors, and encoder settings. The mode uses a separate set of compression techniques.
• An image with transparency:WebP supports an 8-bit alpha channel, providing 256 transparency levels. The alpha channel specifies each pixel's opacity. It can combine lossy-compressed RGB channels with a lossless alpha channel. This preserves the exact transparency mask while keeping the color data compact.
• An animated image: WebP supports animation. A file can contain multiple lossy and lossless frames, 24-bit color, and 8-bit transparency. The container can store a full frame or a rectangular region changed from the previous frame. Each frame has its own position, size, and display duration, which the decoder uses to compose the next image.

Analysis 1: WebP lossy compression

WebP lossy compression is derived from the intra-frame compression of the VP8 codec, also used by WebM. The image is divided into blocks, and the encoder predicts each block from neighboring pixels. The stream mainly stores the difference between the original and predicted blocks. Prediction reduces the repetition left in the data after the estimate is subtracted.

Block-based prediction

The encoder divides the image into macroblocks, typically $16 \times 16$ pixels. For each block, it uses values from previously coded blocks above and to the left. VP8 defines its own prediction modes for a macroblock and its sub-blocks. The encoder compares the modes and chooses the one that produces the smallest error, which is easier to compress.

For the brightness (luma) part of the image, the macroblock is further divided into smaller $4 \times 4$ sub-blocks. For each of these tiny blocks, the encoder can choose from several prediction modes:

• Vertical Prediction: Fills the block by copying the row of pixels directly above it downwards. Works well for vertical edges and patterns.
• Horizontal Prediction: Fills the block by copying the column of pixels to its immediate left across the block. Effective for horizontal edges.
• DC Prediction: Calculates the average value of the pixels from the row above and the column to the left, and fills the entire block with that single average color. This is used for flat, uniform areas.
• TrueMotion Mode: A more complex mode that uses a two-dimensional gradient based on the top and left neighbors to fill the block, excellent for smooth transitions.
• Several additional angular modes for predicting diagonal patterns are also available.

After prediction, the encoder calculates the residual block, the pixel differences between the original and predicted blocks. A good prediction leaves many residual values close to zero.

Transform, Quantize, and Encode

The residual block is then processed in a manner similar to JPEG. Transform coding groups the changes, quantization sets the loss of detail, and entropy coding writes the result into the VP8 stream. Low-frequency coefficients describe slow brightness changes, while high-frequency coefficients represent fine edges and texture. The quantization choice therefore affects both visual detail and the number of coefficients that remain:

1. Transform: The residual block passes through a Discrete Cosine Transform (DCT), which converts samples into frequency coefficients.
2. Quantization: This is the lossy step. Coefficients are divided by quantization values and rounded. High-frequency detail can be rounded to zero.
3. Entropy coding: The sparse coefficient set is encoded losslessly in the final block stream according to the VP8 bitstream specification. Boolean coding uses symbol probabilities while writing the bits.

Analysis 2: WebP lossless compression

WebP lossless mode uses a separate VP8L stream, independent of lossy VP8. It restores exact pixel values, including alpha values, and applies techniques designed for lossless image compression. This mode is suitable for icons, screenshots, and graphics where changing one pixel matters.

Prediction and transforms

WebP Lossless uses predictors to calculate residual values. The specification supports block prediction and selects transforms from the image data. It can use different predictors in different parts of the image, adapting the transform to local content. Prefix coding stores the transformed values, and the decoder reverses the steps in the opposite order.

Color caching and pattern matching

WebP Lossless uses several techniques for different kinds of repetition:

• Pattern matching (LZ77): The encoder searches for repeated pixel sequences and replaces them with shorter back-references containing a position and a match length.
• Color caching: The encoder keeps recently used colors in a cache. When a pixel color is present, it can store a short index instead of the full value. This is useful for images with a limited, repeating palette.
• Color-space transform: The encoder can apply a reversible transform to the R, G, and B channels, such as subtracting green. It can also use predictor transforms and color indexing. More uniform channel data is easier to compress.

The WebP Lossless encoder can select these techniques for each image, and it organizes data in blocks so the choice can follow local content. Google's study reported a smaller average size than PNG while preserving lossless pixel reconstruction. This does not imply a fixed reduction for every image, because photographs and limited-palette graphics have different data distributions and repetition.

Transparency and animation in WebP

WebP combines image compression with transparency and animation support, which older formats handled with separate limitations.

Lossy color and lossless transparency

WebP can store RGB color channels in a lossy VP8-based stream while storing the alpha channel in a separate lossless stream. The alpha values can range from fully transparent to fully opaque. This allows the color and transparency mask to use different coding modes.

PNG was a common choice for images that required transparency. WebP can store color lossily and the transparency mask losslessly, preserving the exact mask while reducing the color data. This is useful for product images and logos with shadows. The alpha channel does not remove the visible artifacts that can result from lossy RGB compression.

WebP animation

Animated GIF was used for simple web animations, but it is limited to 256 colors and less efficient compression. Animated WebP supports greater color depth, transparency, and both compression modes. The container stores the frame order, display duration, and update method needed to reconstruct the animation. One animation can therefore combine frames with different characteristics.

• Full color: Animated WebP supports 24-bit color, which represents millions of color combinations instead of 256.
• Transparency: An animation can use an 8-bit alpha channel and partial transparency.
• Efficient compression: A file can contain lossy and lossless frames. A frame can store the complete image or a rectangular region changed from the previous frame. That region limits the data when only part of an animation changes. In Google's comparison, lossy animated WebP was 64% smaller than GIF on the tested set, while lossless animated WebP was 19% smaller.