After months of discussing possible solutions for responsive images on the WHATWG mailing list, I discovered yesterday that another, different syntax was proposed on the WHATWG IRC channel. Additionally, when I joined the discussion, it became apparent that the majority of the WHATWG leads present in IRC weren’t aware of the proposed
picture element—or, in fact, this Community Group. Thankfully, after being informed about our efforts, I was assured they would attempt to incorporate our input.
The majority of the people involved in the IRC discussion had not heard of our Community Group, and —though none of us were contacted for input when the time came to propose solutions.
So we’re all in the loop here, the currently proposed solution is a new
set attribute on the
img element. If that link’s not working for you, the proposed syntax is:
<img src="firstname.lastname@example.org" alt="" set="email@example.com 600w 200h 1x, firstname.lastname@example.org 600w 200h 2x, face-icon.png 200w 200h">
To recap, the markup pattern proposed by this community group is as follows:
<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>
I noted a number of concerns with the new, WHATWG-proposed
img syntax in IRC, namely that it seems far less developer-friendly than the proposed
picture markup structure.
But now? Now we need to hear from you.
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 on the topic, so I’d like to ask you to sound off in the comments:
picture seem like something you’d like to write, or does the
img set attribute seem more accessible to the average developer?
Additionally, if you have more thoughts on the topic you’d like to share with the WHATWG, here’s how to continue the discussion:
- Join the WHATWG mailing list, and help keep
pictureat the forefront of the discussion.
- Join the #WHATWG channel on IRC, since apparently this is where the WHATWG leads’ attention is focused.
- Talk to the WHATWG on Twitter.
If you have a clear argument for or against the proposed syntax here, for or against the picture element, or a decided preference between the two: it seems like now is our opportunity to have our voices heard.
If you care about responsive images, I’d love for you to join in.