Mat Marquis has written Image Performance, an excellent new book published by A Book Apart. In it, Mat’s written one of the finer references to responsive images I’ve seen — which is unsurprising, since he helped lead the group that gave us the responsive images specification. If — when?— you read the book, I think you’ll agree: Mat’s supremely talented when it comes to unpacking difficult technical concepts. This book isn’t just a handy reference: it’s a gift, and a delight to read. (Also, it’s damned funny.)

I was honored when Mat asked me to add a few words to the beginning of his new book. Shared with Mat’s permission, here’s my foreword for Image Performance.

We work in a digital medium, but there’s a weight to our work. Over the years, the screens we design for have gotten considerably sharper. But as the quality of those screens has increased, so too have the images we’ve served to them. And as you’ll see in the pages ahead, those images are one of the chief reasons our websites have ballooned in size. Our websites may be prettier, but they’re far, far slower.

Now, our responsive designs have long made fine use of flexible images. That is, by slapping img { max-width: 100%; } into our stylesheets, we have images as flexible as the fluid grids in which they’re placed. But simply resizing an image with CSS won’t help users on high-resolution screens; and delivering a huge, crisp image won’t help users who are on punishingly constrained data plans. If we want to reach more devices, more people with our responsive designs, img { max-width: 100%; } is a start — but it isn’t enough.

Thankfully, the formation of the Responsive Issues Community Group (or “RICG”) followed a few years later. Lead in part by Mat Marquis, author of the little book you’re about to read, the RICG created a responsive images standard — a standard that allows us to deliver the most appropriate images to our users, based on any number of criteria. In other words, this new toolkit allows our images to become as responsive as our layouts.

Now, that standard can appear intimidating at first, filled with obtuse-looking markup patterns. And if you’re looking for a guide, you couldn’t have picked a better one than Mat Marquis. Mat was responsible for shepherding this nebulous “responsive images” idea through the specification process, and he understands it better than most. In the pages ahead, Mat will use his indefatigable humor and wit to break down even the thorniest topic. Thanks to Mat’s words, you’ll be slinging responsive images in no time.

I’m glad you’re about to read this funny, insightful, powerful little book. And I bet your users will be, too.

Thanks for reading. If you liked my foreword, you’ll love the rest of Mat’s book. It’s hilarious, insightful, and endlessly informative. (And hey, if you didn’t like my foreword, trust me: the book is much, much better.)