Our goal is a markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display for both screen and print. From an accessibility standpoint, it should at the very least have something equaling img’s alt tag. For non-supporting browsers, fallback content should be displayed.
This Community Group is my effort to bring a growing number of developers together with some like-minded browser and standards folk, so we can iron out any issues we may not have considered and keep things moving forward.
The idea is to use the video tag’s markup pattern as the inspiration, as it’s specced to allow the use of media queries within attributes on its source elements and reliably displays the markup inside the tag in any browser that doesn’t recognize it. As with the video and audio tags, this solution shouldn’t require any custom scripting, HTTP/SPDY headers, or server-side technologies to reliably deliver content tailored for the end user’s context. Through use of media attributes we would not only be able to reduce wasteful image requests for the sake of users with smaller displays, but we could tailor our images’ resolutions for users with high-res displays, or for printing.
You can see part of our brainstorming process out in the open here:
I’ve also published the most viable-seeming markup pattern at A List Apart:
That markup pattern is something to the tune of:
<picture alt="Alt tag should accurately describe the image represented by all sources, though cropping and zooming may differ."> <source src="mobile.jpg" /> <!-- Matches by default. --> <source src="high-res.jpg" media="min-width: 800px" /> <!-- Overrides the previous source over 800px before any assets are fetched, resulting in a single request. --> <img src="mobile.jpg" /> <!-- Fallback content, in the event the <picture> tag is completely unsupported by the user’s browser. --> </picture>
It turns out we reached much the same conclusion as many others have previously—in some cases, right down to the semantics:
We posted all this information to the WHATWG mailing list recently, but ended up covering a lot of the same “what if we”/“how about” ground. While a little disjointed, you can mine through said thread at http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-February/ by doing a search for “responsive images”.
I’m looking forward to some focused, productive discussion here. Let’s get this thing done.