Abdullatif Eymash and Kathleen Juell

The author selected the Apache Software Foundation to receive a donation as part of the Write for DOnations program.

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 grown at a fast pace. Both Google Chrome and Opera support the WebP format natively, and since these browsers account for about 74% of web traffic, users can access websites faster if these sites use WebP images. There are also plans for implementing WebP in Firefox.

The WebP format supports both lossy and lossless image compression, including animation. Its main advantage over other image formats used on the web is its much smaller file size, which makes web pages load faster and reduces bandwidth usage. Using WebP images can lead to sizeable increases in page speed. If your application or website is experiencing performance issues or increased traffic, converting your images may help optimize page performance.

In this tutorial, you will use the command-line tool cwebp to convert images to WebP format, creating scripts that will watch and convert images in a specific directory. Finally, you’ll explore two ways to serve WebP images to your visitors.

Working with WebP images does not require a particular distribution, but we will demonstrate how to work with relevant software on Ubuntu 16.04 and CentOS 7. To follow this tutorial you will need:

A server set up with a non-root sudo user. To set up an Ubuntu 16.04 server, you can follow our Ubuntu 16.04 initial server setup guide. If you would like to use CentOS, you can set up a CentOS 7 server with our Initial Server Setup with CentOS 7 tutorial.

Apache installed on your server. If you are using Ubuntu, you can follow step one of How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 16.04. If you are using CentOS, then you should follow step one of How To Install Linux, Apache, MySQL, PHP (LAMP) stack On CentOS 7. Be sure to adjust your firewall settings to allow HTTP and HTTPS traffic.

mod_rewrite installed on your server. If you are using Ubuntu, you can follow our guide on How To Rewrite URLs with mod_rewrite for Apache on Ubuntu 16.04. On CentOS 7 mod_rewrite is installed and activated by default.

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

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

On CentOS 7, type:

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

Change the ownership of this directory to your non-root user sammy:

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

Next, download the test images using the following commands:

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

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

With the test images in place, and the Apache web server, mod_rewrite, and cwebp installed, you are ready to move on to converting images.

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

The -o option specifies the path to the WebP file.

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

Setting the quality factor -q to 100 retains 100% of the image quality; if not specified, the default value is 75.

Next, inspect the size of the JPEG and WebP images using the ls command. The -l option will show the long listing format, which includes the size of the file, and the -h option will make sure that ls prints human readable sizes:

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

To save the complete, original data of images during compression, you can use the -lossless option in place of -q. This is the best option to maintain the quality of PNG images. To convert the downloaded PNG image from step 1, type:

The following command shows that the lossless WebP image size (60K) is approximately half the size of the original PNG image (116K):

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

Writing a script will simplify the conversion process by eliminating the work of manual conversion. We will now write a conversion script that finds JPEG files and converts them to WebP format with 90% quality, while also converting PNG files to lossless WebP images.

Using nano or your favorite editor, create the webp-convert.sh script in your user’s home directory:

The first line of the script will look like this:

This line has the following components:

The second line of the script will convert the images to WebP using the -exec parameter. The general syntax of this parameter is -exec command {} \;. The string {} is replaced by each file that the command iterates through, while the ; tells find where the command ends:

In this case, the -exec parameter will require more than one command to search for and convert images:

The script inside 'commands' will do the following things:

The smaller script looks like this:

At this point, you have converted the JPEG and PNG files in /var/www/html/webp to the WebP format, and set up watchers to do this work using the webp-watchers.sh script. It is now time to explore options to deliver WebP images to your website visitors.

In this step, we will explain how to serve WebP images with HTML elements. At this point there should be .webp versions of each of the test JPEG and PNG images in the /var/www/html/webp directory. We can now serve them to supporting browsers using either HTML5 elements () or the mod_rewrite Apache module. We’ll use HTML elements in this step.

The element allows you to include images directly in your web pages and to define more than one image source. If your browser supports the WebP format, it will download the .webp version of the file instead of the original one, resulting in web pages being served faster. It is worth mentioning that the element is well-supported in modern browsers that support the WebP format.

The element is a container with and elements that point to particular files. If we use to point to a .webp image, the browser will see if it can handle it; otherwise, it will fall back to the image file specified in the src attribute in the element.

Let’s use the logo.png file from our /var/www/html/webp directory, which we converted to logo.webp, as an example with . We can use the following HTML code to display logo.webp to any browser that supports WebP format, and logo.png to any browser that does not support WebP or the element.

