responsive images
DESCRIPTION
Overview of responsive imagesTRANSCRIPT
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