Hacker News Reader

Comment by necolas | Hacker News Reader

Previous discussion about this by developers (170+ comments) who have been discussing Responsive Images in a W3C Community Group - http://www.w3.org/community/respimg/2012/05/11/respimg-propo...

View on HN

The only problem with the <picture> element is how to address backwards compatibility? The srcset attribute is backwards compatible because old browsers will just ignore srcset and use the src, but old browsers will ignore the <picture> element completely -- how do you get something that works for older browsers but also works for new browsers as well?

The <picture> approach also has a sort of solution for degrading gracefully in older browsers. You can nest an <img> in your <picture>. Newer browsers are supposed to ignore it, older browsers would ignore the surrounding <picture> element instead.

I think there are other good reasons to prefer the srcset approach, but not this one. The email here provides motivation: <http://lists.w3.org/Archives/Public/public-whatwg-archive/20...;

Unfortunately, at the time when Ian didn't seem to care about the issue of responsive images, I asked him about the possibility of using the existing `<img>` element and he said it was pointless to try and modify existing image parsing. Forget it.

Now, he decides that actually this is the way to go. Frustrating.

For reference, in the email linked above, Ian Hickson said:

> So why not just give the UA the characteristics and a template to use to build the file names itself? That way we still give the UA all the same information, but it is much less verbose and still solves all the same use cases. Thus:

   <img src="face-600-200@1.jpeg" alt=""
        src-template="face-%w-%h@%r.jpeg"
        src-versions="600x200x1 600x200x2 200x200x1"></code>

This doesn't modify parsing. Modifying parsing would be something like allowing <img> to have child elements. Adding extra attributes to an element requires no changes to the parser.

+1 to the picture syntax.

Reply on news.ycombinator.com