Image optimization and compression with webp

# webp image format

# webp - short introduction

Web is an image format, introduced by Google, more than 10 years ago. Web developers and designers have the main advantage over webp, because it achieves a much smaller image size, while preserve the quality. Claims from Google suggest, that webp can achieve x3 (times) smaller file size, compared to .png and 34% smaller file size, than .jpeg.

Currently webp is supported from the major browsers, including: Chrome (v32+), Firefox (v65+), Edge (v18+), Opera (11.10+), Chrome Android (v25+), Android Native Browser (4.2+).

Webp can also replace the well-known .git format. Not only can create animated images, but with more RGB colors (24 bit) and more alpha channels (8), compared to .gif (8bit colors and 1 alpha channel)

# Installation

Pre-compiled binaries: Download Page (opens new window)

Note, the above are compiled with GLIBC 2.29 and you may have problems, having older lib on your system. You can compile webp toolset yourself: see below ...

# Compiling from Source (Linux)

Requiremets:

apt-get install build-essential libpng-dev libjpeg-dev freeglut3-dev
  • freeglut3-dev is needed for vwebp (webp image viewer)

Download source (opens new window)

cd libwebp-x.x.x
./configure --enable-everything --enable-libwebpdemux
  • --enable-libwebpdemux is needed for vwebp (webp image viewer)
make
make install

If all went ok, you must have:

cwebp - convert .jpg, .png, .tiff to .webp

dwebp - convert .webp to .png

vwebp - .webp viewer

webpmux - create animated .webp images from other .webp files, or extract frames from other animated .webp

gif2webp - .gif to .webp

img2webp - create animated .webp from .png, .jpg, .jpeg, .tiff and other files

webpinfo - show .webp info, detect file errors etc

TIP

If you set --prefix, dont forget to run:

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/path-to-your-build-lib-folder/lib

Otherwise, you may receive error msg, similar to this:

cwebp: error while loading shared libraries: libwebp.so.7: cannot open shared object file: No such file or directory

# Now, lets make some tests ...

# JPG to WEBP

This is the original .jpg image - 1024x768 pixels, 228K original.jpg

jpg to webp original image

Lets run that through basic cwebp optimization, with no additional arguments

cwebp original.png -o optimized.wepb

-o to set output file

Optimized image: 94K optimized.webp

jpg to webp optimized image

Wow, more than 2 times file-size optimization.

Lets see how much of a detail we lost ...

Not much lost, not much at all!!

Another example, but this time with really big and detailed image:

WARNING

This next original image is really huge 9.2 MB, so i will not show it, but just link it.

You can compare both original and optimized, by clicking on the links.

Original 9.2M

Optimized 2.0M

Best optimization file-size/quality i was able to produce with:

cwebp -m 6 -qrange 30 60 -sns 100 original.jpg -o optimized.webp

# PNG to WEBP

Dry cwebp command run, without any parameters:

Original file: 680x480 pixels, 419K

png to webp original image

Optimized file: 680x480 pixels, 81K

png to webp optimized image

Again very good result!


Best i did for PNG to WEBP is using:

cwebp -m 6 -qrange 30 50 -alpha_q 0 tree_original.png -o tree_optimized_2.webp

Here is the result: Original: 419K Optimized: 34K


Pretty usable!


# Additional notes:

Adoption:

WebP is already supported in alot of brawsers and applications and packages. You can use it right away in the major browsers, others (more exotic) are still unable to display it, or with limitations (Safari). One way to overcome this is by using <picture> tag in html pages. <picture> allow to specify a fallback image:


<picture>
  <source type="image/webp" srcset="file.webp">
  <img src="fallbackimage.jpg" alt=""> <!-- fallback image if .webp is not supported -->
</picture>

Another issue with .webp, are the user applications supporting it. Cannot speak for Windows , but on linux (Ubuntu) .webp is not supported out of the box. Good news is, that there are quite a lot Internet sources, to add support for your installation. Examples:

gThump - often quoted for its out-of-the-box webp support.

sudo apt-get install gthump

For Image Viewer: webp-pixbuf-loader

sudo add-apt-repository ppa:krifa75/eog-ordissimo
sudo apt update
sudo apt install webp-pixbuf-loader

imlib2-webp

For Thunar thumbnails:

XFCE Forum Post (opens new window)

the list is far from complete (just some notable options).

# Conclusion

We should look at webp as an new, exotic image format. For me it will be my new best friend for web assets, sprites etc.

I am very surprised with the file-size optimization, using cwebp and the neglectable quality loss of the converted images. No matter png or jpg images, with the right settings, one can achieve x2 - x4 size optimization and images still be usable for web. 90% of the browsers currently support it and there are lots of options for desktop applications.

I am planning to use webp not only for web, but also to optimize (compress) all my family photos and keep them as .webp, while use less disk space.

Not to mention its animation capabilities, which were not discussed in this post.

With this post i only "scratch the surface" re: webp and did not had the intention to describe all capabilities and options of it. For sure, there is much more to be said (pros and cons) and much more tests and comparisons to be made. Laybe another time.