{"id":197,"date":"2012-05-11T16:43:07","date_gmt":"2012-05-11T16:43:07","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=197"},"modified":"2012-05-11T20:05:19","modified_gmt":"2012-05-11T20:05:19","slug":"respimg-proposal","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/05\/11\/respimg-proposal\/","title":{"rendered":"Responsive image element proposed by the WHATWG"},"content":{"rendered":"

After months of discussing possible solutions for responsive images on the WHATWG mailing list<\/a>, I discovered yesterday that another, different syntax was proposed on the WHATWG IRC channel<\/a>. Additionally, when I\u00a0joined the discussion<\/a>, it became apparent that the majority of the WHATWG leads present in IRC weren’t aware of the proposed picture<\/code> element\u2014or, in fact, this Community Group. Thankfully, after being informed about our efforts, I was assured they would attempt to incorporate our input.<\/p>\n

The majority of the people involved in the IRC discussion had not heard of our Community Group, and \u2014though none of us were contacted for input when the time came to propose solutions.<\/p>\n

So we\u2019re all in the loop here, the currently proposed solution<\/a>\u00a0is a new set<\/code> attribute on the img<\/code> element. If that link’s not working for you, the proposed syntax is:<\/p>\n

<img src=\"face-600-200@1.jpg\" alt=\"\" set=\"face-600-200@1.jpg 600w 200h 1x, face-600-200@2.jpg 600w 200h 2x, face-icon.png 200w 200h\"><\/code><\/pre>\n
To recap, the markup pattern proposed by this community group is as follows:<\/p>\n
<picture alt=\"\"> <source src=\"mobile.jpg\" \/> <source src=\"large.jpg\" media=\"min-width: 600px\" \/> <source src=\"large_1.5x-res.jpg\" media=\"min-width: 600px, min-device-pixel-ratio: 1.5\" \/> <img src=\"mobile.jpg\" \/> <\/picture><\/code><\/pre>\n
I noted a number of concerns with the new, WHATWG-proposed img<\/code> syntax in IRC, namely that it seems far less developer-friendly than the proposed picture<\/code> markup structure.<\/p>\n
But now? Now we need to hear from you.<\/p>\n
The WHATWG, having now realized there’s been significant work being done in this group, wants to hear what you think. I’ve been asked to provide citations of developer opinion<\/a>\u00a0on the topic, so I’d like to ask you to sound off in the comments:<\/p>\n
Does picture<\/code> seem like something you’d like to write, or does the img set<\/code> attribute seem more accessible to the average developer?<\/strong><\/p>\n
Additionally, if you have more thoughts on the topic you’d like to share with the WHATWG, here’s how to continue the discussion:<\/p>\n