WebP: A Modern Image Format

Back when I started creating my first web presence on sites like Geocities, where sites were constantly “Under Construction”, or when I created my own site on Dreamhost, the process of creating something out of nothing was a labor of love. These days, it’s easier with the ubiquity of cascading style sheets (CSS) and the plethora of themes. Thank goodness for theme developers! While the HTML, Javascript code, CSS, etc. are text-based and therefore small in size, much of the network bandwidth used by a website comes from serving images. This has direct impact on page load times.

In the past, when I wanted to create and display an image, I used the JPEG image format. If I wanted an image with a transparent background or an animated image, I used the GIF image format. In recent years, I started using the PNG image format for all but animated images and I rarely, if ever, need to use animated images. What’s up with all of these image formats?

Different Image Formats, Different Tradeoffs

The JPEG standard was created in 1992. It uses lossy compression and allows users to decide between quality versus file size. Lower file size translates to lower quality. It was designed for photographic images, where slightly lower quality is imperceptible to the human eye. It is the most popular image format on the web today.

The GIF image format was created in 1987. It uses lossless compression. However, GIF images have a limited color palette of 256 colors. They’re popular for company logos where colors are limited and quality is important. Nowadays, the GIF image format is primarily used for animations. It is the next most popular image format on the web today.

While my familiarity with PNG images primarily comes from screenshots on my Mac laptop, the PNG image format has been around since 1996. It is an improvement on the GIF image format. Not only is it lossless, but it also supports a color palette of 16 million colors. Unlike the GIF image format, it was free to use (GIFs required a license). Unlike the GIF image format, the PNG image format does not support animations.

Welcome WebP

The WebP image format was created by Google in 2010. It supports everything that these other 3 image formats support. That is, it supports both lossy and lossless compression. It supports transparency and animations. But what sets it apart from the rest is how much smaller WebP images are. According to Google documentation, WebP lossless images are 26% smaller than PNG images. WebP lossy images are 25-34% smaller compared to JPEG images at equivalent quality.

That’s huge savings! I’m sold and I’ve been slowly migrating images on this website over to the WebP image format.

Converting Images to WebP

There are numerous tools available to convert images to WebP format. On my Mac, I installed cwebp using Homebrew. If you don’t have Homebrew on your Mac, you can follow the instructions in a previous post.

Install cwebp:

1brew install webp

Converting the original image to a WebP image is as simple as:

1cwebp filename.ext -o filename.webp

You can even resize an image:

1cwebp filename.ext -resize width height -o filename.webp

You can keep the aspect ratio the same by specifying either the width or height as 0.

Here is a file size comparison for the featured image and thumbnail image for this post:

You can see that the WebP images are 29% of the size of the JPEG images. Note that the quality factor is 75% by default. You can specify a different quality by including a -q [0..100] parameter.

Story Time

One of my first jobs was as a web developer for a niche shop in New York City. I was paid by the hour and I simply told the owner how many hours I worked that week. The owner was very cheap and didn’t particularly understand technology. He wanted to create a poster and didn’t want to hire a professional to do it. So he asked me to go down to the local computer store, which I believe was a Comp USA, buy a scanner, use it, and then return it.

I was out of my league here. I didn’t know much about print-quality images. All I knew was that my computer had a 100 MB hard drive and that the largest size recordable media device at the time was a 250MB Zip drive, which I borrowed from a friend. I scanned all of the images and arranged them into a poster and put them on the Zip drive. It took a lot of time and patience. Ultimately, the owner paid a lot of money for an unusable image.

The moral of the story is: don’t expect a high school student to produce professional-quality results, especially when the output quality matters.