How to convert WebP images to speed up your website

WebP is an open image format developed by Google in 2010 based on the VP8 video format. Since then, the number of websites and mobile applications using the WebP format has increased dramatically.

Google Chrome and Opera both support the WebP format in a native way, and since these browsers account for about 74% of web traffic, users can access websites more quickly if these sites use WebP images. Recently version 65 of Firefox finally supports the WebP format.

The WebP format supports image compression with and without loss, including animation. Its main advantage over other image formats used on the web is its much smaller file size, which speeds up web page loading and reduces bandwidth usage. The use of WebP images can result in a significant increase in page speed. If your app or website is experiencing performance issues or increased traffic, converting your images can help optimize page performance.

In this tuto, you will use the cwebp command line tool to convert images to WebP format, creating scripts that will convert images into a specific directory.

Finally, you'll also explore two ways to deliver WebP images to your visitors.

Note a rather important point nowadays (Greta Inside), which says saving space and speed to serve says an ecological gesture. Indeed, there is no point in serving crazy images except in specific cases such as photographers for example. And again with this webP image format it remains totally convincing. It's up to you!

Prerequisite

Working with WebP images does not require any special distribution, but we will show you how to work with the appropriate software on Ubuntu 16.04 and CentOS 7. To follow this tuto, you're going to need to:

• A server configured with a sudo non-root user.
• Apache installed on your server.
• mod_rewrite installed on your server.

Installation of cwebp and preparation of the image directory

In this section, we will install software to convert images and create a directory with test images.

On Ubuntu 16.04, you can install cwebp, a utility that compresses images in .webp format, typing:

sudo apt-get update
sudo apt-get install webp

On CentOS 7, type:

sudo yum install libwebp-tools

To create a new directory of images called webp in the Apache web root (located by default in / var / www / html), type:

sudo mkdir / var / www / html / webp

Change the ownership of this directory by your non-root username: "jul" here:

sudo chown jul: / var / www / html / webp

To test the commands, you can download free JPEG and PNG images using wget. This tool is installed by default on Ubuntu 16.04; If you use CentOS 7, you can install it by typing:

sudo yum install wget

Then download the test images using the following commands:

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg

wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg

wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

Note: These images are available for use and redistribution under the Creative Commons Attribution-ShareAlike license.

Most of your work in the next step will be found in the directory/var/www/html/webp, in which you can move by typing:

cd/var/www/html/webp

With the test images in place and the Apache web server, mod_rewrite and cwebp installed, you're ready to move on to image conversion.

Testing compression and conversion of images to WebP with CwebP

The dissemination of .webp images to visitors to the site necessarily requires .webp versions of the image files. In this step, you will convert the JPEG and PNG images to .webp format using cwebp. The syntax of the command looks like this:

cwebp image.jpg -o image.webp

Option -o specifies the path to the WebP file.

Since you are still in the directory / var / www / html / webp, you can run the following command to convert image1.jpg into image1.webp and image2.jpg in image2.webp:

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

The definition of the quality factor -q to 100 retains 100% of the quality of the image; If it is not specified, the default is 75.

Then inspect the size of the JPEG and WebP images using the ls command- . The option -l will display the long list format, which includes file size, and the -h option will ensure that they print man-readable sizes:

ls -lh image1.jpg image1.webp image2.jpg image2.webp


Output
-rw-r--r-- 1 jul jul 7.4M Jan 18 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 16:46 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 16:59 image2.webp

The ls command shows that the image size1.jpg is 7.4M, while the imagesize1.webp is 3.9M. The same goes for image2.jpg (16M) and image2.webp (7M). These files are almost half their original size!

To record the complete and original data of the images during compression, you can use the -lossless option instead of -q. This is the best option to maintain the quality of PNG images. To convert the uploaded PNG image from Step 1, type:

 cwebp -lossless logo.png -o logo.webp

The following command shows that the loss-free WebP image size (60KB) is about half the size of the original PNG image (116KB):

 ls -lh logo.png logo.webp

Output
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 16:42 logo.webp

The converted WebP images in the directory/var/www/html/webp are about 50% smaller than their JPEG and PNG counterparts. In practice, compression rates may differ depending on factors such as the compression rate of the original image, the file format, the type of conversion (with or without loss), the percentage of quality and your operating system. When you convert more images, you may see changes in conversion rates related to these factors.

