Image Performance

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

Introduction

That fact that you’re

reading this tells me something about you. It tells me that you’re different from the way I once was.

I’ve been doing this—making websites—for a little more than a decade now. I like to think I’ve grown up some during that time. I don’t mind saying I took some things for granted early on.

I’ve been incredibly fortunate, that much I’ve always known—and I’d appreciate it if you’d knock on wood for me here, reader. I’ve received way more than my fair share of help from friends, family, and total strangers alike. I’ve had—and have—the benefit of immense privilege. I’ve always tried my damnedest not to take any of that for granted.

What I took for granted were the mechanics of this work—at least at the start. If I made an element show up in the right place, on the right page, in the right browsers—no small feat, oftentimes—then my work was done. I’d never dig deeper than that surface level. I didn’t know what I didn’t know: that making a div show up in roughly the same place as a square in a .psd was just the tip of the web-development iceberg.

Below the surface—that’s where the meaning is. To build a page that can be easily parsed by assistive technologies is to contribute to a more inclusive web; to render a page more performantly is to broaden the web’s reach. To think too shallowly about a project means nudging the larger web in the same direction: toward something meant not for all, but for some; toward something meant only for those who experience it the way we do.

But I don’t think that’s who you are. Not now—not today, as you read this. You’re ready to dive headfirst into a book about a subject that’s easy to take for granted: putting images on the web.

At the risk of spoilers: any ol’ image format in an img tag styled with max-width: 100% will get the job done. If all you were after was a passing grade, you wouldn’t need to read any further. It might not be fast, it might not be accessible—it might not even work in some browsing contexts, depending on a set of factors you’d never come to know. But the job would, technically, be done. "D is for diploma" was my constant refrain in high school.

I can tell, though: scraping by isn’t enough for you. Maybe you’ve been at this long enough to gain a healthy respect for your element, long enough that you don’t take a single CSS property or markup pattern as a given. Maybe you’re just starting out, sharp-eyed and voracious, looking to learn all you can about the web’s inner workings. Maybe you’re somewhere in between, starting to wonder what details lie beneath the surface of your workplace and your medium, the web.

Regardless of where you are in your understanding of the web, you know you want to make it work better. You want to play a part in building something faster, more reliable, and more inclusive.

If you believe that