Responsive Images

Yoav Weiss

CaraValence - Valence, May 2014

yoavweiss.github.io/respimg-caravalence-presentation

Who????

• Srcset & Picture implementation

Working on responsive images in my spare time for the last 2 years

A member of the RICG

A Blink & WebKit committer

Prototyped picture in WebKit. Implemented srcset in Blink. Implementing picture in Blink and WebKit.

I also been working on front end optimization server side solutions for the last 15 years, and am on a personal vendetta on image bloat on the Web

What is Responsive images?

Efficiently load properly dimensioned images that fit the page's design

Who knows what the responsive images problem is?

Started out as

It started out (or at least got people's attention) as a quality issue.

The solution to that was simple - just send users the big images

"But that's easy"

"Just send the largest possible image"

"And let the browser resize it"

EAZZZZZZY!!!

Well...

This led to 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

Which resources?

Images - over 61%

httparchive.org

How much can be saved?

Up to™ 72% image data savings

So quality issues became

data plan abuse

And...

Large images?

People demanded a solution

Turned to the mailing lists

Proposals!

Moar proposals!

And the RICG was born

Picture vs. srcset

Turned into picture *with* srcset

The CG came up with the picture proposal, Hixie added srcset to the HTML spec.

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

Over time, the srcset syntax was adopted into the picture syntax, since they covered different use cases

Browsers weren't convinced

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.

Then some more

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.

And MOAR

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.

Browsers were like

Browsers liked it way better

But Blink was like

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 soon became

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

So, crowdfunding to the rescue

I even did this video thing...

It went well

And patches got landing

~60 patches later

Blink work is done

WebKit is underway

Hopefully shipping in Chrome 37/38

I wasn't alone in this

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 is moving along nicely, and Gecko are happily implementing as well.

If all goes well, we may have the feature sihpping in a few months.

Picture 2.0™

Let's take a closer look at each one of the parts combining the latest spec.

The srcset 'x' part

The oldest part of the spec, goes back to the WHAWG 2012 days

Use case - "Retina images"

Load hi-res images

on hi-res devices

The syntax

<img src="small-1x.jpg" srcset="small-2x.jpg 2x" 
     alt="The president.">

The <picture> part

Use case - Art direction

Use case #2 - MIME type fallback

Today's Web have become fragmented when it comes to image formats.

We may not like it, but that's the truth :(

Picture will enable us to have client-side mime type fallback if we're using browser specific image formats, just like all other resources which they're type may or may not be supported (e.g. video, fonts).

Note that it doesn't mean that you can't do server-side content negotiation using the accept header, if that's your thing

But client-side may be more accessible to Web developers that can't mess around with their backend, and it has caching advantages.

The syntax

<picture>
     <source media="(min-width: 45em)" srcset="large.jpg">
     <source media="(min-width: 18em)" srcset="medium.jpg">
     <img src="small.jpg" alt="The president.">
</picture>

Here you can see the syntax parts that make up the "picture" part of the spec, namely the picture element and its source children.

Each one of the source children, as well as the img child define an image that fits into a certain responsive breakpoint.

The sizes + srcset 'w' descriptor part

http://ericportis.com/posts/2014/srcset-sizes/

The third part is IMO, the most exciting part.

This is the major innovation that the original src-N proposal brought

It's the most exciting since it applies almost everywhere, once you look at it.

It can be used to save bandwidth in both responsive and adaptive designs and even if hi res displays are not involved.

use case - variable width images

The syntax

<img src="otherpic.jpg" alt="The president giving an award."
     sizes="(max-width: 30em) 100vw, 
         (max-width: 50em) 50vw, 
         calc(33vw - 100px)"
     srcset="pic100.jpg 100w, pic200.jpg 200w, 
             pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w, 
             pic3200.jpg 3200w">

Browser support

blog.thestudio4.co.uk

Blink - Chrome & Opera

I started out by implementing srcset's x descriptor. It shipped in Chrome/Opera stable a few weeks back.

sizes and the 'w' descriptor in srcset are done. I'll probably aim to ship it in M37

picture work has started and is moving along nicely - Christian is helping with stable state

Firefox

IE

They're showing up on IRC and mailing lists, asking good questions.

WebKit

Implemented & shipped srcset's 'x' descriptor

Willing to accept patches behind a compile flag

I'm currently working on patches

To sum it up

Thanks!

@yoavweiss on Twitter & GitHub

responsiveimages.org

Slides: yoavweiss.github.io/respimg-blinkon-presentation

Questions?