After almost three years in pursuit of a standardized solution to the problem of responsive images, the Responsive Images Community Group is excited to announce that the
picture element is officially coming to a browser near you. Once it lands, we’ll see the trend toward massive, bandwidth-heavy responsive websites begin to slow—and hopefully, reverse—over time.
Since starting out, the Responsive Images Community Group has evolved from a handful of passionate developers sending emails to an organization producing detailed specifications alongside WHATWG and HTML WG members and holding summits attended by representatives of all the major browsers. It took us a while to learn all the rules, but we’ve gotten pretty damn good at playing the web standards game.
When a company is interested in seeing a feature added to the web platform—something that they feel stands to benefit developers and users alike—they invest. After getting a formal thumbs-up from browser representatives, they’ll contribute their employees’ hours to seeing that feature through—from writing the initial proposal to submitting the code that brings that feature to the browsers. Adobe’s work on the WebKit project is a great example of this process in action.
Unfortunately, the last step is the one where we saw ourselves coming up short, for sheer lack of time: submitting the code to land the feature itself. The
picture element specification came to life during evenings and weekends, thanks to the efforts of dozens of designers and developers just like you—mailing list conversations took place during desk lunches and Friday nights spent in front of a screen. Blog posts were—and are, in fact—written on crowded commuter trains. We can compete on determination and willingness to put in what time we have, but we just don’t have as much time as a dedicated team of employees. Writing browser patches takes that kind of time.
For that reason, the RICG recently asked the community to sponsor Yoav Weiss’s work on the Blink and WebKit implementations of
picture, and together we’ve managed to raise over $10,000 in a little more than a week—enough to cover several months of full-time work on implementation.
Having helped write the spec and prototyped
picture in Chromium before, Yoav will know many of the the potential gotchas right out of the gate. In the meantime, the Blink team has plenty of work to do on their side, well beyond just reviewing Yoav’s code. This is a collaborative effort—adding the new code for the
picture element means a lot of changes to Chrome’s internals, and those are best left to the experts on the Blink team. Blink developer Christian Biesinger is our point person there, and he’s already working hard to pave the way for
picture. Without Christian’s changes throughout the rendering engine, getting
picture into the DOM wouldn’t be possible.
Alongside Firefox’s upcoming implementation, spearheaded by Mozilla’s Marcos Caceres—of RICG fame himself—and John Schoenick, this will give us coverage in Firefox, Opera, Chrome, and hopefully soon, Safari. Our aim is to have
picture land in the majority of common rendering engines within the year.
We’re putting a lot on Yoav, I know—but I also know that he’s the right person for the job, and implementation is already well underway. Let’s clear the way for him, and together we’ll do something that has never been done before: introduce a feature to the web that was specced, tested, funded, and implemented by the community.
Together we have an opportunity to contribute to the web in tremendously meaningful ways: by introducing a feature that could reverse the trend toward massive, resource-heavy responsive sites, and by further changing the role of web developers in web standards from spectators to active participants. We have a chance to provide a solution to our fellow developers and, above all else, provide a better experience to users—not just our users, but all users of the web.
18 Reader Comments
hope this ain’t no april fools joke… because I’m believing zilch today ! 🙂
Has there been any sign of a commitment from Microsoft yet?
Michael Cornelis: 100% true!
john holt ripley: No officially word from Microsoft—we’ve asked, but they can’t really speak to their roadmap just yet. They *were* one of the earliest supporters of the original
pictureproposal, so we have high hopes.
This is freaking awesome!
Ouch, you guys are so mean 🙁 Why do you do this to us.
Is this real or a sick April fools joke?! 🙂
It’s no joke!
Head over to Indiegogo and show some support
I didnt hear any official announcment from Microsoft yet.
According to modern IE’s new IE Platform Status dashboard both the picture element and srcset attribute are listed as under consideration.
Thanks for this write up. I’ve been following your work, Matt, since a while. Glad to see some closure, and can’t wait to see it implemented!
Some people would not expect this, but, can I ask a stupid question?
Why not use the img tag, what is the difference? I did not find it in your post, Mat.
But it’s probably a stupid question. Very likely. 😉
This makes me sad. I commend the great work you guys do – but I really feel that the picture element is a hack which we will regret in the future.
nice article written
Awesome article on responsive web i am very enjoy to read this article. if you want to develop responsive web services visit us on our web < a href="http://wodesigns.com">wodesigns
It is a good technique for browsers and due to this, users will know the use of responsive images in browsers. Thumbs up.
That’s Great to here from you and i have checked one of the site providing services like Convert PSD to Responsive visit us on http://www.psdtoresponsivehtml5.com
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions