Loading speed has long been one of the most important factors during site optimisation and both visitors and search engines consider the time it takes to call up a page to be an important evaluation criterion. Lean and compressed code or the use of caching mechanisms are part of tried and tested solutions to ensure a fast web presence, as well as the use of compressed images . The latter - as design and background elements - appear in large numbers in many projects, and their impact on loading times is often underestimated.

This problem has been tackled by, among others, the search engine giant Google who in 2010 presented his own , unlicensed aspect ratio for faster websites - WebP. But what exactly is behind the web format, which originated from the VP8 video codec? And how does it compare directly with established variables such as JPEG?

What is WebP?

On 30 September 2010, Google announced the release of a new open standard for lossy compression of 24-bit graphics on the Internet. The VP8 video format served as the template for a format called WebP,and this was developed by On2 Technologies, which Google bought the same year. In the following period, Google extended the WebP format with features such as lossless compression mode, transparency (alpha channel) and animation. Chrome has supported the compression format since late 2010, as has the Opera browser. However, there are still a number of different browsers - such as Safari and Firefox - that have so far supported WebP only experimentally and do not offer support in their regular releases. According to its own information, Microsoft is currently working on support for its Edge browser.

What features distinguish WebP?

WebP has always been used to reduce images on the Internet to the smallest possible file size. According to Google, images and graphics in the WebP format are by about 30 per cent smaller than PNG or JPEG files with the same image quality. While the two classic web formats rely on different compression methods - PNG is lossless and JPEG is lossy - WebP allows both options. This flexibility makes the format suitable for photos as well as small images and graphics. Features compression, as well as others Main features of the WebP format can be summarised as follows:

  • Compression (lossy) : Lossy compression with WebP uses VP8 keyframe encoding.
  • Compression (lossless) : Lossless compression with WebP is based on various techniques for transforming image parameters and data. The LZ77 algorithm is also used here.
  • Transparency : The 8-bit alpha channel offered by the WebP format can also be used for lossy RGB compression.
  • Metadata : WebP can contain EXIF and XMP metadata, which are usually generated by cameras.
  • Colour profile : the Google format can contain embedded ICC profiles (data sets describing the colour spectrum).
  • Animations : WebP format allows sequences of images to be saved.

How does WebP lossy compression work?

Lossy compression with WebP uses the same method as the VP8 block codec, to frame prediction - i.e. individual images. Each frame is therefore divided into smaller segments, which are also referred to as macroblocks . Within these macroblocks, the encoder can predict redundant motion and colour information and subtract it from the block. The result of this predictive compression consists of the remaining block information and separate redundant information (usually containing multiple null values). It is quantified i entropy-coded (presentation of characters by means of a specific bit pattern). The quantification phase here is the only process in which the bits are actually discarded as lossy.

Principles of lossless compression with WebP

In the case of lossless WebP compression the first step is to image transformation. The following techniques can be used for this purpose:

Transforming spatial anticipationWebP uses 13 different prediction modes that take advantage of the fact that neighbouring pixels often correlate with each other. The current pixel value is predicted from the already decoded pixels, and only the remaining value is encoded.
Colour transformationThe purpose of the colour transformation is to decorelate the RGB value of each individual pixel. Here, the image is first divided into blocks before red (R) is transformed based on green (G) and blue (B) based on green and red. The green value is kept unchanged.
Subtract green transformationIn addition to a general colour transformation, a variant is possible in which the green values are subtracted from the red and blue values.
Colour indexing transformationIf there are too few unique pixel values, the WebP format also provides a colour indexing transformation option. The number of unique ARGB values in the image then becomes more defined and creates an allocation of these values if the number is too small. This allocation is used to replace the pixel values with the appropriate index.
Colour coding of the cacheLossless WebP compression can use parts of the image that we have already seen to reconstruct new pixels . If there are no suitable hits here, a local colour buffer with the 32 most recently used colours serves as a starting point here. This is continuously updated.

