Works – Is Cool – Don't worry: WebP Image format for the Web

31/1/2022 Addition: SVG – last paragraphs added

Related thread on the AVIF format and conversions with ImageMagick.

Just when I decided to give up JPEG for storing photos on my hard-disk and upon converting some folders with Nikon raw photos (*.nef) to JPEG2000, I stumble upon a variety of new image formats which all claim to be successors of the old JPEG. But although the “Joint Photographich Expert Group” is behind most of the effort, their work has – for the time being – not met much response in mainstream software. Only JPEG-XL could be compatible to future versions of Chromium and Firefox.

Since 2018, yet another proposition exists, this time under the leadership of Google : WebP.

According to Wikipedia, 96% of all Web-browsers are compatible with WebP at the time of this writing. I don't know about you, but I had not noticed and ignored even the existence of this standard.

Here is the compatibility-overview from caniuse: https://caniuse.com/#search=webp

As WebP supports transparency in lossy and lossless compression-modes, you can replace PNG by smaller WebP images, too!

Converting

For an unknown reason I found the packages “webp” and “libwebp6” already installed on my Debian system. I guessed that they would come with tools for compressing to – and decompressing from WebP, but at first could not find any information about these tools ...

They are quite simply

• “cwebp” (man-page) to compress PNG, JPEG, TIFF, WebP or raw Y'CbCr samples to WebP and
• “dwebp” (man-page) to decompress into PNG, PAM, PPM or PGM images.

The tool “convert” (man-page), which is part of the the ImageMagick suite will do the conversion in both directions, “The Gimp” can read and write WebP, too.

Examples

I start with examples of lossless compression and will show the result of lossy compression further below.

Here is a photo in tif-format:

Code:

user@machine:/tmp/photo$ ls -lh
insgesamt 71M
-rw-r--r-- 1 user user 71M  5. Dez 23:26 orig.tif

With convert, I can choose lossless compression to create a WebP picture from this file, simply by setting the quality option to 100:

Code:

user@machine:/tmp/photo$ convert -quality 100 orig.tif orig.webp
user@machine:/tmp/photo$ ls -lh
insgesamt 82M
-rw-r--r-- 1 user user 12M  5. Dez 23:36 orig.webp
-rw-r--r-- 1 user user 71M  5. Dez 23:35 orig.tif

For the compressor from the webp package, the command-line is a little different to achieve the same. To impose lossless compression, cwebp must be called with the -lossless option:

Code:

user@machine:/tmp/photo$ cwebp -lossless -q 100 orig.tif -o orig2.webp
user@machine:/tmp/photo$ ls -lh
insgesamt 94M
-rw-r--r-- 1 user user 12M  5. Dez 23:42 orig2.webp
-rw-r--r-- 1 user user 12M  5. Dez 23:36 orig.webp
-rw-r--r-- 1 user user 71M  5. Dez 23:35 orig.tif

When converting the TIF-image to JPEG, a quality-factor of 100 will result in the identical file-size of 12M for the new file.

Code:

user@machine:/tmp/photo$ convert -quality 100 orig.tif orig.jpg
user@machine:/tmp/photo$ ls -lh
insgesamt 105M
-rw-r--r-- 1 user user 12M  5. Dez 23:50 orig.jpg
-rw-r--r-- 1 user user 12M  5. Dez 23:42 orig2.webp
-rw-r--r-- 1 user user 12M  5. Dez 23:36 orig.webp
-rw-r--r-- 1 user user 71M  5. Dez 23:35 orig.tif

With lossy compression, e.g. a quality-factor of 80 and without the -lossless parameter to cwebp, important differences will show:

Code:

-rw-r--r-- 1 user user 151K  5. Dez 23:53 compressed2.webp
-rw-r--r-- 1 user user 152K  5. Dez 23:51 compressed.webp
-rw-r--r-- 1 user user 573K  5. Dez 23:51 compressed.jpg
-rw-r--r-- 1 user user  71M  5. Dez 23:35 orig.tif

The smaller file of 151K had been created with cwebp.

Edit 7/12/2021:
Read the man-pages and especially the (short) explanation of the quality-options. For cwebp, their effect depends of your choice between lossy – and lossless compression. In the latter case, it only imposes better compression, will slow down the process and produce bigger files. The advantage is that the image will be of better quality.
Lossy compression will at some point begin to destroy the details; but this has never been different with JPEG. WebP will – in the worst cases and as far as I have seen – introduce arbitrary noise but not create artefacts.

SVG

When you want to convert SVG to WEBP, there is almost no problem to that, apart from the longer time the process will take. But do not be surprised, when the result is not in all details what you expect. I have encountered difficulties with transparent background that were easily avoided by using an intermediate PNG-file.

The file-sizes differ, though, considerably, as an SVG will make a very small WEB-Image.