Why I’ve started using WEBP for images

Documentation is usually more clear if you can show, not tell. That means using images is key to get your message across.

When you’re writing on the web, you also need to balance not just the quality of the images you present but the costs associated with hosting and traffic. That means there’s a balance: The smaller you can make your images, the less space you’ll need to store them on a server, and the less bits you’ll pay for when people access them on a website.

There are a few image file formats that technical writers use, including JPG for photographs and PNG for screenshots. But even these aren’t a perfect tradeoff.

PNG screenshots

Here’s an example screenshot showing Microsoft Word. It’s mostly empty space, with wide blocks of monospace color. That’s a great application for using PNG images, because you end up with a high quality image that’s not too big:

That image is 1874x915 pixels but is just 29 kilobytes, so you get a good quality image at a small size.

You’d think that using PNG for everything is the best choice, but look what happens when I take a screenshot of Word when trying to add an image:

All of those photos in the new screenshot make the PNG image explode in file size. The image is 1869x917 pixels, so it’s about the same size as before, but the image size has ballooned to 1.2 megabytes.

JPG screenshots

PNG images work really well when you’ve got large spaces of the same color, like for a screenshot of an application. But they just don’t work well when there’s a lot of variation in pixels—the PNG images get too big.

One way to make these images smaller is to choose a format that’s better suited for photographs. The JPG file format does a great job for photos, giving a smaller size. Unfortunately, JPG is a “lossy” file format, and you end up with a lower image quality. You can see it if I convert the first screenshot to JPG format:

The image is still 1874x915 pixels, but it’s now 95 kilobytes. That’s like three times the size of PNG. And if you look closely, you can see the image quality is a little fuzzy, especially around transitions, like the edge of the white “page” in the screenshot. That’s because of the “lossy” nature of JPG images.

But JPG images perform really well for photographs. The human eye can’t see the lower image quality when it’s a photo, so the “lossy” aspect isn’t really noticeable.

The second screenshot has a lot of images in it, so JPG makes it smaller. And at least for the photos, you can’t really notice that the image quality is any worse. At the same 1869x917 pixels size, the image is now 427 kilobytes. That’s much smaller than the PNG screenshot that had the images.

WEBP screenshots

In the early 2010s, Google developed and released the WEBP image format. This is a good balance between file size and image quality. I also find it works really well on both screenshots and photos.

Let’s look again at the first screenshot as an example. Here it is, converted from PNG to WEBP format:

The image is still 1874x915 pixels, but the WEBP version is only 23 kilobytes in size. That’s a little smaller than the original PNG screenshot.

But WEBP also works great on photos. Here’s the second screenshot, with the photos, converted from PNG to WEBP format:

The 1869x917 pixels image is still just as sharp as PNG, but has a smaller file size like JPG. This one is just 108 kilobytes, which is even smaller than JPG.

WEBP for the web

Ever since I realized that WEBP provides the same high quality as PNG but a smaller file size, even for photos, I’ve started using WEBP for any documentation project that is a website. These smaller image files really make a difference when you have a lot of them. In one recent project I worked on, we had about 40 screenshots. Just for fun, I compared the folder size from the original PNG images to the folder size for the converted WEBP images. The 40 screenshots take 830 kilobytes in PNG format, but just 360 kilobytes in WEBP format.

Do the math and you can see the impact. This is an internal project that will probably get viewed a thousand times every month. But we’re using Cloud hosting for everything, so we still pay for the bandwidth even though it’s an internal audience. That’s easy math: over an average month with about a thousand views, PNG would take about 830 megabytes. WEBP would take about 360 megabytes. That saves about 830 - 360 = 470 megabytes of bandwidth every month, just for one project.

That’s why for every project I work on, if it’s for the web, I’m using WEBP format where I can.