Responsive Images:

Coming Soon!

Who????

What is Responsive images?

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

<history>

At the beginning

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"

EAZZZZZZY!!!

BLOAT!!!

72% Serve same resources

guypo.com

Which resources?

Images - over 63%

httparchive.org

How much can be saved?

Up to™ 72% image data savings

data plan abuse

People demanded a solution

Turned to the mailing lists

Proposals!

Moar proposals!

And MOAR!!!

<picture> proposal

srcset proposal

Picture vs. srcset!

Picture *and* srcset

Browsers weren't convinced

9 months later

Src-N

Moar proposals???

Back to picture

Mozilla were positive

Blink tho

So, crowdfunding to the rescue

Patches got landing

~80 patches later

Blink work is done

WebKit is half way through

Shipped in Chrome 38

A group effort

</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, 2.6x.jpg 2.6x" 
     alt="A cat. On the phone.">
                    

The <picture> part

Use case

Art direction

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>
                    

Use case #2 - MIME type fallback

Mime type fallback syntax

<picture>
     <source type="image/webp" 
               srcset="prez.webp">
     <source type="image/vnd.ms-photo" 
               srcset="prez.jpx">
     <img src="prez.jpg" alt="The president.">
</picture>
                    

The sizes + srcset 'w' descriptor part

use case

variable width images

The syntax

<img src="otherpic.jpg" 
     sizes="50vw"
     srcset="cat100.jpg 100w, 
             cat200.jpg 200w, cat400.jpg 400w,
             cat800.jpg 800w, cat1600.jpg 1600w"
     alt="A cat. On the phone.">
                    

The syntax

<img src="otherpic.jpg" 
     sizes="(max-width: 30em) 100vw, 
          (max-width: 50em) 50vw, 
          calc(33vw - 100px)"
     srcset="cat100.jpg 100w, 
             cat200.jpg 200w, cat400.jpg 400w, 
             cat800.jpg 800w, cat1600.jpg 1600w"
     alt="A cat. On the phone.">
                    

`sizes` is an optimization

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" 
         sizes="(max-width: 30em) 100vw, 
                (max-width: 50em) 50vw, 
                calc(33vw - 100px)"
         srcset="cat100.jpg 100w, cat200.jpg 200w, 
                 cat400.jpg 400w, ..."
         alt="A cat. On the phone.">
</picture>
                    

<support>

</support>

<advice>

To picturefill or

<picture> or srcset?

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"
     srcset="pic100.jpg 100w, pic200.jpg 200w">
                    

<img src="otherpic.jpg" sizes="100vw"
     srcset="pic100.jpg 100w, pic200.jpg 200w">
                    

Intrinsic sizing

Moar intrinsic sizing

Styling

"Picture is a magical span, nothing more"

- Tab Atkins

Alternative text

Future compat

Feature detection FTW!

HTMLImageElement.sizes & HTMLPictureElement

Which resource was picked?

HTMLImageElement.currentSrc

</advice>

The path not (yet) taken

Client Hints

Content negotiation based

To sum it up

Responsive images

are coming HERE!

Thanks!

@yoavweiss on Twitter & GitHub

responsiveimages.org

Velocity - NYC, September 2014

yoavweiss.github.io/respimg_velocity_nyc_2014

Questions?