The final frontier of responsive web design is development of a single, all encompassing solution for responsive images. The dream is alive in the form of a couple of standards proposals, but it's not looking all that healthy.

The srcset proposal updates the <img> tag to include a new srcset attribute where additional sources can be specified. The main rival to this proposed standard is a new <picture> element which behaves similarly to existing media elements like <audio> and <video>.

Unfortunately, both these solutions have non-trivial problems (in addition to being years away from any kind of cross browser support). Matt Wilcox provides an excellent definition of the problem and a round-up of proposed solutions, and although written nearly a year ago, not much has changed. It's still well worth a read.

How to choose a technique

There are now a wide variety of responsive image solutions, the best of which have been well summarised by Chris Coyier at CSS Tricks. Unfortunately all solutions have a variety of advantages and disadvantages and which is most suitable will depend heavily on the specifics of a given project. For these reasons, the reality is that a simple step-by-step guide for implementation of a responsive images solution is near impossible.

Last year I spoke at the the Brisbane leg of Web Directions' What Do You Know event series about responsive tables. Last night I spoke again at the same event, but this time about how to choose a responsive images technique. Rather than creating slides I built a quick choose your own adventure for selecting a technique which suits your project's requirements.

As usual this little tool is standing on the shoulders of some giants. Please do go and read some of these excellent articles on responsive imagery and remember to make sure you understand whichever technique you choose before implementing it.