In the next article we will take a look at how convert images to WebP format. If you dedicate yourself to creating web pages, you will already know that one of the best practices to optimize the performance of your website is to use compressed images. In this article, we are going to see how to use the WebP format. With it we can create compressed and quality images to use on our web pages.
WebP is a relatively new image format that offers exceptionally lossless and lossy compression for images on the web. This format has been designed by google. To use it, you will need to download pre-compiled utilities for Gnu / Linux, Windows, and Mac OS X.
WebP is a new image format that provides lossless and lossy compression for PNG and JPEG files. With this format we will achieve an image size up to 34% smaller. Is compatible with Google Chrome and Opera. We can use Nginx and Apache to determine if this format is supported by the Browser Agent and then serve the image in a new format instead of the original image. This file format also supports animated images, which can lead to large reductions in image sizes.
With the WebP format, webmasters and web developers can create smaller, richer images that make the web faster.
Install the WebP tool on Ubuntu
Fortunately, the webp package is present in the official Ubuntu repositories. We can install it using the APT package manager. We will only have to open a terminal (Ctrl + Alt + T) and write in it:
sudo apt install webp
We can also choose Ubuntu and other Gnu / Linux distributions for download webp package from google repository. For this we will use the command wget by opening a terminal (Ctrl + Alt + T) and typing:
wget -c https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.1-linux-x86-32.tar.gz
The next thing we will do is extract the file and move to the directory of the extracted package as follows:
tar -xvf libwebp-0.6.1-linux-x86-32.tar.gz cd libwebp-0.6.1-linux-x86-32/ cd bin/ ls
Built-in tools
As you can see in the screenshot above, the package contains a precompiled library (libwebp) to add various web utilities listed below:
- anim_diff → It is a tool for show the difference between animation images.
- anim_dump → This is a tool for dump the difference between animation images.
- cwebp → It is a tool for webp encoding.
- dwebp → This is a tool for webp decoding.
- gif2webp → A tool for convert GIF images to webp.
- img2webp → Tools for convert an image sequence to an animated web file.
- vwebp → This is a webp file viewer.
- webpinfo → This tool is used to view information about a file image webp.
- webpmux → One mux tool from webp.
We will be able to see all the options for any of the previous tools by executing them without any argument or using the -longhelp flag. For example: uterine
cwebp -longhelp
Finally, if we want to run the previous programs without writing their absolute paths, we will only have to add the directory ~ / libwebp-0.6.1-linux-x86-32 / bin our PATH environment variable in our ~ / .bashrc file. To do this we will execute in the terminal (Ctrl + Alt + T):
vi ~/.bashrc
In the last of the file we will add:
export PATH=$PATH:~/libwebp-0.6.1-linux-x86-32/bin
When finished, we will only have to save the file and close it. Upon leaving we will open a new terminal window and we can now run all web programs like any other system command.
Convert an image to webp
To convert an image to webp, we can use cwebp tool. In it the parameter -q defines the output quality and -o specifies the output file. Here's an example:
cwebp -q 80 ubunlog.jpeg -o ubunlog.webp
View a converted image
Once the conversion is finished, we can view webp image using vwebp tool. As you can see in the capture, the same image has certain differences compared to the one in jpeg format.
vwebp ubunlog.webp
WebP is just one of many products that stem from Google's ongoing efforts to make the web faster. If we want to know more about this image format, we can visit the WebP project website.