icon-discover-icon-linkicon-dismiss-keyboard-linkicon-icon-allcategoriesicon-icon-animalsicon-icon-articon-icon-charityicon-icon-checkicon-icon-checkmarkicon-icon-comicicon-icon-communityicon-icon-consoleicon-icon-create-categoryicon-icon-create-durationicon-icon-create-editicon-icon-create-goalicon-icon-create-photoicon-icon-create-storyicon-icon-create-titleicon-icon-danceicon-icon-dashboardicon-icon-designicon-icon-donateicon-icon-downarrowicon-icon-downcarroticon-icon-editicon-icon-educationicon-icon-embedicon-icon-environmenticon-icon-exclamationicon-icon-facebookicon-icon-fashionicon-icon-filmicon-icon-followicon-icon-followingicon-icon-foodicon-icon-gamingicon-icon-goicon-icon-gplusicon-icon-healthicon-icon-helpicon-icon-idOval 8icon-icon-instagramArtboard 1 Copy 52icon-icon-linkicon-icon-linkedinicon-icon-locationicon-icon-lockicon-icon-mailicon-icon-musicicon-icon-outlinedhelpicon-icon-outposticon-icon-personalcauseicon-icon-photographyicon-icon-playbookicon-icon-politicsicon-icon-profileicon-icon-recent-activityicon-icon-religionicon-icon-rightarrowicon-icon-searchicon-icon-smallbusinessicon-icon-sportsicon-icon-technologyicon-icon-theatreicon-icon-todoicon-icon-transmediaicon-icon-tumblricon-icon-twittericon-icon-uparrowicon-icon-upcarroticon-icon-videowebicon-icon-viewicon-icon-websiteicon-icon-writingicon-icon-youtubeArtboard 1Artboard 1Artboard
See All
The picture element would enable Responsive Images without ugly JS hacks!
Yoav Weiss
Identity Verified
Email Verified
Saint Donat sur l'Herbasse
2 Team Members

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.

Find This Campaign On
raised by 248 people in 1 month
154% funded
No time left
$10,000 USD goal
Flexible Funding This campaign has ended and will receive all funds raised.
Campaign Closed
This campaign ended on April 30, 2014
Select a Perk
  • $5USD
    My eternal gratitude

    Thanks for the support! :)

    22 claimed
  • $15USD
    A mention as a backer

    All the above perks and a mention as a backer in an upcoming blog post.

    74 claimed
  • $50USD
    An RICG T-shirt

    All the above perks and an awesome RICG T-shirt, designed by the RICG's own Geri Coady.

    129 claimed
  • $200USD
    Online workshop (individuals)

    All the above perks and a two-hour online workshop, explaining picture’s syntax, polyfilling dos and don’ts, and general best practices related to images.

    5 claimed
  • $500USD
    Online workshop (Corp. Silver)

    All the above perks (except for the individual workshop) and a two-hour online workshop, explaining picture's syntax, polyfilling do's and don'ts, and general best practices related to images. On top of that, a Q&A session permitting your team of up to 5 engineers to ask specific questions related to your company's responsive images needs.

    2 out of 6 claimed
  • $1,000USD
    Online workshop (Corp. Gold)

    All the above perks (except for other workshops) and a three-hour online workshop, explaining picture's syntax, polyfilling do's and don'ts, and general best practices related to images. On top of that, a Q&A session permitting your engineers to ask specific questions related to your company's responsive images needs.

    3 out of 6 claimed
Do you think this campaign contains prohibited content? Let us know.