Responsive Images

New HTML thingies

• <picture>
• srcset attribute
• x descriptor
• w descriptor
• sizes attribute

<dfn>Responsive</dfn>

quick to react in the way that is needed, suitable, or right for a particular situation

<dfn>Responsive</dfn>

quick to react in the way that is needed, suitable, or right for a particular situation

Speed is part of ‘responsive’

0.5 second delay = 20% drop in traffic (Google). 100ms delay = 1% decrease in sales (Amazon)

1 sec delay causes 7% drop in conversions (GlassesDirect)

5 sec improvement in page load time resulted in 5% – 12% increase in revenue (Shopzilla)

The ‘retina’ question

Q: How can I send super high-quality (=huge) images to retina devices but normal quality images (=smaller file size) to devices with non-retina/ small screens?

The ‘retina’ answer

A: I can't.

<img src="blah.jpg">

CSS to the rescue?

<img id=lovely src=mankini.png
  alt="Bruce in a mankini">

@media all and (max-width:320px) {
 #lovely {content: url(lowres-mankini.png);}
 }

Preloader

One study showed preloading makes pages load ~20% faster.

I think preloading is the single biggest performance improvement browsers have ever made.

HTML5 video with MQs

<video>
<source src=foo-lowres.webm media="max-width:480px">
<source src=foo-hires.webm>
  <!-- Fallback content -->
</video>

Notes on Adaptive Images (yet again!) (Dec 2011)

My <picture> strawman

<picture>
<source src=foo-lores.jpg media="max-width:480px">
<source src=foo-full.jpg>
  <!-- Fallback content -->
  <img src="foo-lores.jpg" alt="…">
</picture>

srcset x descriptor

<img src="normal.jpg"
srcset="hi-res.jpg 2x"
alt="…">

srcset x descriptor

<img src="normal.jpg"
srcset="hi-res.jpg 2x, super-res.jpg 3x"
alt="…">

Previously…

<img src="mankini.png" alt="lovely">
…
img {max-width:100%;
height:auto;}