Responsive Images

Yoav Weiss

August 2014

yoavweiss.github.io/respimg-indi-workshop

Who????

• 
• 
• Srcset & Picture implementation

What is Responsive images?

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

<history>

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 63%

httparchive.org

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> proposal

srcset proposal

Picture *and* srcset

Browsers weren't convinced

18 (EIGHTEEN!!!) months later

Paris!

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

A group effort

It went well

And patches got landing

~60 patches later

Blink work is done

WebKit is underway

Hopefully shipping in Chrome 38

</history>

<syntax>

Picture 2.0™

The srcset 'x' part

Use case - "Retina images"

Load hi-res images

on hi-res devices

The syntax

<img src="1x.jpg" srcset="2x.jpg 2x, 3x.jpg 3x" 
     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">
                    

All together now

<picture>
    <source media="(min-width: 80em)"
            srcset="fixed_with_bg.1x.jpg 1x, fixed_with_bg.2x.jpg 2x">
    <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">
</picture>
                    

</syntax>

<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

</support>

<advice>

To picturefill or

Source order matters

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

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

Source-size order matters

sizes="(max-width: 30em) 100vw, 
     (max-width: 50em) 50vw, 
     calc(33vw - 100px)"
                    

sizes="(max-width: 50em) 50vw,
     (max-width: 30em) 100vw, 
     calc(33vw - 100px)"
                    

'sizes' default value

<img src="otherpic.jpg" alt="The president giving an award."
     srcset="pic100.jpg 100w, pic200.jpg 200w">
                    

<img src="otherpic.jpg" sizes="100vw"
     alt="The president giving an award."
     srcset="pic100.jpg 100w, pic200.jpg 200w">
                    

Intrinsic sizing

Moar intrinsic sizing

@viewport should be inlined!

<style>
    @viewport {
        width: auto;
    }
</style>
                    

src cannot be selected when 'w' is present

<img src="otherpic.jpg" alt="The president giving an award."
     srcset="pic100.jpg 100w, pic200.jpg 200w">
                    

Old 'w' syntax

Styling

"Picture is a magical span, nothing more"

- Tab Atkins

Future compat

Feature detection FTW!

HTMLImageElement.sizes & HTMLPictureElement

Which resource was picked?

currentSrc to the rescue

</advice>

The path not (yet) taken

Client Hints

Content negotiation based

Request headers

CH-DPR

CH-RW

Implicitly relies on 'sizes'

Response headers

DPR

Server confirmation header

Used for intrinsic image sizing

Opt-in only

Not sent on initial HTML request

Responsive Image Container

• File format approach
• A "layer" per resolution
• Both resolution switching and art-direction

Resolution switching

336x635

106x200

211x400

336x635

Art-direction

770x512

200x200

400x288

770x512

Advantages

• Markup left untouched
• A single file per image
• Better for post-download dimensions changes

disadvantages

• Touches many layers. Will take time
• Decoding performance???
• Fetching mechanism network performance???

To sum it up

Thanks!

@yoavweiss on Twitter & GitHub

responsiveimages.org

Slides: yoavweiss.github.io/respimg-indi-workshop

Questions?