The loading speed has long been one of the most important factors when optimizing a website, with visitors as well as search engines regarding the time it takes to call up a page as an important evaluation criterion. A lean and compressed code or the use of caching mechanisms are part of the tried and tested solutions for a fast Web presence, as is the use of compressed images. The latter – as design and background elements – are included in many projects in large numbers, and their effect on the loading time is often underestimated.
The search engine giant Google among others, tackled this problem, and it presented its own license-free image format for faster websites in 2010 - WebP. But what exactly is behind the web format that arose from the video codec VP8? And how does it do in direct comparison with established variables such as JPEG?
On 30 September 2010, Google announced the release of a new open standard for lossy compression of 24-bit graphics on the Web. The video format VP8 served as a model for the format with the name WebP,and this was developed by the company On2 Technologies, which Google had bought up in the same year. In the period following, Google extended the WebP format with features such as a lossless compression mode, transparency (alpha channel), and animations. Chrome has supported the compression format since the end of 2010, as has the browser Opera. But there are still a variety of browsers to date – such as Safari and Firefox – which have only supported WebP experimentally up to now, and do not offer support with their regular releases. According to its own information, Microsoft is currently working on support for its browser Edge.
You will find continuously updated information on WebP browser support at caniuse.com.
All software for the processing and presentation of WebP is under the BSD license as standard. Google uses the format, for example, in the Chrome Web Store, and in the mobile Google+ apps.
WebP has always served the purpose of reducing images on the Web to as small a file size as possible. According to information from Google, images and graphics in WebP format are around 30 per centsmaller than PNG or JPEG files with the same image quality. While both these classic Web formats rely on different compression methods – PNG is lossless and JPEG lossy – WebP allows both options. Thanks to this flexibility, the format is suitable for photos as well as small images and graphics. The compression features as well as the other central characteristics of the WebP format can be summarized as follows:
In order to protect your privacy, the video will not load until you click on it.
Lossy compression with WebP uses the same method as the block-based VP8 codec, to predict frames – i.e. individual images. Each frame is therefore divided into smaller segments, which are also described as macro-blocks. Within these macro-blocks, the coder can predict redundant movement and color information and subtract these from the block. The result of this predictive compression consists of the remaining block information and the separate redundant information (typically including many zero values). It is quantified and entropy coded (presentation of characters through specific bit pattern). The quantification phase is the only process here in which thebits are actually discarded as lossy.
WebP relies on an arithmetic coding method that is more effective than Huffman coding which is used with JPEG, for example. Both involve forms of entropy coding. However, the Huffman method assigns a whole number of bits to each character, while the arithmetic coding of the entire character string allocates a single longer bit code. The complexity is therefore higher with the arithmetic coding, but the generation of bit location redundancies is excluded (only redundancy of complete messages).
With lossless WebP compression, the first step involvestransforming the image. For this, the following techniques can be used:
| Spatial Prediction Transform | WebP uses 13 different prediction modes, which make use of the fact that neighboring pixels frequently correlate with one another. The current pixel value is predicted from already decoded pixels, and only the remaining value is coded. |
|---|---|
| Color Transform | The aim of color transform is the decorrelation of the RGB values 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 as it is in the meantime. |
| Subtract Green Transform | In addition to the general color transformation, a variant is possible in which the green values are deducted from the red and blue values. |
| Color Indexing Transform | If there are too few unique pixel values, the WebP format also provides the option of color indexing transformation. The number of unique ARGB values in the image then becomes more definite, and creates allocation of these values if the number is too small. This allocation is used to replace the pixel values with the relevant index. |
| Color Cache Coding | Loss-free WebP compression can use image fragments already seen to reconstruct new pixels . If there are no suitable hits here, a local color cache with the 32 last used colors serves as a starting point here. This is continuously updated. |
The transformed parameters and image data are entropy coded, whereby a variant of the LZ77 algorithm is used. This uses small values for spatially close pixels.
Thanks to support from animated images WebP is an appealing alternative to GIF or APNG. Strengths come into play here such as the color depth of 24 bit and the 8-bit alpha channel, as well as the high degree of compression. This enables the WebP format in contrast with the competitive formats in addition to the lossless as well as the lossy compression of the animations. Animated WebP is also convincing in terms of decoding: As WebP metadata saves whether each frame contains alpha values, the decoder does not have to convert each frame individually to receive this information.
According to Google the conversion of GIFs into lossy WebP reduces the file size by up to 64 per cent, and for lossless WebP this is still 19 per cent.
The keyframe technology of the WebP format already mentioned shows its strengths, particularly in animations, where the key frames ensure high quality. However, for this reason, the decoding process is also more CPU-intensive than for GIF, for example.
WebP files are container data, where the RIFF developed by Microsoft and IBM is relied upon as a container format: (Resource Interchange File Format). A file in WebP format therefore consists of a RIFF header and the corresponding WebP content.
The RIFF/WebP header comprises the following three 4-byte series:
The header is followed by the WebP file blocks, which are also described in RIFF containers as “chunks”. Each chunk has its own header, to which the relevant information is attached. Possible blocks at the top levels are “VP8” (lossy WebP), “VP8L” (lossless WebP) and “VP8X” (extended WebP). The latter characterize WebP files with additional information such as EXIF metadata (“EXIF” chunk) or an ICCP color profile (“ICCP” chunk)) as well as animated WebP (“ANIM” chunk).
The complete development of files in WebP format looks as follows:
JPEG or JPG is to the presentation of photos 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 impossible to imagine the image format not being on the Web scene. The greatest advantage with regard to formats such as PNG – which is evenly distributed but predominantly used in smaller images and graphics such as logos, icons etc. – is without a doubt that JPEG ensures considerable memory saving thanks to lossy compression .
However, in this crucial detail WebP proves to be more efficient and more flexible. On the one hand, the Google format offers a lossless compression method as well as a lossy one, while on the other hand, the memory saving for images in the WebP format outperforms that for JPEG images of the same value. The fact that JPEG permits images with a maximum size of up to 65,535 x 65,535 pixels, while the limit of WebP is only 16,383 x 16,383 pixels, can be ignored in light of the field of use (Web).
The compression advantage that WebP has compared to JPEG, is lost with a very strong compression (from around a 90 per cent degree of compression). While such compressed JPEG images are nevertheless very pixelated, similar examples in the WebP format have a specific added value.
Similar to the comparison between WebP and JPEG is the comparison between WebP and GIF, where the format from Google also demonstrates convincing advantaged with regard to quality and compression. However, the problem is with the lack of support for WebP from browsers such as Firefox or Microsoft Edge. To date, users of these web browsers do not see images and animations in WebP, which is why barely any website operators rely on the format.
Basic data for the comparison of “WebP and JPEG” in table form:
| WebP | JPEG | |
|---|---|---|
| Release | 2010 | 1992 |
| File extension (s) | .webp | .jpeg, .jpg |
| Maximum resolution (in pixels) | 16,383 x 16,383 | 65,535 x 65,535 |
| Compression (lossless) | Yes | No |
| Compression (lossy) | Yes | Yes |
| Transparency (alpha channel) | Yes | No |
| RGB color spectrum | Yes | Yes |
| Animations possible | Yes | No |
| Supporting applications | limited (including Chrome, Opera, Gmail and IrfanView) | Universal |
File in WebP format cannot yet currently be opened with the usual image viewing programs from Windows, Linux and macOS If you want to view animations or images which have been coded with WebP, there are various options.
If Chrome or Opera are installed on your system, you can simply drag the file in question into an open window on either browser. As these browsers support WebP natively, you can view the content you wish to open without requiring further software. However, this solution is not very convenient – particularly if you want to view several images or animations. If you do not want to have to work with various browser windows and switching between them, it's easier to use IrfanView, a freeware picture viewer which also offers WebP support after the installation of the official plug-in package. However, the program is only available for Windows.
If you use the Wine compatibility layer, you can also install IrfanView under macOS or Linux, to open WebPfiles with the freeware program.
Furthermore, in the official WebP developer area Google offers a range of its own solutions for working with WebP – above all the libwebp library, which you can use to implement the WebP coding and decoding in your own programs. Also, the following tools are included in the free downloadable collection:
At ezgif.com you will also find a variety of tools for creating or converting WebP files. In contrast to Google applications, you can use these directly in the browser without installing them.
Computer storage volume is increasing by the year. But while we have access to more gigabytes and terabytes, it’s best to keep the file sizes down to a minimum–especially if you operate a website. This is because compressed data leads to quicker loading times, happy visitors, and a good Google ranking. Pictures bound for the internet in particular should be compressed. We’ve compiled some of the...
Memes as video clips, snippets from popular shows, animated logos, or banner ads: the practical GIF format has universal appeal, and can be used in many online contexts. GIFs can be found all over the internet, but making a GIF is also a popular option, with the added bonus that whoever makes a GIF using original content avoids legal complications. We show you how to create a GIF using both online...
GIFs are extremely popular for spicing up your own posts and news on social media. It seems difficult to imagine an online world without the expressive animations in the format of the same name – but APNG (Animated Portable Network Graphics) is an alternative that in some respects even stands out from GIFs. What exactly is behind this animated PNG? How can you create animations in this format?
Progressive JPEGs, or PJPEGs, are a type of JPEG that is compressed in a special way. PJPEGs load differently in the browser than “normal” or baseline JPEGs. What are the differences? How can you create a PJPEG and which programs can you use?
The metadata contained in photos can be helpful to structure your personal photo library, and later locate photos more quickly or attach copyright information to photos. However, when you upload a photo online or share it with others, it’s a good idea to remove this metadata first. Keep reading to find out which information photos can contain and how you can delete it on Windows and Mac.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
