Two days ago, I wrote about the WebP file format and some early impressions on its performance. I am grateful for the responses I got, including a conversation with Brion Vibber, former CTO at the Wikimedia Foundation.
As a result of this conversation, there is now one more feature request in Wikimedia’s bug tracking system: Bug 25611: Support optimized WebP thumbnails as alternative to JPEG
If you access a Wikipedia page, you are likely to see images in the article. Usually, these images are coming from Wikimedia Commons and we encourage people to upload these images in a high resolution. Thanks to the MediaWiki syntax, it is rather easy to adjust the image size via the thumbnail parameter.
The file format of thumbnails depends on the file format of the original image. JPEG and TIFF images are thumbnailed as JPEG, SVG and PNG are downsized to PNG files.
If you access a rather large Wikipedia articles, the size of the thumbnails will reach a single digit Megabyte level, for example the current version of the German language article on Germany.
Size of the Article "Germany" at de.wikipedia.org
If a single Wikipedia article (and not even the largest one) is 3.67 MB large and 2.7 MB of it are images, a reduction in size would make a difference to the readership where the bottleneck is bandwidth. In the case of the article on Germany, a larger part of the images are in PNG format. By the way, the screenshot is taken from Google Chrome’s developer tools, a great way to see what is going on between a web site and your browser.
For the purpose of a small experiment, I picked the article on Albrecht Dürer in the English language Wikipedia.
Total size of the article (including stylesheets and website logo and icons): 892.74 KB
Size of images: 352.51 KB.
Text compression will turn a 126.53 KB html file into 33.05 KB.
Several .js and .css files with slightly above 400 KB should remain in the browser cache if you have accessed Wikipedia before. Therefor, if you are a non-first time Wikipedia visitor, the thumbnails of the article will easily be the by far largest chunk of data you will have to download.
In this example, there are 18 JPEG thumbnails ranging from 5122 to 28788 Bytes. The image size ranges from 100*146 to 220*343 Pixels. In the current compression, Bytes-per-pixel starts at 1,42 and ends at 5,03.
All images were available at Wikimedia in a higher resolution from slightly-above-thumbnail (311*485) to reasonably-large (2192*2831).
The original thumbnail (13.586 Bytes)
In my test, I will load the original files and convert them to BMP files of the size of the thumbnails. I will convert these files to .webp using whatever quality the webpconv will pick and additionally at a quality setting that I consider to be still useful.
The quality parameter used by webpconv itself was always between 81 and 85, resulting in 18 files that sum up to 350 KB – 26 KB larger than the sum of the JPEG thumbnails created by the MediaWiki software.
With quality 50, I end up at 181 KB, 44% smaller than the JPEG image set.
WebP auto setting: 9.641 Bytes
With quality 20, we end up with a severe reduction in visual quality and a total size of 75,8 KB. Several images are distorted almost beyond recognition, others still serve the purpose of a thumbnail perfectly fine. If the purpose was a reduction of size of 50%, a quality setting of 45 would fit. In any way, the comparison is not entirely possible in my comparison since I did not use any image manipulation other than image size reduction and compression. Best of my knowledge, MediaWiki’s software tools apply contrast and sharpness adjustments during the thumbnailing process.
WebP at quality 50: 4.163 Bytes (a.k.a "your hair is gone")
I am going to end this post with a series of thumbnails both in the original thumbnail version and various stages of WebP compression. Since your browser is most likely unable to display .webp files directly, I converted the images to .png in a lossless manner.
WebP at Q=20 : 1.367 Bytes (a.k.a. "the entire Dürer gone")
In order to give a recommendation on WebP, you have to keep in mind the purpose of a thumbnail: A quick impression on the content of an image. You have to see what is in the image, you don’t have to see every tiny detail of it. Anyone who wants to see more can click on the image and look at the (hopefully larger) image without further compression and resizing. WebP at q=50 manages this job quite well with an impressive reduction in size. Keeping in mind that thumbnails are ususally the largest part of a new Wikipedia site (if you have already the css and js stuff in your browser cache), a size reduction here would severely affect the total size of a page. Contrast and Sharpening could also be applied here and might improve the visual quality as perceived by its users.
I welcome your feedback.
