the big picture: responsive images in action #devcon13

THE BIG PICTURE .

responsive images in action

PRESENTED BY MATTHIAS LAU

{ name: "Matthias Lau", link: "http://laumatthias.de", twitter: "@matthiaslau", hometown: { name: "Hamburg, Germany"

}, bio: "E-Commerce Freak and Web-Allrounder, love coding, awesome internet concepts, Chrome, Web Frameworks, Evernote, the Apple Multi-Touch Trackpad, Bouldering, Wikipedia and Espresso.", work: { employer: { name: "Jimdo"

}, },

}

!

A LOT!OPTIMIZED

THEY

!

FOR SMALL VIEWPORTSLARGE IMAGES

STILL...

!

WANT!WE

WHAT

IMAGESOPTIMIZED

IMAGESOPTIMIZED

IMAGESOPTIMIZED

!

DIRECTIONART

!

IMAGESFAST

!

JAVASCRIPT

IT SHOULD

ALSO WORK WITHOUT

CACHING / CDN

<img  src="/img/funny-­‐cat.jpg">

!

CODESIMPLE

TECHNIQUESRESPONSIVE IMAGE

http://matthiaslau.github.io/responsive-images/

SVG´sUSE

BACKGROUNDSCSS

BACKGROUNDSCSS

#iguazu  {        background-­‐image:  url(small.jpg);  }  @media  screen  and  (min-­‐width:  601px)  {        #iguazu  {              background-­‐image:  url(medium.jpg);        }  }

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

IT IS A CSS IMAGE

<div  id="iguazu"  role="img"  aria-­‐label="Iguazu"></div>

ACCESSIBILITY

CARSCLOWN

<img  src="iguazu.svg"  alt="Iguazu  Waterfalls">

<svg  xmlns='http://www.w3.org/2000/svg'>        <title>Iguazu  Waterfalls</title>        <style>              @media  screen  and  (max-­‐width:300px){                    svg{                          background-­‐image:url(http://localhost:8010/responsive_images/img/small.jpg);                    }              }              @media  screen  and  (min-­‐width:301px){                    […]              }        </style>  </svg>

<!-­‐-­‐  use  the  object  tag  for  maximal  browser  support  without  security  drawbacks  -­‐-­‐>  <!-­‐-­‐  put  the  SVG  data  inline  to  prevent  a  second  HTTP  request  -­‐-­‐>  <object  data="data:image/svg+xml,%3Csvg%20viewBox=[…]"  type="image/svg+xml">          <!-­‐-­‐  IE8  fallback  -­‐-­‐>          <!-­‐-­‐[if  lte  IE  8]>          <img  src="medium.jpg"  alt="Iguazu  Waterfalls">          <![endif]-­‐-­‐>  </object>

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

ADAPTIVE IMAGESRESS /

http://adaptive-images.com/

JS

Cookie

viewport width

.htaccess

image request Scaling Logic

best fitting image

Cookie

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

RESIZINGSERVICES

http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg

RESIZING

SERVICES

http://www.sencha.com/learn/how-to-use-src-sencha-io/

<script  src='http://src.sencha.io/screen.js'></script>  !

<img          src='http://src.sencha.io/wiw/http://[...]/huge-­‐hd.jpg'          alt='Iguazu  Waterfalls'          />

RESIZING

SERVICES

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

ELEMENTPICTURE

SRCSET+

<picture>          <source  media="(min-­‐width:  601px)"  src="medium.jpg">          <source  src="small.jpg">          <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">          <!-­‐-­‐  alternate  text  -­‐-­‐>          <p>Iguazu</p>  </picture>

<img  alt="Iguazu"                    src="small.jpg"                    srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">

<picture>          <source  media="(min-­‐width:  601px)"  srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">          <source  src="small.jpg">          <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">          <!-­‐-­‐  alternate  text  -­‐-­‐>          <p>Iguazu</p>  </picture>

<3

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

NO BROWSER SUPPORT YET

PICTUREFILL

https://github.com/Wilto/picturefill-proposalhttps://github.com/scottjehl/picturefill

SIMPLE CODE

FAST

NOJS

CACHING / CDN

ART DIRECTION

MORETHERE IS EVEN

HiSRC

Foresight.js

Riloadr rwdImages

Retina.jsResponsive Enhance

DoubletakeContent Aware Resizing

https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0

Mobify..js

WHAT?a summary

NOW

WHERE POSSIBLE CSS IMAGES

OTHER PICTUREFILL

+ SVG´s

SOMETHINGUSE

please

PROCESSTHE

with grunt

grunt

original

https://github.com/andismith/grunt-responsive-images

options:  {        sizes:  [              {                    name:  "s",                    width:  320,                    quality:  0.6              },              {                    name:  "s",                    suffix:  "x2",                    width:  640,                    quality:  0.6              },          […]                                                    ]  },

files:  [{        expand:  true,        cwd:  'img/',        src:  ['*.{jpg,gif,png}'],        dest:  'img/generated/'  }]

„Don't click this if on a 3G network, it probably take

forever, just check it out when you get home.“

CONTEXT-BASEDIMAGES

forecast:

QUESTIONS?

http://twitter.com/matthiaslau

http://laumatthias.de/

https://www.xing.com/profile/Matthias_Lau