At present on the Internet, picture traffic still occupies a larger part. Therefore, in the case of ensuring the same quality of pictures, saving traffic bandwidth is a problem we always need to solve. Traditional image formats, such as JPEG, PNG, GIF, etc., do not have much room for optimization. Therefore, In 2010, Google proposed a new image compression format – WebP, which provides new possibilities for image optimization.

WebP, the updated version of JPEG

**WebP is like an improved version of JPEG. ** It is a Google image file format designed to provide superior lossy, lossless compression of image resources on the Web. Provides smaller, richer image resources with the same quality index as other formats, so that resources can be accessed and transmitted on the Web.

WebP image format is derived from VP8 video codec, also known as WebM video container, which is a single compression framework of WebM video format. A powerful feature of the VP8 codec is the ability to compress within frames, or more specifically, compress each frame of the video, and then compress the differences between frames.

WebP features

  • Lossy compression: Lossy compression is based on VP8 key encoding. VP8 is a video format created by On2 Technologies and is a later version of VP6 and VP7 formats.
  • Lossless compression: using predictive transformation, color transformation, minus green, LZ77 echo reference technology for compression.
  • Transparency: the 8-bit Alpha channel is useful for graphic images. The Alpha channel can be used with lossy RGB. Webp-specific features not supported by other image formats.
  • Animation: it supports true color animated images, which can support dynamic diagrams (giF-like images)
  • Metadata: It may have EXIF and XMP metadata
  • Color profile: It may have an embedded ICC profile.

About the compression

One of the key principles of lossy compression is that human perception is not as accurate as that of computers. It has been scientifically proven that the human eye can only distinguish 10 million different colors, and is more sensitive to brightness than chroma, meaning we ignore large chroma changes without affecting our sensitivity to images. This is why the “black, blue and white Gold dress” incident has caused so much discussion. It must also be influenced by our visual sensitivity.

Lossy compression

WebP compression is used to predict frames in the same way as VP8. VP8 Block-based prediction Like any block-based codec, VP8 divides frames into small blocks called MarcoBlocking. Within each macroblock, the encoder can predict redundant motion and color information based on previously processed blocks. The image frame is “critical,” meaning that it uses only pixels that have been decoded in the immediate spatial neighborhood of each macroblock. And try to assign values to the unknown parts of them. This is called and predictive coding. The redundant data can then be subtracted from the block for efficient compression.

Macro block (MarcoBlocking)

The first stage of the encoder is to segment the image into “macroblocks”. The macro block consists of a 16×16 brightness pixel block and two 8×8 chroma pixel blocks. This stage is very much like converting color space in JPEG format, sampling the chroma channel down, and subdividing the image.

Prediction (Prediction)

Each 4×4 sub-block of the “macroblock” then has a predictive model. It defines two pixels around A block: there is A row A(Raw A) above it and A Column L(Column L) to the left. With A and L, the encoder will fill them in A 4×4 predictive pixel block and determine which one generates the value closest to the original block. These blocks that are not filled in the right way are called ‘prediction blocks’.

There are four common models for block forecasting:

  • Horizontal prediction: Each column of a block has a copy of the previous column
  • Vertical prediction: Fill each row of the block with a copy of the previous row.
  • Tm forecast: one model, On2 Technologies developing compression technology, another next time.
  • D G prediction: Use the average value of pixels in the columns above A and left of L to fill faster with A single value.

It’s worth noting that there are six other modes available for the 4×4 brightness block.

The basic process is that we find the fastest prediction block, export the filtering results (residual errors), and then move to the next stage.

Adaptive quantization

In order to improve the image quality, the image is segmented into regions with distinct similarity. For each of these segments, the compression mass is tuned independently. Efficient compression is achieved by reallocating bits to the most useful locations.

JPGify it

WebP is an upgrade to JPEG because they are similar in many ways and better than JPEG in some compression processes.

Similarities:

  • Perform DCT filtering on the remaining values in the block
  • DCT matrix post-quantization
  • Convert it to a quantization matrix, reorder it, and send it to a static compressor.

Difference:

  • The input data in the DCT phase is not the original data block itself, but the predicted data.
  • The static Compressor used by WebP is the Arithmetic Compressor, which is similar to the Huffman encoder used by JPEG. Compared to performance, arithmetic compressors improve compression performance by 5% to 10%.

Lossy WebP VS JPEG

As a JPEG upgrade, WebP reduces the image size by about 50% when it compresses the JPEG to 90% of the original image quality. When WebP compresses JPEG to 80% of the quality of the original image, the image size is reduced by 60-80%. Intuitively and effectively reduce the size of resources and bandwidth traffic.

How do I enable WebP adaptation

WebP, with its excellent image compression performance and lossless and lossy compression algorithms, has been rapidly popularized in major websites and APPS. So how do you turn on the WebP format in your website?

Youbaiyun currently supports WebP image format conversion, and also supports WebP adaptive function. If you open WebP adaptive function in the background with one key, you can judge whether the client browser supports WebP decoding through the CDN platform intelligently. If so, the WebP format pictures will be returned. If not, the original image is returned without any changes on the client or the source site.

Recommended reading:

WebP – Image format conversion experience