Responsive images are hard. At least for now anyways. The good news is a community of incredibly smart people have been working hard at providing a solution to this problem.
So what’s the problem?
The simplest way I can explain this is to say that in order to support responsive images today, you need to have an image that is at least as large as the largest it could potentially be displayed. Say you’ve got an image that needs to display at 1600px wide for large screens and 320px wide on small screens. This means your base image would need to be 1600px wide to cover the range of sizes. This technique works, but at a great performance cost as users with smaller screens will download a much larger file than necessary.
There are a number of solutions in the wild that attempt to address this problem. The best one I’ve seen is Picturefill – a responsive images approach that you can use today that mimics the proposed picture element.
Take a look at this video for an in depth look at the problem and proposed solution.
In recent months, part of the solution – srcset – has been implemented in Chrome and Safari. And now it’s time to implement picture. At the Nerdery, we believe this is incredibly important work that will help front-end development take one more step forward. To that end, we’ve decided to support Yoav Weiss and Mat Marquis in their crusade and have donated to the indiegogo campaign that will help fund the implementation of the picture element – we see it more as a thousand-dollar investment we can’t afford not to make.
We’d also like to encourage you to donate at http://www.indiegogo.com/projects/picture-element-implementation-in-blink so the picture element can be a part of our collective future.