Foreword

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.

our responsive designs have long made fine use of flexible images—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 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 the Responsive Issues Community Group (RICG) was formed to address that dilemma. Lead in part by Mat Marquis, author of the little book you’re about to read, the RICG developed 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, our images can now be as responsive as our layouts.

Now, that standard can appear intimidating at first, filled with obtuse-looking markup patterns. But if you’re searching 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.

—Ethan Marcotte