WebP is a new image format that provides a lossless and lossy compression on PNG and JPEG file types. It was developed by Google resulting in up to 80% smaller image size. It is supported on all most all modern browser versions. You can use Nginx and Apache to determine if this format is supported by the browser Agent then server the image in a new format instead of the original image. This file format also supports animated images which can also result in large reductions in image sizes. Converting to a smaller size file will improve load times and SEO scores and improve the end user experience of viewing your site. This guide is a tutorial to convert images to this format via command line utilities on a Linux server.
Install WebP Tools
Change to the src directory to download the packages:
cd /usr/src
You can retrieve the packages from Googles repository. We are going to get the x86 64 bit linux packages in this example
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0-rc3-linux-x86-64.tar.gz
Untar the files
tar xfvz libwebp-0.6.0-rc3-linux-x86-64.tar.gz
Go in to the directory:
cd libwebp-0.6.0-rc3-linux-x86-64
This will provide the following binaries in the bin directory
cwebp – WebP encoder tool
dwebp – WebP decoder tool
vwebp – WebP file viewer
webpmux – WebP muxing tool
gif2webp – Tool for converting GIF images to WebP
Convert Images to WebP
First you will want to export the bin directory to your path:
PATH=$PATH:”/usr/src/libwebp-0.6.0-rc3-linux-x86-64/bin”
Then export the PATH variable:
export PATH
Now if you type cwebp it should work as a valid command
# cwebp Usage: cwebp [options] -q quality input.png -o output.webp where quality is between 0 (poor) to 100 (very good). Typical value is around 80. Try -longhelp for an exhaustive list of advanced options.
Now you can convert images to webp formatting using the cwebp command:
cwebp [options] -q quality input.jpg -o output.webp
The quality can be between 0 (poor) and 100 (very good). You will need to determine the quality you are looking for, the lower the quality the more reduction in size you will also achieve. You will want to replace intput.jpg with the input file and output.webp with the output file.
Once you have converted your images you will also need to detect browser compatibility to server the appropriate image as not all browsers support the WebP format for images at this time. We will be covering how to do this selection in later guides based on individual web server packages.