The WebP Manual
![The WebP Manual](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ef64b78-4790-49b0-9bc1-b57794e2a30d/webp-manual-ipad-small-opt.png)
ePUB, Kindle, PDF
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.
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.
Table of Contents
- Foreword
- WebP Basics — Depending on your site’s audience and the browsers they use, using WebP images 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, you’ll need to learn how to use it that sites and applications gracefully fall back to established formats when WebP support is lacking.
- In Closing — WebP does offer potential benefits to a large portion of internet users. In my experience, WebP has substantially improved loading performance for many of my clients, and continues to be a tool I reach for when I want to make pages as lean as possible.
- Appendix
Technical Details
- Formats: ePUB, Kindle, PDF (DRM-free)
- Pages: 84
- Language: English
- Released: July 2018
- Publisher: Smashing Media AG
- ISBN (PDF): 978-3-945749-70-8
![The WebP Manual](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ef64b78-4790-49b0-9bc1-b57794e2a30d/webp-manual-ipad-small-opt.png)
ePUB, Kindle, PDF
More Books
Success At Scale
Interface Design Checklists
166 practical cards for common interface design challenges.
Understanding Privacy
How to put your users first and make a better web.
Touch Design for Mobile Interfaces
Want to learn how to improve the design of your mobile digital products? Learn how touchscreen devices really work — and how people really use them.
Image Optimization
Deliver high-quality responsive images in the best format and size, and at the moment your users need them.
TypeScript in 50 Lessons
Everything you need to know about TypeScript, its type system, and all its benefits in 50 lessons.
Click!
A guide to increasing conversion and driving sales sustainably.
The Ethical Design Handbook
A practical guide on ethical design for digital products.
Inclusive Components
Handbook for building robust, accessible interfaces.
Smashing Print
A printed magazine designed to make you think.
Art Direction for the Web
Creating engaging, art-directed experiences on the web.
Smashing Book 6
Exploring new frontiers in front-end and design.
Design Systems
Create effective design systems that empower teams to create great digital products.
Form Design Patterns
Designing and coding inclusive and usable web forms.
User Experience Revolution
Help organizations understand and embrace digital.
White Hat UX
How to avoid dark patterns and improve user experience.
Digital Adaptation
Helping traditional companies embrace and make use of digital.
Inclusive Design Patterns
Creating bulletproof, accessible HTML/CSS components.
Smashing Book #5
Smart responsive design techniques from real projects.
The Sketch Handbook
Everything you need to know to understand and use Sketch.