Create an HTML file located at /var/www/html/webp/picture.html:

Add the following code to the web page to display logo.webp to supporting browsers using the element:

Save and close the file.

To test that everything is working, navigate to http://your_server_ip/webp/picture.html. You should see the test PNG image.

Now that you know how to serve .webp images directly from HTML code, let’s look at how to automate this process using Apache’s mod_rewrite module.

If we want to optimize the speed of our site, but have a large number of pages or too little time to edit HTML code, then Apache’s mod_rewrite module can help us automate the process of serving .webp images to supporting browsers.

First, create an .htaccess file in the /var/www/html/webp directory using the following command:

The ifModule directive will test if mod_rewrite is available; if it is, it can be activated by using RewriteEngine On. Add these directives to the .htaccess:

The web server will make several tests to establish when to serve .webp images to the user. When a browser makes a request, it includes a header to indicate to the server what the browser is capable of handling. In the case of WebP, the browser will send an Accept header containing image/webp. We will check if the browser sent that header using RewriteCond, which specifies the criteria that should be matched in order to carry out the RewriteRule:

Everything should be filtered out but JPEG and PNG images. Using RewriteCond again, add a regular expression (similar to what we used in the previous sections) to match the requested URI:

The (?i) modifier will make the match case-insensitive.

To check if the .webp version of the file exists, use RewriteCond again as follows:

Finally, if all previous conditions were met, RewriteRule will redirect the requested JPEG or PNG file to its associated WebP file. Notice that this will redirect using the -R flag, rather than rewrite the URI. The difference between rewriting and redirecting is that the server will serve the rewritten URI without telling the browser. For example, the URI will show that the file extension is .png, but it will actually be a .webp file. Add RewriteRule to the file:

At this point, the mod_rewrite section in the .htaccess file is complete. But what will happen if there is an intermediate caching server between your server and the client? It could serve the wrong version to the end user. That is why it is worth checking to see if mod_headers is enabled, in order to send the Vary: Accept header. The Vary header indicates to caching servers (like proxy servers) that the content type of the document varies depending on the capabilities of the browser which requests the document. Moreover, the response will be generated based on the Accept header in the request. A request with a different Accept header might get a different response. This header is important because it prevents cached WebP images from being served to non-supporting browsers:

Finally, at the end of the .htaccess file, set the MIME type of the .webp images to image/webp by using the AddType directive. This will serve the images using the right MIME type:

This is the final version of our .htaccess file:

Note: You can merge this .htaccess with another .htaccess file, if it exists. If you are using WordPress, for instance, you should copy this .htaccess file and paste it at the top of the existing file.

Let’s put what we have done in this step into practice. If you have followed the instructions in the previous steps, you should have logo.png and logo.webp images in /var/www/html/webp. Let’s use a simple tag to include logo.png in our web page. Create a new HTML file to test the setup:

Enter the following HTML code in the file:

Save and close the file.

When you visit the web page using Chrome by visiting http://your_server_ip/webp/img.html, you will notice that the served image is the .webp version (try opening the image in a new tab). If you use Firefox, you will get a .png image automatically.

In this tutorial, we have covered basic techniques for working with WebP images. We have explained how to use cwebp to convert files, as well as two options to serve these images to users: HTML5’s element and Apache’s mod_rewrite.

In order to customize the scripts from this tutorial, you can look at some of these resources:

Using the WebP format for your images will reduce file sizes by a considerable amount. This can lower bandwidth usage and make page loads faster, particularly if your web site uses a lot of images.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

author

editor

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

This comment has been deleted

Hello,

Is it possible to follow this procedure on the nginx webserver? is there a tutorial about it?

thank you very much

The .htaccess code contains a logical error.

The Vary header is only set when the Client sends HTTP_ACCEPT image/webp.

But the Vary header should also be sent if the client does not accept image/webp because if not, the caching system will store png/jpg in the cache and overwrite the webp version even for the clients that have webp enabled…

You can observe the error when you have caching enabled on your server and follow these steps:

Step 1. Call website: Webp images are served

Step 2. Deactivate webp in Firefox (about:config, image.http.accept to “/”) and reload wesite: Webp images are not served (as expected)

Step 3. Reactivate webp in Firefox (about:config, image.http.accept to “image/webp,/”) and reload website: webp images are still not served

The Vary header should be sent for all images, not only when the client accepts webp:

