Managing Images in a Responsive Design

by Tim Wright

First things first: grab the library

Over the past few months we’ve been [internal_link pid=”10376″]speaking a lot[/internal_link] about asset management in the browser and implementing responsive designs under the umbrella label of, “Environmental Design.” The overall concept covers quite a bit, but one specific area that we’ve been getting a lot of questions on is how to deal with images when bandwidth is at a premium. With that in mind, I wanted to share my thoughts on the matter for those who may have missed any of our events.

My Answer

In responsive design we’re currently dealing with loading images by checking the screen size. You can do this by using width-based media queries (for background images and such, classic responsive design) or with a pretty cool JavaScript polyfill by Scott Jehl called “picturefill” for inline content images. You can also target pixel-density this way. Overall, it’s pretty flexible, but does leave us flat when trying to address bandwidth concerns.

The bandwidth issue is growing in popularity, but browser support for actually testing available connection speed isn’t very good. The W3C has been working with Mozilla on the Network Information API to allow us to do some better asset management in the browser. It’s pretty flushed out and we’re just waiting on better browser support. It looks like Firefox will be the first to fully support it (active in Beta right now).

The W3C is also working to add a srcset attribute to images to target screen sizes and resolutions.

We (FTS) built a small JavaScript library to help test for: bandwidth, battery status and device pixel density, that I would suggest having a look at. Even though the APIs are not well-supported, the library allows for graceful degradation to something like the picturefill (or anything you choose). It’s super-cool, check it out.

Testing connection with the library is as easy as grabbing the Javascript object: “Manage.connection“, which will return either “good” or “bad.” From there, you can modify your assets accordingly. The example in GitHub using the library and falls back to picturefill.

I would suggest, at a minimum, anyone concerned about images in responsive designs use picturefill until support for the Network Information API is a little stronger. If you want to take it a step further, hack around in our JS Asset Management Library and let us know what you think!

About Tim Wright

Tim Wright is a frequent speaker, blogger, teacher, and published author. He has written articles for A List Apart, Smashing Magazine, Sitepoint,...