{"id":85,"date":"2012-02-23T19:06:33","date_gmt":"2012-02-23T19:06:33","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=85"},"modified":"2012-02-23T21:10:19","modified_gmt":"2012-02-23T21:10:19","slug":"picture-for-existing-browsers","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/02\/23\/picture-for-existing-browsers\/","title":{"rendered":"<picture> respecting conventions."},"content":{"rendered":"

After checking out the etherpad with brainstorming<\/a>, asking some questions in this group<\/a> and seeing what Scott has done<\/a> with the proposed markup using <picture><\/code> , I like the way we go. Now I clearly see the reasons why we can not re-use <img><\/code> . I see why some other proposed solutions don’t deliver what we need and how <picture><\/code> solution tries to solve some of those concerns.<\/p>\n

But today, after the Matt’s post<\/a> I realized that there is something more we should keep in mind. There are certain ways people used to interact with the images on the web. There are certain conventions. Saving images to a user’s hard-drive, maybe referencing an image in a visual editor’s “Add Image” drawer to name a couple.<\/p>\n

I gave another though to the <picture><\/code> element on how we can deliver the responsiveness and, at the same time, let the conventions work still. Here is what I came up with:<\/p>\n

<picture>\r\n    <source query=\"(min-width:420px) and (max-width: 767px)\">\r\n        <img src=\"http:\/\/dev.null\/small.jpg\" alt=\"Alternative text for capable browsers wider than 420 but narrower than 768px\" \/>\r\n    <\/source>\r\n    <source query=\"(min-width:768px)\">\r\n        <img src=\"http:\/\/dev.null\/large.jpg\" alt=\"Alternative text for capable browsers wider than 768px\" \/>\r\n    <\/source>\r\n    <img src=\"http:\/\/dev.null\" alt=\"Alternative text for browsers not understanding CSS media queries or screens smaller than 420px\" \/>\r\n<\/picture><\/code><\/pre>\n
So, as in the original proposal, we have <img><\/code> fallback for the browsers not supporting CSS media queries. The same <img><\/code> fallback is used for capable browsers in case none of the media queries is true. We have a set of <source><\/code> elements to reference different versions of the image. The differece is that I intend <source><\/code> to contain real <img><\/code> tag. Any browser knows how to deal with it and it is clear for any user what to expect from it. Additional advantage is the flexibility we get in supplying more information than just an image for different media queries. For example a caption for an image or alike (though it starts smelling like <figure><\/code> already).<\/p>\n
What I like about this solution.<\/h2>\n