I like to keep my images in the png format, but in this article I will share with you guys some tips on how to convert your images from jpeg or png to the webp open source format.
What is webp
webp is a new image format for the web. I like the fact that it is free, open source and can be easily used in web for fast and efficient loading images.
It provides lossless and lossy compression for images on the web. According to the official google developers website WebP lossless images are 26% smaller in size compared to pngs.
I am a binary geek so I love to experiment with new technologies and I would love to contribute to this project, but I cant and the reason for that is the big amount of knowledge needed for helping in such a big project.
But I can use the tools that come with the pre-compiled packages Linux, Windows OS and Mac OS and help you guys out.
How does webp work
Predictive coding is used by webp to encode an image, the same technology that is used by the VP8 video codec.
What does this mean?
This means that neighboring blocks of pixels are used to predict the values in a block. Then the difference is encoded transformed, quantized and entropy-coded as usual.
I know that this information is very technical and may seem very hard to understand at first, but there is nothing you can't learn.
Browsers that support webp image format
Unfortunately, my web browser that comes with Ubuntu by default does not natively support it due to implementation bugs. At least that's what they say. I think you guys know that I am talking about, I am talking about the Mozilla Firefox web browser.
And of course that Google Chrome and Chromium web browsers natively support the webp image format. Another web browser that I know and supports webp is Opera.
It is time to let your nerdy flourish.
Run the following command. What do you guys see?
apt-cache search webp | grep webp
Here it is what we are looking for.
webp - Lossy compression of digital photographic images
Install the webp tool in your ubuntu machine by using the advanced package tool (apt) like shown below.
sudo apt-get install webp
Download the pre-compiled packages for linux
If the webp package is not included in the official repos of your linux distribution you can download it from the official source.
After the download is finished cd to your Downloads directory and run the following commands to extract the archive.
Use the tar utility to extract the archive.
tar -xvf libwebp-0.4.0-linux-x86-32.tar.gz
Then if you like to use the tools included in the downloaded pre-compiled package cd to bin subdirectory of the libwebp-0.4.0-linux-x86-32 .
The tools you need in order to follow the simple experiments in this article, you need to learn how to use the cwebp and vwebp tools.
Run the ls command inside bin. They should be there.
cwebp, is used to convert images to webp format
vwebp, is used to view images in the webp format
Is there any other way to view webp images in ubuntu linux? Yes, I know another way that I like to share with you guys.
A plugin for Gimp that will allow you to view webp images in ubuntu can be installed via a ppa. Open a new terminal and run the following commands to install this plugin.
sudo apt-add-repository ppa:george-edison55/webp
sudo apt-get update
sudo apt-get install gimp-webp
Then install libwebp with the following command.
sudo apt-get install libwebp
How to use cwebp and vwebp tools
The cwebp tool will help you to convert either PNG, JPEG, or raw Y'CbCr samples to .webp format. There are two important options that you have to remember in order to use this tool, the -q option which is used to specify the quality of the output file and the -o option which is used to specify the output file.
Quality can be float and is in the range of 0 to 100. The default one is 75. In my opinion and from my experience 80 is good.
The lower the quality, the smaller the size of the output file.
In order to convert your images to webp format go to the libwebp-0.4.0-linux-x86-32 directory and run the following command.
./cwebp path_of_your_image -q 80 -o output_name.webp
The above command will produce alot of output, but if you like to keep the process quiet you can use the -quiet option.
Another very useful option to me is the -s option which can be used to specify the width and the height of the output image.
In order to view images that are in webp format you need to use the vwebp (view webp) tool. Run the following command in your terminal and you will be able to view your webp images.