Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is…
a lot like setting something on fire to see exactly how flammable it is
Great analogy, since the only real way to know a bandwidth speed is to download something and time it… so we can’t effectively rely on that for determining which image file to deliver. A proposal for a new html element to handle multiple image source files, much like the new video and audio elements:
<picture>
<source src="high-res.jpg" media="min-width: 800px" />
<source src="mobile.jpg" />
<!-- Fallback content: -->
<img src="mobile.jpg" />
</picture>
via A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need.
