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.

Install WebP on Ubuntu or Debian#
$ sudo apt install webp

On Fedora and CentOS, the package is called libwebp-tools instead of webp package.

Install WebP on Fedora or CentOS#
$ sudo dnf install libwebp-tools


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.

Convert PNG to WebP#
$ 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.

Convert PNG to WebP with reduced quality#
$ 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.

Convert PNG to WebP with lossless compression#
$ 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.

View WebP Image#
$ 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.

View the metadata of a WebP image#
$ webpinfo example.webp
File: example.webp
  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.

Size of converted PNG to WebP images with reduced quality#
$ 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