The road to responsive images

Anselm Hannemann

The road to responsive images

by Anselm Hannemann

twitter: @anselmhannemann
ADN: @anselm
held on October, 3rd 2012 at Fronteers Conference Jam session

Why do we need this?

Why do we need this?

  • many devices on the market
  • even more displays and resolutions
  • different network types

Why do we need this?

because this low-res image looks awful on high-res devices

Why do we need this?

and it would be so much cooler to see the high resolution of it on the Retina MacBook Pro, right?

the current situation:

  • large data serving to '320px' devices using EDGE
  • small data to high resolution devices on a LAN network
  • → we cannot serve different crops to different devices

Different crops

we need a solution for that

Solve the problem with

  • a W3C / WHATWG HTML based solution
    • the <picture>-element
  • a bunch of jQuery code
  • a framework that can actually handle it

Solve the problem with

  • a W3C / WHATWG HTML based solution
    • the <picture>-element
  • a bunch of jQuery code
  • a framework that can actually handle it

the <picture>-element

  • contain different sources for one markup-element
  • media-queries
  • is supported by most browsers and backwards-compatible

the <picture>-element

  • is a complex new element
  • you can choose how to deal with responsive images

the syntax

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

the short-hand syntax

			
<picture srcset="small-1.jpg 1x, small-2.jpg 2x">
</picture>
			
		

the short-hand syntax

  • use different sources for different devices
  • let the user agent determine which image to choose

the long syntax

			
<picture>
	<source media="(min-width: 18em)" 
   	srcset="med-1.jpg 1x, med-2.jpg 2x">
   	<source media="(min-width: 45em)" 
   	srcset="large-1.jpg 1x, large-2.jpg 2x">
</picture>
			
		

the long syntax

  • use different sources for different devices
  • you set the media-queries (by size, display type, network connection or other)
  • ability to set different crops for specific devices

Okay, let's be serious!

What to actually do now

  • for background images
    • set them in CSS and use CSS and media-queries to serve low-res and high-res images

Okay, let's be serious!

What to actually do now

Yep, that's it!

…now enjoy your beer and the next jam!

I am Anselm Hannemann

Credits: picture of the road flickr.com/photos/magnusvk/, Shower: github.com/pepelsbey/shower, photo by Obama on Flickr