# 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
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
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.
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
Optimized file: 680x480 pixels, 81K
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.