Responsive Images

There’s three topics I avoid discussing: religion, politics, and responsive images. But now that the responsive images dust is settling, I figured it’s time to face the music and actually learn this stuff.

So here’s how I’m going to write the majority of my responsive images:

<img src="small.jpg" srcset="small.jpg [smallwidth]w, large.jpg [largewidth]w" sizes="100vw" alt="Alt Text" />

That’s it. See a demo.

My biggest priority is avoiding sending gigantic images to small screens, and this does the trick. The [smallwidth] and [largewidth] are the widths of the image assets, which’ll change per use case. I’ll use the Picturefill polyfill to make it all work. Most of my images won’t need swapped out, just the big honkin’ hero image types.

I could further explain this, but in an effort to keep things simple I’ll stop writing now.

Update: I’ve updated this post to reflect the suggestion to include the sizes attribute in the markup.