How WebP Compression Works

We've talked a lot about WebP and how it's beneficial for improving load times by reducing image sizes without sacrificing quality. However, we haven't yet gone into detail about how WebP compression actually works. There are various techniques at play in order to achieve WebP lossy and lossless compression. This post will further explain which features are available when using WebP as well as how it actually works.

WebP features

Like other popular image formats, WebP supports other features as well besides lossless and lossy compression, which will be further explained in the sections below. A few additional features of WebP include:

• Animation - WebP supports animated images.
• Transparency - The alpha channel can be used along with lossy RGB.
• Color Profile - Can contain an embedded ICC profile.
• Metadata - Can contain EXIF and XMP metadata.

How does WebP compression work?

WebP images can be compressed via either the lossless or lossy methods. The techniques used to achieve compression results for each method are different, which is explained in greater detail below.

Lossless WebP compression

Lossless WebP compression involves transforming images using a variety of techniques. Then, entropy coding is used on the transformed image data. The techniques used to transform images include:

• Spatial transformation - Used to reduce entropy by taking advantage of the fact that neighboring pixels are most often correlated.
• Color transformation - Used to decorrelate the R, G, and B values of each pixel.
• Green subtraction transformation - Used to subtract green values from the R and B values of each separate pixel.
• Color indexing transformation - Used to check if the number of ARGB values is below a certain threshold. If yes, an array is created of those ARGB values to replace pixel values with the corresponding index.
• Color cache coding - Used to reconstruct new pixels from already-seen image fragments.

The techniques above are used to actually transform the image in question. Once the transformation process is complete, the last step of WebP lossless compression is to perform the entropy coding which uses a variation of LZ77 Huffman Coding called LZ77 Backward Reference.

Lossy WebP compression

WebP lossy compression uses the same predictive technology for images that is found in the VT8 video codec, more commonly known as WebM. Basically, when it comes to lossy compression, WebP considers a certain pixel's adjacent pixels and then only counts the differences as it predicts what the first pixel looks like (known as predictive coding). The compression happens through a process called the discrete cosine transform, or DCT, which converts redundant data into residual zeroes that are then removed. This process is what enables lossy files to be as small as they are.

There are additional components involved in lossy WebP compression such as macroblocking, prediction modes, etc. For an in-depth explanation of WebP lossy compression, consider reading more from the Google Developer's post. Additionally, the following diagram shows the steps involved in lossy WebP compression.

Summary

Image compression is a technical subject. As we can see, there are many techniques, methods, and technologies at play when discussing WebP image compression. Both WebP compression methods (lossy and lossless) each have their own ways of reducing file size. It is dependent upon whether you (the image owner) want to retain the same image quality and save a smaller amount of bytes (lossless) or settle for a lower quality image and save a greater number of bytes (lossy).