Converting Your Images To WebP With ImageMagick

Using ImageMagick, cwebp, and OSX, we can convert any image format to WebP. Today we will convert this YellowFlower.jpg to a YellowFlower.webp and shave off over a 3rd of the file size without much loss in quality.

Format: JPEG Resolution: 600x400 Size: 90kb

WebP

WebP is an image format that was created in 2010 and is currently being developed by Google. WebP can handle both lossless and lossy image formats like PNG and JPEG respectively. WebP lossless image files are 26% smaller than PNGs, and the lossy variant can be anywhere from 25% to 34% smaller than a JPEG.

WebP is only available in Google Chrome and Android browsers, but both Safari and Firefox are experimenting with the format.

ImageMagick and cwebp

ImageMagick is a CLI tool that is widely used in the industry today for image formatting. Today we are going to use ImageMagick and the cwebp tool in order to convert any image into a WebP file.

Download and Install ImageMagick

Macports is the easiest way to install ImageMagick on OSX

sudo port install ImageMagick

The port command downloads ImageMagick and many of its delegate libraries (e.g. JPEG, PNG, Freetype, etc.) and configures, builds, and installs ImageMagick automagically. But it doesn’t come with a library for WebP, so by default ImageMagick doesn’t know how to handle WebP formats. This is where cwebp comes in handy.

If you prefer to build from source just follow these commands from ImageMagick for MacOs.

Download and Install cwebp

We must first install libwebp library in order to use the cwebp encoder tool. The libwebp library provides tools for WebP encoding( cwebp ) and decoding( dwebp ).

1. Download libwebp-0.6.0.tar.gz from the libwebp repository.
2. Untar the package. This creates a directory named libwebp-0.6.0/:
   tar xvzf libwebp-0.6.0.tar.gz
3. cd libwebp-0.6.0/ and run the following commands:
./configure
make
sudo make install

This builds both the cwebp and dwebp command line tools.

Now that we have all of our prerequisites out of the way, we are now ready to convert our image to WebP.

Convert JPEG to WebP

Our YellowFlower.jpg has an image resolution of 600x400 and a file size of 90kb. Let’s see what happens when we convert our image to WebP using lossless image compression.

convert YellowFlower.jpg YellowFlower--WebP.webp

WebP also does a great job image quality reduction. By converting our image to WebP and decreasing the quality by 50% we can see even more savings in file size, without a great loss in quality.

convert YellowFlower.jpg -quality 50 YellowFlower--WebP.webp

There is a small, but noticible reduction in image quality when we convert JPEG to WebP, and an even more significant change when we use 50% quality compression. Deciding on whether to convert to WebP all depends on your art direction. If you or your team have a priority in preserving optimal image quality then using the good old JPEG format is your best bet. But if retaining perfect image quality isn’t a must, and you want to cut a 3rd of your file size, then simply converting your images to WebP is your best option.

For even more savings play with quality compression( -quality ) when converting your images to WebP using ImageMagick and cwebp. You can use the HTML source and picture elements to create a fallback to your original JPEG, just in case the client doesn’t have support for WebP.