Back to Blog

Managing Images in a Responsive Design


Over the past few months we’ve been speaking a lot 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.

First things first: grab the library

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!

Author Tim Wright

How we work Process

Product Hero Talin Wadsworth