Managing Images in a Responsive Design
First things first: grab the library
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.
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.
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!
For more on this topic we have an upcoming Environmental Design event: