Image Performance

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 anything worth doing is worth doing well—hell, maybe even worth overdoing a little—then I’ve written this book for you.

All profits from the first quarter of sales will be donated to NV Access, creators of the free screen reader software NVDA.