Responsive Images

Yoav Weiss

W3C TAG F2F - London, January 2014

yoavweiss.github.io/respimg-tag-presentation

Responsive images problem

Load properly dimensioned images that fit the page's design in an efficient manner

RWD is awesome!

Images?

Not a problem!

Send the largest image you'd ever need

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

tkadlec.com

Retina only increases these gaps

The difference between low end, small devices and high-end wide devices increases

Responsive Images Problem

3 major use cases

DPR switching

Sending retina images only to retina screens

Viewport switching

Sending variable width images adapted to their display dimensions

Art Direction

Sending images that match layout

Provide further context when necessary

Solution constraints

Must play well with preloader

Proposed Standard Solutions (left standing)

<picture> (2.0) element
Client-Hints headers

picture 2.0

Merges together the benefits of 3 previous proposals

srcset - DPR switching
picture - art direction
srcN - viewport switching

Mechanisms

<source> - art direction
srcset - DPR or dimensions
sizes - layout hints

Examples

DPR switching

  <picture>
    <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">
    <img alt="A rad wolf." src="pic1x.jpg">
  </picture>

or simply

  <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"
       alt="A rad wolf." src="pic1x.jpg">

Art direction

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

Art direction + DPR

  <picture>
     <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
     <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
     <img src="small-1.jpg" srcset="small-1.jpg, small-2.jpg 2x" 
          alt="The president giving an award.">
  </picture>

Viewport switching

  <picture>
    <source sizes="100%" 
            srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w">
    <img src="pic400.jpg" alt="The president giving an award.">
  </picture>

or simply

  <img sizes="100%" 
       srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"
       src="pic400.jpg" alt="The president giving an award.">

Viewport switching #2

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

or simply

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