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.
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
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(
libwebp-0.6.0.tar.gzfrom the libwebp repository.
- Untar the package. This creates a directory named
tar xvzf libwebp-0.6.0.tar.gz
cd libwebp-0.6.0/and run the following commands:
sudo make install
This builds both the
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
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.