Responsive Images

(or: fixing Web standards)

Mobile Web

Mobile Web

And then

RWD

• Media Queries
• Fluid grids
• Flexible images

"Flexible images???"

"That's easy"

"Just send the largest possible image"

"And let the browser resize it"

All done!!!

BLOAT!!!

Mobile experience became better, but slower

"a responsive site" became a synonym of "a slow site"

72% Serve same resources

guypo.com

Serving the same resources to mobile and desktop hurts performance

On mobile the images are much smaller and some of them are not even displayed

Images - over 63%

httparchive.org

Up to 72% can be saved

data plan abuse

wasted time

large images mean long loading times

RWD sites got a reputation of being slow Web sites, mainly because of images.

People demanded a solution

Turned to the mailing lists

Proposals!

Moar proposals!

And MOAR!!!

And the RICG was born

<picture> proposal

The RICG discussed the issue for a few months and came up with the picture element proposal

srcset proposal

At the same time, Ted O'Connor from Apple proposed the srcset attribute for simple DPR selection

Hixie added it to the spec over the weekend without much public discussion, then tried to retrofit the other use cases into it

A lot of mailing list flame wars. Things got tense.

Picture vs. srcset!

Picture *and* srcset

Florian Rivoal (from Opera) proposed to join forces. the (original) srcset syntax was adopted into the picture syntax, since they covered different use cases

Browsers weren't convinced

9 months later

I prototyped picture in WebKit. Marcos and I Talked at TPAC. Marcos speced the proposal. Use cases doc. FPWD

But nothing substantial happened

Src-N

Then after a long while of little progress

SrcN was proposed by TabAtkins and John Mellor, after a couple of meetups we had with John.

It resolved all the use case, in a single element, but got resistence from some browser people.

Moar proposals???

There was a hecktic time at the end of last year, where proposals were coming in twice a day. But now this is all behind us.

Back to picture

The following an IRC chat I had with Simon Pieters, we figured out a way to gather up all the good pieces

from Src-N and wrap it inside something that looks really like the original picture syntax,

only significantly easier to spec, implement and maintain.

TabAtkins then revived the picture spec (basically rewrote most of it), and we've been working on it with Tab and

Simon ever since.

Mozilla were positive

Browsers liked it way better

Blink tho

Blink still resisted on implementation grounds, basically missing infrastructure.

So I got busy

Basically, I started tackling the infrastructure issues that were the cause for Blink's resistence, in order to defuse it

And realized that if I'd keep doing that in evenings, it's gonna take a looooong while

So, crowdfunding to the rescue

Patches got landing

Shipped in Chrome 38

A group effort

XXXXXXX - Talk about Wilto and Geri and stuff regarding the IndieGoGo thing

The RICG & whatwg/blink folks are working together on the spec, to make it as awesome as possible. Mozilla is also heavily involved

The implementation in Blink and Gecko is almost done.

Now what?

Replicating that model

Why change?

Problem

Specification

Implementation

The Web

Billions of users

Millions of devs

100s of implementors

Tragedy of the commons

What can we do?

Moving people from the millions to the hundreds

Get developers involved

Overwhelm

WICG

The Web is ours!

Join

bit.ly/webincubator

Follow

@wicg_

Discuss

discourse.wicg.io

Thank you!

@yoavweiss on Twitter & GitHub

responsiveimages.org

wicg.io

Questions?