<picture> respecting conventions.

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

But today, after the Matt’s post 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.

I gave another though to the <picture> 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:

<picture>
    <source query="(min-width:420px) and (max-width: 767px)">
        <img src="http://dev.null/small.jpg" alt="Alternative text for capable browsers wider than 420 but narrower than 768px" />
    </source>
    <source query="(min-width:768px)">
        <img src="http://dev.null/large.jpg" alt="Alternative text for capable browsers wider than 768px" />
    </source>
    <img src="http://dev.null" alt="Alternative text for browsers not understanding CSS media queries or screens smaller than 420px" />
</picture>

So, as in the original proposal, we have <img> fallback for the browsers not supporting CSS media queries. The same <img> fallback is used for capable browsers in case none of the media queries is true. We have a set of <source> elements to reference different versions of the image. The differece is that I intend <source> to contain real <img> 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> already).

What I like about this solution.

• This can be re-used for anything, not images only. If we decide to let wider usage of this pattern, we might just easily drop <picture> and leave those <source> elements with query attributes standalone. Imagine using this for different navigational elements depending on the screen size, supplying a screenshot instead of full-size video on the smaller screens and so on.
• No need to duplicate browsers’ functionality reserved for <img> tag.
• Not breaking conventions users got used to when dealing with images on the web.

What I don’t like about this solution.

• Duplication of the alt attribute for the images. Though it might be an advantage. You might need to supply completely different image for smaller screens (consider complex chart on a wide screen that is significantly simplified for the smaller ones) where alt text should be different for different screens.
• Mixing presentation with markup by using CSS media queries. Though, pretty much any solution we came up with until now had this flaw.
• Use of the new element ( <picture> ). But, as mentioned above, we can ditch it and leave standalone <source> elements instead. <source> is an existing tag. Though query attribute has to be implemented yet.
• Not very elegant markup.
• Maybe a little bit too much flexibility — some people can go nuts supplying different content for different resolutions. This can easily break usability of the sites.
• UPDATE I don’t like that this doesn’t work in the browsers just now even if one tries to polyfill it.
  Browsers should implement a mechanism to not download an <img> if it is within <source>
• UPDATE This pattern is new and does not correspond to the existing usage of <source>

What do you think?