What's this
Responsive Images thing?

Let's get that explained!

by Anselm Hannemann / @helloanselm

  • Freelance web developer
  • tablet magazines / multi device things

2 years ago

responsive design was easy

we only had:


@media only screen (max-width: 320px) {  }

but 2 years ago is now


@media only screen (max-width: 320px) {  }

@media (max-width: 20em) {  }

how we deal(t) with images:


img{
  max-width: 100%;
  height: auto;
}

Then Apple came with a Retina display

and we were lost.

quadrupled images

@2x = 4 times larger files

img src = 1 source

(+ don't even think about using CSS backgrounds)

…but it didn't bother me too much

…until I bought an Amazon Kindle

Then it happened to me!

I love eInk readers

but they have a black'n'white display.

and when I was reading colored books

sampled output of a colored chart on a greyscale display - no contrast

and my crappy phone…

just displayed me images like that way:

image scaled to fit mobile viewport leads to not recognizable content
image scaled to fit mobile viewport leads to not recognizable content
image scaled to fit mobile viewport leads to not recognizable content image scaled to fit mobile viewport leads to not recognizable content

At that moment I wished we had…

…such thing:

and methods to display

  • different images
  • different crops
  • images for printers
  • images for eInk / black+white
  • images for mobile / desktop / TV

So I searched and asked

but no one had an answer.

Got response by WHATWG and was disillusioned

»we don't need that«

6 months later

I saw an email in WHATWG mailing list

Responsive Images

not only were back again but got support by W3C!

W3C Community Group was build

and over 180 people joined conversation

<picture>

The result of our work for months


<picture>
  <source src="small.jpg" media="(max-width: 20em)">
  <source src="normal.jpg" media="(min-width: 20em)">
  <source src="image.tiff" media="print">

  <img src="small.jpg" alt="fallback image">
</picture>

but it wasn't enough

too long, too much.

srcset-attribute

to the rescue


<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

responsiveimages.org

github.com/ResponsiveimagesCG

  • What is picture?
  • What is srcset?
  • Use Cases
  • Where can I learn more?
  • Try it now: DEMOS

Demo time

But yet no support

So why the fuck am I telling you this?

There is a light on the horizon

and it's called Polyfill

Polyfill

The picturefill allows you to use sort of <picture> today

picturefill

github.com/scottjehl/picturefill


<div data-picture data-alt="alt text">
  <div data-src="small.jpg"></div>
  <div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
  <div data-src="large.jpg" data-media="(min-width: 1000px)"></div>

  <noscript>
    <img src="external/imgs/small.jpg" alt="alt text">
  </noscript>
</div>

Make it a service!

We all know we should use a CDN

What if a CDN optimizes your images?

(automatically)

One does (in alpha):

…and it saves your time!

CDNConnect

<aside>
Device testing anyone?

Find an OpenDeviceLab near you!
opendevicelab.com*

* takeoff on Monday

Done. Questions?

@helloanselm