The WebP Manual

About The Book

Performance matters now more than ever. What we send over the wire, how we send it, and how much of it we send matters. Because users matter. Web performance is a vast subject with many nooks and crannies, and all deserve their due attention.

Of serious concern, however, is the role of media in performance, specifically images. Images are powerful. Engaging visuals evoke visceral feelings. They can provide key information and context to articles, or merely add humorous asides. They do anything for us that plain text just can’t by itself. But when there’s too much imagery, it can be frustrating for users on slow connections, or run afoul of data plan allowances. In the latter scenario, that can cost users real money. This sort of inadvertent trespass can carry real consequences.

In this ebook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it.

Written by Jeremy Wagner. Cover Design by Ricardo Gimenes.

• Read chapter excerpt “Converting Images To WebP”

What’s In The Book

This guide will encourage you to experiment and see what’s possible with WebP:

• WebP Basics WebP images usually use less disk space when compared to other formats at reasonably comparable visual similarity. Depending on your site’s audience and the browsers they use, this is an opportunity to deliver less data-intensive user experiences for a significant segment of your audience.
• Performance We’ll cover how both lossy and lossless WebP compare to JPEGs and PNGs exported by a number of image encoders.
• Converting Images To WebP This can be done in a myriad of ways, from something as simple as exporting from your preferred design program, by using Cloudinary and similar services, and even in Node.js-based build systems. Here, we’ll cover all avenues.
• Using WebP Images Because WebP isn’t supported in all browsers just yet, you’ll need to learn how to use it that sites and applications gracefully fall back to established formats when WebP support is lacking. Here, we’ll discuss the many ways you can use WebP responsibly, starting by detecting browser support in the Accept request header.

About The Author

Jeremy Wagner is a developer, author, and speaker from Minnesota. He’s also the author of the book Web Performance in Action, a web developer’s guide for creating fast websites. You can find him on Twitter @malchata or on the web at jeremywagner.me.