Introduction
WebP is a modern image file format, free and open-source, developed by Google to support lossy and lossless compression, aiming to optimize image display on websites.
Images are responsible for the majority of data transferred on most websites, making image file size a crucial factor for fast and smooth browsing, especially on mobile devices.
Images in WebP format are significantly smaller in size than those in JPG format, even at similar levels of lossy compression, while maintaining the same visual quality. Additionally, unlike JPG, WebP supports transparency (alpha channel), a feature previously exclusive to formats like PNG, but with the advantage of generating considerably smaller files.
This combination of smaller file size and greater flexibility makes WebP an excellent choice for improving the performance and quality of websites on the internet.
Installing cwebp on Linux
The cwebp command will be used for image conversion. To install it, run the appropriate command according to your distribution:
# bash
On Ubuntu/Debian: sudo apt install webp On Fedora: sudo dnf install webp On Arch Linux: sudo pacman -S webp On Slackware: sudo slackpkg install libwebp
Converting Images to WebP
The cwebp command supports image conversion from PNG, JPEG, TIFF, and WebP formats. It is worth noting that animated PNG and WebP files are not supported.
Converting a JPG image to WebP:
# bash
cwebp -q 80 image-name.jpg -o image-name.webp
Converting a PNG image to WebP:
# bash
cwebp -q 80 image-name.png -o image-name.webp
In the examples above:
- -q 80 Defines the quality of the final WebP image, with values ranging from 0 to 100.
- -o Specifies the name of the WebP file to be generated after conversion.
Practical Example
In this example, we will convert two images: one in JPG format named illustration-01.jpg and another in PNG format named illustration-02.png, to WebP format. Listing the original files:
# bash
ls -lh
total 716K
-rw-r--r-- 1 rudi users 381K Feb 6 09:53 illustration-01.jpg
-rw-r--r-- 1 rudi users 329K Feb 6 10:00 illustration-02.png
We will use a quality of 60%, which will provide excellent compression without noticeable visual differences for many images.
Converting the image illustration-01.jpg to WebP:
# bash
cwebp -q 60 illustration-01.jpg -o illustration-01.webp
Saving file 'illustration-01.webp'
File: illustration-01.jpg
Dimension: 1400 x 800
Output: 136206 bytes Y-U-V-All-PSNR 37.51 36.24 36.67 37.13 dB
(0.97 bpp)
block count: intra4: 3897 (88.57%)
intra16: 503 (11.43%)
skipped: 1 (0.02%)
bytes used: header: 313 (0.2%)
mode-partition: 17761 (13.0%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 8%| 30%| 41%| 21%| 4400
quantizer: | 45 | 38 | 32 | 21 |
filter level: | 14 | 8 | 41 | 38 |
Checking the file size after conversion:
# bash
ls -lh illustration-01.*
-rw-r--r-- 1 rudi users 381K Feb 6 09:53 illustration-01.jpg
-rw-r--r-- 1 rudi users 134K Feb 6 10:28 illustration-01.webp
The compression reached approximately 65%, maintaining the visual quality of the image, as can be seen in the comparison between the images.
The conversion process for PNG images follows the same principle. Let's now convert the image illustration-02.png to WebP format:
# bash
cwebp -q 60 illustration-02.png -o illustration-02.webp
Saving file 'illustration-02.webp'
File: illustration-02.png
Dimension: 500 x 500
Output: 19842 bytes Y-U-V-All-PSNR 39.00 39.90 39.83 39.27 dB
(0.63 bpp)
block count: intra4: 730 (71.29%)
intra16: 294 (28.71%)
skipped: 8 (0.78%)
bytes used: header: 157 (0.8%)
mode-partition: 3267 (16.5%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 4%| 22%| 30%| 44%| 1024
quantizer: | 45 | 41 | 34 | 26 |
filter level: | 14 | 9 | 21 | 28 |
Checking the file size after conversion:
# bash
ls -lh illustration-02.*
-rw-r--r-- 1 rudi users 329K Feb 6 10:00 illustration-02.png
-rw-r--r-- 1 rudi users 20K Feb 6 10:56 illustration-02.webp
The compression reached an impressive 94%, maintaining excellent visual quality. Remember, the compression percentage varies depending on the image composition. Images with fewer colors, such as drawings or graphics, tend to be more compressed without losing much quality.
Support
The WebP format is natively supported by Google Chrome, Safari, Firefox, Edge, and Opera browsers. Additionally, many tools and libraries, including image editing software, already support WebP. However, there may still be some limitations on certain platforms or applications.
The webp package also includes a tool for decoding and viewing WebP images using OpenGL. To view a WebP image from the terminal, use the following command:
# bash
vwebp illustration-01.webp
Converting Multiple Images
Converting a single image using the command line, as seen in the previous examples, is relatively simple. However, when dealing with hundreds of images, the process can be more time-consuming. To optimize this, you can create a script that converts multiple images at once.
Script for batch conversion:
# bash
for file in *.{jpg,jpeg,png}; do cwebp -q 60 "$file" -o "${file%.*}.webp"; done
Run the above command inside the folder where the images to be converted are located. This script will convert all images with JPG, JPEG, and PNG extensions to WebP, keeping the original file names and only changing the extension to .webp. The original files will be preserved.
Command Explanation:
- for file in *.{jpg,jpeg,png}:
- Iterates over all files in the current directory with .jpg, .jpeg, and .png extensions.
- cwebp -q 60 "$file":
- Converts the current image $file to WebP with quality 60 (adjust the -q value as needed).
- -o "${file%.*}.webp":
- Defines the output file name. ${file%.*} removes the original file extension (e.g., photo.jpg becomes photo), and .webp is added at the end.
- done
- Ends the loop.
Converting Images from a Specific Directory
If you want to convert images from a specific directory, simply replace folder with the path to the desired directory:
# bash
for file in folder/*.{jpg,jpeg,png}; do cwebp -q 60 "$file" -o "${file%.*}.webp"; done
Deleting Original Images After Conversion
If you want to delete the original images after conversion, add && rm "$file" to the command:
# bash
for file in *.{jpg,jpeg,png}; do cwebp -q 60 "$file" -o "${file%.*}.webp" && rm "$file"; done
This will remove each original file after successful conversion.
Conclusion
The WebP format stands out as a modern and efficient solution for optimizing images on the web, combining high visual quality with significantly smaller file sizes. As we have seen in this article, converting images to WebP can be done quickly and practically using command-line tools like cwebp, available on most Linux distributions.
In addition to image conversion, the command offers a wide range of advanced options. You can change the compression mode, add transparency to images with backgrounds, resize, and crop images. To explore all the possibilities, consult the full manual by running the command man cwebp in the terminal.
Simple commands and automated scripts allow you to convert large quantities of images from formats like JPG, PNG, and TIFF to WebP, improving the performance of websites and applications, especially on mobile devices and slower connections.
If you haven't tried WebP yet, now is the ideal time to start. Take advantage of the techniques presented here and see how adopting this format can bring real benefits to your projects.
References
One of the sources for this article was the manual (man page) available on Slackware Linux.
- https://developers.google.com/speed/webp
- https://www.geeksforgeeks.org/converting-images-to-webp-open-source-format-in-linux/
- https://blog.ironlinux.com.br/converter-imagens-png-para-webp-linux/
- https://web.dev/articles/codelab-serve-images-webp?hl=pt-br