Responsive images

Responsive Images

Responsive redesigns

• Decrease bounce rate

• Increase unique visitors

• Increase time on site

• Increase conversions

• Increase revenue

http://www.lukew.com/ff/entry.asp?1691

Images are still an issue.

• 86% of responsive designs tested from a sample of 347 sites sent the same files to all devices.

Who needs customized images?

1. Small-screen devices

2. High-resolution devices

3. Low-bandwidth situations

Unfortunately, there is no current standard.

Current issues• Multiple downloads

• Cumbersome markup

• No universally reliable bandwidth testing

• Extra processing load

• New formats emerging, but not fully adopted yet

• Art direction

Some solutions• Picturefill

• Adaptive Images

• Foresight.js

• HiSRC

• SVG

• Sencha.IO

Picturefill

• picturefill.js

• 11 K

• github.com/scottjehl/picturefill

Picturefill

<span data-picture data-alt=“Alt text here">!! <span data-src="small.jpg"></span>!! <span data-src=“large.jpg” ! ! ! data-media="(min-width: 600px)"></span>!! <!-- Fallback content for non-JS browsers. -->!! <noscript>!! ! <img src="small.jpg" alt=“Alt text here">!! </noscript>!</span>

Picturefill• Art direction

• Image breakpoint flexibility

• No extra downloads

• No bandwidth testing

• Extra markup

• Processing hit

Adaptive Images

• .htaccess, adaptive-images.php, js cookie

• Apache, PHP 5.x, GD lib

• adaptive-images.com

Adaptive Images

!! ! <img src="image.jpg" alt=“Alt text here">

Adaptive Images• No markup changes

• No image editing

• No extra downloads

• Fast and reliable

• Not good with CDNs

• PHP only

• No art direction

HiSRC

• hisrc.js, initialization script

• jQuery

• 9K

• github.com/teleject/hisrc

HiSRC

<div class="hisrc">!! <img src=“img-200x100.png”!! ! data-1x=“img-400x200.png”!! ! data-2x=“img-800x400.png">!</div>!!!!$(document).ready( function(){! $(".hisrc img").hisrc();!});

HiSRC• Bandwidth testing

• Light markup

• Uses jQuery

• Requires jQuery

• 2-3 image breakpoints

• Multiple downloads

SVG

• Scalable Vector Graphics

• any-image.svg

SVG

<img src=“image.svg”>!!!

SVG

• One image for all devices

• Automatically high-resolution

• Very small size

• Only vector images