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\u2019s alt tag. For non-supporting browsers, fallback content should be displayed.<\/p>\n
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.<\/p>\n
The idea is to use the video tag\u2019s markup pattern as the inspiration, as it\u2019s 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\u2019t recognize it. As with the video and audio tags, this solution shouldn\u2019t require any custom scripting, HTTP\/SPDY headers, or server-side technologies to reliably deliver content tailored for the end user\u2019s 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, \u00a0but we could tailor our images\u2019 resolutions for users with high-res displays, or for printing.<\/p>\n
You can see part of our brainstorming process out in the open here: I\u2019ve also published the most viable-seeming markup pattern at A List Apart: That markup pattern is something to the tune of:<\/p>\n <\/code><\/p>\n It turns out we reached much the same conclusion as many others have previously\u2014in some cases, right down to the semantics:<\/p>\n We posted all this information to the WHATWG mailing list recently, but ended up covering a lot of the same \u201cwhat if we\u201d\/\u201chow about\u201d ground. While a little disjointed, you can mine through said thread at http:\/\/lists.whatwg.org\/pipermail\/whatwg-whatwg.org\/2012-February\/<\/a> by doing a search for \u201cresponsive images\u201d.<\/p>\n I\u2019m looking forward to some focused, productive discussion here. Let\u2019s get this thing done.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading
\nhttps:\/\/etherpad.mozilla.org\/responsive-assets<\/a><\/p>\n
\nhttp:\/\/www.alistapart.com\/articles\/responsive-images-how-they-almost-worked-and-what-we-need\/<\/a><\/p>\n<picture alt=\"Alt tag should accurately describe the image represented by all sources, though cropping and zooming may differ.\">\r\n <source src=\"mobile.jpg\" \/> <!-- Matches by default. -->\r\n <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. -->\r\n <img src=\"mobile.jpg\" \/> <!-- Fallback content, in the event the <picture> tag is completely unsupported by the user\u2019s browser. -->\r\n<\/picture>\r\n<\/pre>\n\n