Adaptive Images
Please see Images for a more comprehensive list of responsive images use-cases, and incorporate this page into that one. -- Tantek Çelik
Adaptive images will load a different image depending based on-client side adaptation. See some potential ideas and read on to see how it can be implemented.
Adaptive images should preferably follow an identical semantical and structural model to the <video> element. On top of that, the <source> element should have the media attribute added that supports CSS3 Media Queries which will add weight to the algorithm that will find the <img>, <video> or <audio> element that should be rendered on the given device. It could look like this:
<img src="foo480x240px.png" width="480" height="240" alt="Foo" media="handheld and (max-device-width: 480px)">
<source src="foo800x400.png" type="image/png" media="screen and (max-device-width: 800px)">
<source src="foo1600x800.png" type="image/png" media="screen and (max-device-width: 1600px)">
</img>
It can even be used to offer alternative image types, like SVG and so on. The proposed syntax also allows for browsers that support the new functionality to not render the initial src, since it would first parse the media attribute and then conclude that the query within it doesn't evaluate to true. For browsers that doesn't support the new functionality, the src will be rendered just like today, and today's JavaScript, HTTP and CSS hacks would need to be put in place.