The processed parameters and image data are entropy-encoded, using a variant of the LZ77 algorithm. This uses small values for spatially close pixels.

What sets the animated WebP apart?

With the support of animated images, WebP is an attractive alternative to the GIF or APNG. Strengths are involved, such as 24-bit colour depth i 8-bit alpha channel , as well as a high compression ratio. This is made possible by the WebP format, as opposed to competing formats, and the lossless and lossy compression animation. Animated WebP is also convincing in terms of decoding: because WebP metadata records whether each frame contains alpha values, the decoder does not need to convert each frame individually to obtain this information.

WebP vs. JPEG: WebP performs well in comparison with other image formats

JPEG or JPG is to the presentation of photographs and large images on the World Wide Web what Google is to the world of search engines. Even a quarter of a century after its release, it is inconceivable that the image format is not appearing on the web scene. The biggest advantage with regard to formats such as PNG - which is evenly distributed, but mainly used for smaller images and graphics such as logos, icons etc. - is undoubtedly that JPEG provides significant memory savings through lossy compression.

However, in this key detail WebP turns out more efficient and flexible . On the one hand, the Google format offers both lossless and lossy compression methods, while on the other hand, the memory savings for WebP images exceed those for JPEG images of the same value. The fact that JPEG allows images with a maximum size of up to 65,535 x 65,535 pixels, while the WebP limit is only 16,383 x 16,383 pixels, can be ignored in light of the application domain (Web).Note

The compression advantage that WebP has over JPEG is lost with very strong compression (from about 90 per cent compression ratio). Although such compressed JPEG images are nevertheless very pixelated, similar examples in WebP format have a certain added value.

Similar to the comparison of WebP and JPEG is the comparison of WebP and GIF , where the format from Google also shows a convincing advantage in terms of quality and compression. The problem, however, is the lack of support for WebP from browsers such as Firefox and Microsoft Edge. To date, users of these browsers do not see images and animations in WebP, which is why almost no site operators rely on this format.

Basic data for comparing 'WebP and JPEG' in table form:

File extensions).webp.jpeg, .jpg
Maximum resolution (in pixels)16 383 x 16 38365 535 x 65 535
Compression (lossless)TAkNot
Compression (lossy)TAkTAk
Transparency (alpha channel)TAkNot
RGB colour spectrumTAkTAk
Possible animationsTAkNot
Supporting applicationslimited (including Chrome, Opera, Gmail and IrfanView)universal

How can WebP files be opened and converted?

The file in WebP format cannot yet be opened with the usual image viewer programs on Windows, Linux and macOS If you want to display animations or images which have been encoded with WebP, there are various options.

If the following is installed on your system Chrome browser or Opera , you can simply drag the file in question to the an open window in any browser. Since these browsers natively support WebP, you can view the content you want to open without any additional software. However, this solution is not very convenient - especially if you want to view several images or animations. If you do not want to work with different browser windows and switch between them, it is easier to use a IrfanView , free photo viewer, which, once the official plug-in package is installed, also offers WebP support. However, the programme is only available for Windows .

In addition, in the official WebP developer area Google offers a number of its own solutions for working with WebP - most notably libwebp library , which can be used to implement WebP encoding and decoding in your own programmes. In addition, the following tools are included in the free downloadable collection:

  • cwebp allows the image field to be compressed using WebP. Possible input formats are PNG, JPEG and TIFF . In the tool options, you can specify whether to use lossless or lossy compression.
  • dwebp is a tool with which existing WebP files can be converted into other formats, such as PNG (standard option), BMP, TIFF or PGM.
  • vwebp ,Google provides its own OpenGL-based solution for displaying WebP images and animations.
  • webpmux is a decisive tool for working with extended WebP. You can create animations in WebP format, for example, using the programme, or extend image files with metadata and ICC profiles.
  • Thanks to gif2webp You convert existing GIF files to WebP. As with normal image compression, both lossless and lossy encoding is possible.