Implement the picture element in Blink!
Responsive images have been a thorny issue for Web developers for quite some time. We even started a Community group! Nowadays, with the new picture specification, it seems like the problem may actually be solved in the foreseeable future.
The responsive image problem is, in a nut shell, finding an efficient and standard way of serving content images to a myriad of devices with various form factors and screen resolutions. If you'd like to learn more, hop to the What is the resposive image problem? section, for some introductory videos.
The project
Recently, the Blink project have shown willingness to accept patches implementing the picture element, and I've been given a thumbs-up from the good folks at blink-dev saying that my approach for possible implementation of the picture element is a viable one.
My aim is to implement the full `picture` element in Blink from start-to-finish in a way that aligns with the Blink team’s coding standards, get that code accepted, and get the solution shipped.
About me
My name is Yoav Weiss. I've been working on Web performance for more years than I'd care to admit. I've also been fiddling with browser rendering engines and am a Blink & Webkit committer.
I’ve been working on the responsive images problem for quite some time, as part of the RICG. I started by having Opinions™ and writing blog posts, then began implementing native browser prototypes, and now I hack on the actual features implemented in browsers. I helped with WebKit's `srcset` implementation, and later rewrote that code in order to land and ship it in Blink.
I’ve been doing all this during the evenings of the last 2 years or so, on top of my full-time day job.
What will you be paying for?
I estimate the effort required to fully implement `picture` in about a month's work. The money we raise here will enable me to dedicate that time to working on that implementation with full focus, without looking for client work.
I promise full transparency regarding the received funds and how they are spent, with regular and detailed reports.
On top of that, we have an awesome RICG T-shirt as a perk thanks to our friends at United Pixelworkers and designed by the RICG's Geri Coady:
![]()
Why can't I do that for free?
Well, all the work I did up until now related to responsive images has been on my free time, and I'm not going to lie - even if this project is not funded, there's a good chance I'd implement picture in Blink anyway.
But — it'd take me much longer to get it done, since I'll be doing that during the evenings, dedicating only a few hours a week to the subject. Unfortunately, there are bills to be paid, so I'll have to spend my days doing client work. I much rather being able to dedicate that time to get picture implemented right. I believe that'd be best for everyone's interests.
Risks & Challenges
There's always a small risk that the Blink project will change their minds, and will refuse to accept the picture element implementation. Based on
my conversations with them, and the progress I've made since with
implementation efforts towards picture, this seems
highly unlikely.
Stretch goals
Additional funding will be used for further related work. If this campaign reaches $15,000 — I'll port the picture implementation to WebKit, and will do my best to get it accepted.
Funds beyond that will enable me to dedicate time to fixing other Web platform issues or bugs that are hampering the day to day lives of Web developers and users:
Candidates include:
-
Client hints
-
Element Queries
-
Responsive Image Container
-
Resource priorities
I'll run some form of "popularity contest" to determine the most urgent subjects, if we get there.
A word from the CG's chair
My name is Mat Marquis, Chair of the Responsive Images Community Group at the W3C.
After
almost three years in search of a standardized solution to the problem
of responsive images, I’m excited to announce that the `picture` element
is officially coming to a browser near you—and now that we’ve reached
the endgame, we could use your help.
In
his spare time, the RICG’s Yoav Weiss has started implementing the
`picture` element in Blink—the rendering engine used by Chrome and
Opera. Like many of you, Yoav is a freelancer—the countless hours he’s
already contributed to the RICG have been unpaid, and now there’s a
tremendous amount of work to be done. The goal of this campaign is to
sponsor Yoav’s work on Blink, and later WebKit, so that he can devote
his full attention to these implementations and we can start using the
`picture` element as soon as possible.
We
developers have a responsibility to build the best web possible, by
bits and pieces. Every decision we make—from whether or not to round a
corner to whether or not we’ll support a given browser—is forever woven
into the fabric of the web itself. Together, we have an opportunity to
contribute to the web in a tremendously meaningful way: by introducing a
feature that could reverse the trend toward massive, resource-heavy
responsive sites—we have a chance to provide a baseline solution to our
fellow developers and, above all else, provide a better experience to
our user
What is the responsive image problem?
I'm glad you asked. Here are a couple of introductory videos that'd help you better understand the issue.