WebP is an alternative image format for lossless and lossy compression. The image format was developed by Google and On2 to address the increasing use of images on websites, which had become a bottleneck for loading times.
WebP is a format for non-animated still images, based on the technical foundation of VP8 from the WebM video format, with VP9 already on the horizon. However, VP9’s compatibility in video editing is still not widespread. Using the command line, WebM with VP9 can be used without restrictions, as we found in various applications in 2018. It remains to be seen to what extent the benefits of VP9 will influence the further development of the WebP image format.
Web Server Configuration
To display WebP images, the web server must be configured accordingly, ideally with a fallback. If an image is available in WebP format, it will be loaded as the preferred image format by the browser with proper configuration. If no WebP version is available, the JPG or PNG image will be displayed instead.
For websites with few images, the additional images in WebP format can be generated locally and simply uploaded via FTP. For use in online shops with thousands of images, which are likely also organized in folders, this is not practical. In this case, a shell script can be created to generate existing images locally or directly on the server.
For better result control, it is recommended to first run the shell script locally on a series of images.
Browser Compatibility
Until the end of 2018, Mozilla did not offer support for Firefox because WebP, in the eyes of Mozilla developers, provided no advantages over JPG, while Opera and Chrome had been compatible with WebP for years.
Since January 2019, Mozilla Firefox version 65 and later supports the WebP image format.
To avoid missing compatibility in unsupported browsers, it is advisable to set up a fallback to an alternative image format. If a non-compatible browser is used, the browser will load the additionally provided image in a supported format like JPG or PNG. It is easy to check whether the desired format is loaded by the browser.
Tests should show whether WebP truly offers a genuine alternative compared to JPG or PNG.
Synthetic Grayscale Test Image with Linear Gradient Pattern
Even at the highest quality, differences between PNG and WebP are noticeable. WebP has a smaller file size, but already exhibits slight pixelation, which conflicts with the term “lossless compression” (at 100%).
Lossy WebP Compression - File Size Comparison
To minimize image size as much as possible, the test image is lossy compressed with WebP. While smaller thumbnail images appear nearly identical at first glance, a clear pixelation becomes noticeable with the larger image.
The result for this motif is impressive in both quality and file size. It is evident that, similar to JPG, there is exponential data savings with increasing resolution. The larger the image, the more effective the algorithm. Although the savings ratio for WebP in the test is slightly worse than JPG, it should be noted that the absolute file size of WebP images is only a fraction.
The more complex the image and the more fine structures and color gradients it has, the worse the visual result becomes at lower quality settings.
Depending on the motif, the visual quality of WebP can, in some cases, be worse than JPG at the same file size.
Details with WebP
WebP struggles with highly detailed images. Whether it’s skin pores, a winter forest, or the depiction of wind hitting a water surface, these bring high demands on the codec and quickly expose WebP’s limits. While only a few details may be missing in the thumbnail (e.g., smoother skin) and are generally noticeable only upon closer inspection, the differences become much more obvious at full view.
In the lossy test, WebP performs well. Particularly for thumbnail sizes, the result is convincing. The file size can be drastically reduced. However, in full view, compression artifacts and differences in details become quickly visible.
For truly sharp image display, WebP is not ideal for high-resolution images at this quality level.
Whether expectations can be met with higher quality settings must always be evaluated on a case-by-case basis. In some cases, the quality settings need to be so high that the WebP file size exceeds that of the JPG format.
Real Test Image for Checking Color Fidelity
With a mediocre test image taken with a smartphone under difficult lighting conditions, which is relatively detailed and has a high gray content, WebP is quickly overwhelmed.
At the same file size, the image in WebP format shows a noticeable red tint. With further reduced quality settings, in addition to the expected increase in compression artifacts, noticeable color errors appear. The red tint intensifies across the whole image. Some areas also show a strong green tint, which becomes more noticeable with lower quality settings. Such examples are a good reason why existing PNG or JPG images should not be automatically converted via batch process or plugin (e.g., for WordPress).
Conclusion
WebP is a powerful image format that can offer significant advantages in the hands of experienced users, but it should be viewed as a complement rather than a replacement for PNG or JPG.