Responsive Images

Yoav Weiss

CaraValence - Valence, May 2014

yoavweiss.github.io/respimg-caravalence-presentation

Who????

• 
• 
• Srcset & Picture implementation

What is Responsive images?

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

Started out as

"But that's easy"

"Just send the largest possible image"

"And let the browser resize it"

EAZZZZZZY!!!

Well...

This led to BLOAT!!!

72% Serve same resources

guypo.com

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

Browsers weren't convinced

Src-N

Then some more

And MOAR

Back to picture

Browsers were like

But Blink was like

So I got busy

And soon became

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

Picture 2.0™

The srcset 'x' part

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

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>
                    

The sizes + srcset 'w' descriptor part

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

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

Firefox

IE

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?