Converting JPEG and PNG images into a directory

Simply write a script to simplify the process of converting images to WebP format. We start with the idea of converting a batch of JPG image to 90% quality, while also converting PNG files into WebP images without loss.

So use your favorite editor, for my part it will be VI (the old school) to create a script webp-convert.sh in your home.

 Cd

 viwebp-convert.sh

The first line of your script will be:

find $1 -type f-and-and-( (-iname "-.jpg" -o -iname ".jpeg")

The line includes:

find: This command will search for files in a specified directory.
$1: This positional setting specifies the path of the image directory, extracted from the command line. In the end, this makes the location of the directory less dependent on the location of the script.
-type f: This option tells find to search only for normal files.
-iname: this test compares file names to a specified model. The case-insensitive -iname test tells find to search for any file name ending with .jpg or .jpeg.
-o: this logical operator asks the find command to list the files that correspond to the first test -iname (-iname ".jpg") or the second (-iname ".jpeg").
(): Parentheses around these tests, as well as the operator-and, ensure that the first test (i.e. -type f) is always run.

The second line of the script will convert the images to WebP using the -exec setting. The general syntax of this setting is the command -exec." The string is replaced by each file the command has visited, while the; tells find where the order ends:

find $1 -type f-and-and-( (-iname "-.jpg" -o -iname ".jpeg")

-exec bash -c 'commands'

In this case, the -exec setting will require multiple commands to search for and convert images:

bash: This command will run a small script that will create the .webp version of the file if it doesn't exist. This script will be transmitted to bash as a chain using the -c option.
'commands': This reserved space is the script that will make .webp versions of your files.
The script inside the "commands" will do the following:

Create a webp_path variable.
Test whether the .webp version of the file exists or not.
Create the file if it doesn't exist.
The little script looks like this:

webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>

 If[ ! -f "$webp_path" ]; Then 

cwebp -quiet -q 90 "$0" -o "$webp-path";

 fi;

Elements of this little script include:

webp_path: This variable will be generated using sed and the corresponding file name of the bash command, indicated by the $0 positional setting. A channel here (<) passera ce nom à sed. passera="" ce="" nom="" à=""></) passera ce nom à sed.>
if:[ ! -f "$ webp_path"] This test will determine if a file named "$ webp_path" already exists, using the logical operator not (!).
cwebp: This command will create the file if it doesn't exist, using the -q option to not print the output.

With this little script instead of the reserved space "commands," the full script to convert JPEG images will now look like this:

converting JPEG images
find $1 -type f-and-" (-iname ".jpg" -o -iname ".jpeg"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -q 90 "$0" -o "$webp-path";
fi;' {} ;

To convert PNG images into WebP, we will adopt the same approach, with two differences: First, the iname pattern in the find command will be ".png". Second, the conversion command will use the -lossless option instead of the quality -q option.

The finished script looks like this:

'!/bin/bash'

converting JPEG images
find $1 -type f-and-" (-iname ".jpg" -o -iname ".jpeg"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -q 90 "$0" -o "$webp-path";
fi;' {} ;

Converting PNG images
find $1 -type f-and-iname ".png"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -lossless "$0" -o "$webp-path";
fi;' {} ;

Save the file and leave the editor.

Then let's put the script webp-convert.sh into practice using the directory files/var/www/html/webp. Make sure the script file is executable by running the following command:

chmod a-x/webp-convert.sh

Run the script on the images directory:

./webp-convert.sh/var/www/html/webp

Nothing happened! This is because we have already converted these images to step 2. In the future, the webp-convert script will convert images when we add new files or delete .webp versions. To see how this works, delete the .webp files we created in step 2:

rm /var/www/html/webp/.webp

After removing all .webp images, rerun the script to make sure it works:

./webp-convert.sh/var/www/html/webp

The ls command will confirm that the script has correctly converted the images:

ls-lh /var/www/html/webp

Output
-rw-r--r-- 1 jul jul 7.4M Jan 28 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 17:13 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 17:13 image2.webp
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 17:13 logo.webp

Here's this script will allow you at first such an excalibur level 1 reel to transform/convert your images to WebP format in an automated way.

It is possible to deepen this function, and convert to automatic mode by regularly checking the directory. I wouldn't deal with the subject today but maybe in a time soon.