Responsive Images

Yoav Weiss

Opera - June 2014

yoavweiss.github.io/respimg-opera-workshop

Who????

  • Srcset & Picture implementation

What is Responsive images?

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

<history>

Started out as

My 500£ phone is showing blurry images

"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

How much can be saved?

Up to™ 72% image data savings

tkadlec.com

How can we measure?

Sizer Soze

What??

Measures the difference between current images & perfectly sized images

How does it work?

  • Download a page using phantomJS
  • Look at image dimensions
  • Download the images
  • Resize to displayed dimensions

SSAAS

sizersoze.org

So quality issues became

data plan abuse

And...

Large images?

Ain't nobody got time for that!

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

</syntax>

<support>

blog.thestudio4.co.uk

Blink - Chrome & Opera

Implemention (almost) done!
  • srcset 'x' descriptor already shipped
  • sizes and srcset - behind a flag
  • picture - almost done
  • Hopefully shipping soon!
  • Firefox

    Planned to ship in Firefox 33!!!

    IE

    Showing interest

    WebKit

    Implemented & shipped srcset's 'x' descriptor

    Willing to accept patches behind a compile flag

    I'm currently working on patches

    </support>

    <internals>

    Media Queries evaluation in the preloader

    PreloadScanner requires off-main-thread MQ eval

    Who's afraid of the big, bad preloader

    AKA

    • PreloadScanner
    • Speculative parser
    • Look-ahead scanner

    "The greatest browser optimization of all times"

    - Steve Souders

    What does it do?

    • Scans the document when the parser is blocked
    • Figures out resources that need to be downloaded
    • Adds them to the download queue

    How important is that???

    SmashingMag - With preloader

    DCL - 2390; PLT - 3585

    Using chromeHAR

    SmashingMag - No preloader

    DCL - 5395; PLT - 7193

    BBC - With preloader

    DCL - 5022; PLT - 5980

    Using chromeHAR

    BBC - Without preloader

    DCL - 7660; PLT - 7957

    MediaQueryTokenizer

    MediaQueryParser

    MediaValues

    Intrinsic sizing

    Async image loading

    Required to avoid double download

    Also required for img attribute setting

    Worked on by Christian Biesinger (Thanks, Christian! :))

    Future improvements?

    http://earnthis.net/brian-terrills-100-film-favorites-22-back-to-the-future-part-ii/

    Smarter resource selection

    User preference, bandwidth considerations ...

    Content embedder selection policy

    </internals>

    <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">
                        
    is identical to
    
    <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

    Very similar, but very different

    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>

    <wwic>

    Custom MQs to the rescue

    Content images need to be in content

    CSS override is not really implementable

    Not a respimg specific problem

    </wwic>

    <quiz>

    AKA: What's wrong with this <picture>?

    
    <picture>
        <source sizes="100vw"
             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">
    </picture>
                            

    Unnecessary picture

    
    <img src="otherpic.jpg" sizes="100vw"
         alt="The president giving an award."
         srcset="pic100.jpg 100w, pic200.jpg 200w">
                            
    
    <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 order

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

    src is ignored on source

    
    <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>
                            
    
    sizes="(max-width: 30em) 100vw, 
           calc(33vw - 100px),
           (max-width: 50em) 50vw"
                            

    source-size order

    
    sizes="(max-width: 30em) 100vw,
           (max-width: 50em) 50vw,
               calc(33vw - 100px)"
                            
    
    <img src="small.jpg" alt="The president."
         srcset="400x200.jpg 600w, 800x400.jpg 1200w">
                            

    Image dimensions should be accurate

    
    <img src="small.jpg" alt="The president."
         srcset="400x200.jpg 400w, 800x400.jpg 800w">
                            
    
    <img alt="The president." srcset="small.jpg 600w, large.jpg 1200w">
                            

    src fallback

    
    <img alt="The president." src="fallback.jpg" 
         srcset="small.jpg 600w, large.jpg 1200w">
                            
    
    <img src="small.jpg" alt="The president."
         srcset="small.jpg 1x, medium.jpg 1.5x, large.jpg 2x">
                            

    Duplicate 1x url

    
    <img src="small.jpg" alt="The president."
         srcset="medium.jpg 1.5x, large.jpg 2x">
                            

    </quiz>

    The path not (yet) taken

    Client Hints

    Content negotiation based

    Request headers

    CH-DPR

    CH-RW

    Resource Width

    Implicitly relies on src-N's viewport-url

    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

    Is split into

    106x200

    211x400

    336x635

    Art-direction

    770x512

    Is split into

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

    Do we have time?

    Progressive image download

    To sum it up

    Thanks!

    @yoavweiss on Twitter & GitHub

    responsiveimages.org

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

    Questions?