How to Convert Images to WebP#
Websites have been using PNG and JPEG images for a long time. PNG images are lossless and JPEG images are lossy. PNG images are larger in size than JPEG images. WebP is a new image format that is developed by Google. WebP images are smaller in size than PNG and JPEG images and can be both lossy and lossless. WebP images are supported by all modern browsers nowadays and making it ideal see how you can quickly convert images to WebP and make web sites faster and more efficient to load.
Installing WebP libwebp-tools#
The first step is to install the webp or libwebp-tools package. The package includes the command line tools to convert images to WebP and to view WebP images. The package is available in the default repositories of Ubuntu, Debian, Fedora, and CentOS. On Ubuntu and Debian, the package is called webp.
$ sudo apt install webp
On Fedora and CentOS, the package is called libwebp-tools instead of webp package.
$ sudo dnf install libwebp-tools
Note
For other Linux distributions, you can download the source code from the official website and compile it. See the official documentation for more details.
After installing the webp or libwebp-tools package, you will have the following command line tools available:
anim_diff- tool to display the difference between animation images.anim_dump- tool to dump the difference between animation images.cwebp- webp encoder tool.dwebp- webp decoder tool.gif2webp- tool for converting GIF images to webp.img2webp- tools for converting a sequence of images into an animated webp file.vwebp- webp file viewer.webpinfo- used to view info about a webp image file.webpmux- webp muxing tool.
Converting Images to WebP#
The cwebp command line tool is used to convert images to WebP. By default the cwebp command line tool converts the images to lossy WebP images at a compression quality of 75 and should be sufficient for most of the images.
$ cwebp example.png -o example.webp
The quality of lossy compression can be adjusted with the -q option. The quality of the WebP images ranges from 0 to 100. In th example below we are converting the PNG image to WebP with a quality of 60.
$ cwebp -q 60 example.png -o example.webp
Beside lossy compression, you can also use lossless compression to convert the images to WebP. The lossless compression is slower than the lossy compression. The lossless compression is useful when you want to preserve the quality of the image like when you are converting the images to WebP for archiving purposes.
$ cwebp -lossless example.png -o example.webp
View WebP Images#
WebP images can be viewed using the vwebp command line tool that is included with the libwebp-tools package. The other option to view the WebP images is to use a Chromium-based browser such as Google Chrome or Microsoft Edge.
$ vwebp example.webp
Beside viewing the WebP images, you can also view the metadata of the WebP images using the webpinfo command line tool that is included with the libwebp-tools package.
$ webpinfo example.webp
File: example.webp
RIFF HEADER:
File size: 14164
Chunk VP8 at offset 12, length 14152
Width: 983
Height: 305
Alpha: 0
Animation: 0
Format: Lossy (1)
No error detected.
The reduction in size#
The size reduction of the WebP images depends on the type of the image. A quick test with images of another blog post shows that the size of the WebP images is reduced by 50% to 70% compared to the PNG images.
$ ls -l add-issues-to-projects-*
-rw-r--r--. 1 user01 user01 40653 Mar 22 10:48 add-issues-to-projects-1.png
-rw-r--r--. 1 user01 user01 14164 Mar 22 10:49 add-issues-to-projects-1.webp
-rw-r--r--. 1 user01 user01 94538 Mar 22 10:48 add-issues-to-projects-2.png
-rw-r--r--. 1 user01 user01 34864 Mar 22 10:49 add-issues-to-projects-2.webp