Thank you!How can I convert image.jpg to image.jpg.webp?

This does not work for my use case, Apache2 2.4.41 running on Ubuntu 18.04.4 (64-bit) with PHP 7.4.4, when aliased directories are used. I really do not know if it did. First time trying it, and it does not work.

Yes, I emptied my cache first. Yes, I restarted the server first. Still always getting the PNG or JPEG JFIF file, instead of the WebP files. Yes, both browsers understand image/webp. I can load a WebP file directly. Yes, I did check the files served, (size and nature), and they are the big JPEG JFIF or PNG files, and not the smaller WebP files. I even had a different image with the same filename, ( testimg.jpg and testimg.webp, but of different actual images), so that I can tell them apart. (Both images are fuchsia text on a dark blue/green gradient. In one, the text says, “This is a JPEG JFIF image testimg.jpg”, (with the text box on a blue background), while the other says, “This is a WebP image testimg.webp”, (with the text box on a transparent bg).

Indeed,

works with both browsers, to serve the WebP files specified. If the two first lines are removed, I get the JPEG files.

After intense reading, the issue has become clear. This solution only works with images within the document root, and sub-directories. On my server, I have several sites, and many of my images are served from a common image directory, in an aliased location.

[BEGIN unnecessary detail for clarity’s sake ]

So my server root, ($SR), is at [ /var/www ], with my main document root, ($DR), [ {http}://Phenobuntu/ ], at [ /var/www/html ], and I have other sites at [ $SR/wp ], [ $SR/drpl ], [ $SR/Projects/GanttProject ]. To top it off, the last three sites are Aliased as, [ {http}://wpbuntu/ ], [ {http}://drplbuntu/ ], and [ {http}://gnttbuntu/ ] respectively.In addition to this, I have my common CSS, PHP scripts, and images, in different directories, as, [ $SR/src/css ], [ $SR/src/theme ], and [ $SR/src/image ], respectively, (so as to maintain a consistent look across sites). These are aliased as, [ /css ], [ /theme ], and, [ / image], respectively, for each site.

Therefore, [ {http}://Phenobuntu/image/testimg.jpg ], will reference precisely the same image as, [ {http}://wpbuntu/image/testimg.jpg ], [ {http}://drplbuntu/image/testimg.jpg ], and [ {http}://gnttbuntu/image/testimg.jpg ] but, [ {http}://phenobuntu/index.html ], [ {http}://wpbuntu/index.html ], [ {http}://drplbuntu/index.html ], and [ {http}://gnttbuntu/index.html ], are all different files.

This solution, (as with all other solutions I have tried), all assume that all images are being served from the same directory —or sub-directory— as ${DOCUMENT_ROOT}. In my case, this is not so. It will work for files in the [ wpbuntu/wp-content/uploads/ ] directories and subs, or at, [ phenobuntu/iso/image/ ] but not for images at [ wpbuntu/image/ ] nor, [ phenobuntu/image/ ] directories and subs, et al.

[/END unnecessary detail for clarity’s sake ]

So I needed to come up with a solution which works globally, for aliased directories. That is why the solution was not working for me. The solution was incomplete for all use cases.

This was the solution I figured out for Apache2 version ≥2.4.35, where aliases are being used. The code has intensive internal documentation.

This .htaccess file has to go in all document root directories involved. That is, in my case, I need to put it in [ $SR/html ], [ $SR/wp ], [ $SR/drpl ], [$SR/joomla ], [ $SR/Projects/GanntProject ], and [ SR$/src/image ].

For existing redirects in existing .htaccess files, place the snippet at the top of the file, to occur before other redirects. E.g., for Wordpress, place this snippet above the line marked, “# BEGIN WordPress” in the .htaccess file.

Hi,

Nice and helpful article, thank you!

What will happen if we don’t convert previous images and we just want to use it for new images, so if a previous jpg image doesn’t have the any related webp image, will this code will still server the jpg image?

Thank you!

Also check out this solution:https://github.com/rosell-dk/webp-convert/blob/master/docs/webp-on-demand/webp-on-demand.md

To make the Vary header work on LiteSpeed too, do this:

Hi,Very helpful article - Thank you!Can you add all the steps to achieve the same redirect (.jpg to .webp) with Nginx?As you know it is not that easy to convert an .htaccess file to nginx syntax.regardsNikolay Kabaivanov

This comment has been deleted