Install and Serve WebP Images on Ubuntu

Posted on June 8th, 2020

WebP is a free, open-source image format based on the VP8 video format. Google developed it in 2010, and since then, most of the websites and mobile applications use this image format to establish at a fast pace. Natively, Google Chrome and Opera are the two browsers that support the WebP format. This format supports both lossless and lossy image compressions, such as animations.

The advantage of using WebP as the image format is its smaller file size. The smaller file size of WebP images makes the website load faster which is extremely important and also reduces the bandwidth usage. If your website is experiencing any issues with its performance or increased traffic, then it is essential to optimize the page performance. For the same, we can convert all formats of the website images into WebP format.

In this knowledge base, you will learn the steps to install the command-line WebP tool (cwebp) and the steps to convert all the images to WebP format.

Prerequisites

  1. An ssh user with sudo privileges.
  2. A server installed with the LAMP stack. To know more about how to install a LAMP stack on Ubuntu, refer to https://www.interserver.net/tips/kb/installing-a-lamp-stack-on-ubuntu-debian/.

Steps to Install cwebp and Prepare the Image Directory

First, we need to install the software that helps us convert the images. And then we will create a directory with images for testing. The cwebp is a command-line utility that helps compress images into the ‘.webp’ format. To install the cwebp command-line utility on your Ubuntu server, follow these steps:

Log in to the server as an ssh user with sudo privileges.

Now, update the repositories by executing the following command.

$ sudo apt update

Execute the following command to install WebP on your server.

$ sudo apt install webp

After that, create a new image directory named ‘webp’ in the Apache root directory.

$ sudo mkdir /var/www/html/webp

Then, change the ownership of the above-created directory to the ssh user ‘sshusr’.

$ sudo chown sshusr: /var/www/html/webp

To test the cwebp command-line utility, we can download free PNG and JPEG images using wget. The wget utility is in-built in the Ubuntu operating system so you don’t have to install it. Execute the following commands to download the test images using wget.

$ sudo wget -c "https://commons.wikimedia.org/wiki/Main_Page#/media/File:Badaling_China_Great-Wall-of-China-01.jpg?download" -O /var/www/html/webp/chinawall.jpg
$ sudo wget -c "https://www.freepngimg.com/thumb/tree/12-tree-png-image-download-picture.png" -O /var/www/html/webp/tree.png

Then, switch to the ‘/var/www/html/webp’ directory.

$ sudo cd /var/www/html/webp

Compress Image Files into WebP Format With cwebp

We can convert the PNG and JPEG images to the “.webp” format using the command-line utility of WebP.

The general syntax of the cwebp command to convert the image format is:

$ cwebp image.jpg -o image.webp

The -o option species the path where you want to save the converted WebP file.

Since we are already in the ‘/var/www/html/webp’ directory, run the following command to convert the JPG file into the WebP format in the same directory.

$ sudo cwebp -q 100 chinawall.jpg -o chinawall.webp

The -q in the above given command specifies the image quality that needs to get retained after the conversion. Once converted, you can check the drastic size decrease of the file using the ls command.

$ sudo ls -lh chinawall.jpg chinawall.webp
-rw-r--r-- 1 sshusr sshusr 7.4M Jan 18 23:36 chinawall.jpg
-rw-r--r-- 1 sshusr sshusr 3.9M Jan 23 16:46 chinawall.webp

To retain the complete data of the image during the compression, use the ‘-lossless’ option in the place of -q. We mainly use this option to convert the PNG file to maintain its quality. To convert the PNG file for testing, execute the following command.

$ sudo cwebp -lossless tree.png -o tree.webp

So, this is how you can convert a single jpg or png file to webp format. Now, Let’s see how to do that in bulk!

Convert all the JPEG and PNG Images in a Directory

It is always difficult to convert all the JPEG and PNG images into a directory manually. So, we will use a shell script to convert all the JPEG files to WebP format with 90% quality and to convert the PNG files to lossless WebP format.

First of all, Create a script named ‘webp-convert.sh’ in the home directory using any of the text editors.

$ sudo nano ~/webp-convert.sh

Then, add the following lines into the file.

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$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/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

This script we just created does the following:

  • Create a webp_path variable
  • Check if the .webp version already exists for the image.
  • Convert the file if it does not exist.

After that, save and close the file. Then, make the script executable by using the following command.

$ sudo chmod a+x ~/webp-convert.sh

Suppose, we have added some more JPEG and PNG files in the ‘/var/www/html/webp’ directory. Then, run the script in that directory to check if the script works.

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

 

Serve WebP Images to Visitors Using HTML Elements

First, we need to convert all the images in the directory to the .webp format. Then, we can use the HTML5 elements ‘(<picture>)’ to the server the images to the visitors in the supported browsers. For the same, follow the below step:

First, create an HTML file in the directory.

$ sudo nano /var/www/html/webp/picture.html

Then, add the following code inside the html file to display ‘tree.webp’ on the website on supported browsers.

<picture>
    <source srcset="tree.webp" type="image/webp">
    <img src="tree.png" alt="Site Logo">
</picture>

Save and close the file.

After that, you can check if the .webp format of the image gets served to the visitors, browse the following URL.

http://<server_IP_address>/webp/picture.html

 

Conclusion

WebP is a free, open-source image format based on the VP8 video format. The use of WebP image formats on a website helps to reduce the bandwidth usage and improves the performance of the website. We hope that this knowledge base was helpful to you. Please comment below for any questions or queries. If you are an InterServer customer, please reach out to our support team for further help.

Leave a Reply