Responsive Images
Responsive redesigns
• Decrease bounce rate
• Increase unique visitors
• Increase time on site
• Increase conversions
• In...
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 loa...
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.jp...
Picturefill
• Art direction
• Image breakpoint flexibility
• No extra downloads
• No bandwidth testing
• Extra markup
• Pr...
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...
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">!
</...
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
Responsive images
Responsive images
Responsive images
Responsive images
Responsive images
Responsive images
Responsive images
Responsive images
Upcoming SlideShare
Loading in …5
×

Responsive images

740 views

Published on

Overview of responsive images

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive images

  1. 1. Responsive Images
  2. 2. Responsive redesigns • Decrease bounce rate • Increase unique visitors • Increase time on site • Increase conversions • Increase revenue http://www.lukew.com/ff/entry.asp?1691
  3. 3. Images are still an issue.
  4. 4. • 86% of responsive designs tested from a sample of 347 sites sent the same files to all devices.
  5. 5. Who needs customized images?
  6. 6. 1. Small-screen devices
  7. 7. 2. High-resolution devices
  8. 8. 3. Low-bandwidth situations
  9. 9. Unfortunately, there is no current standard.
  10. 10. Current issues • Multiple downloads • Cumbersome markup • No universally reliable bandwidth testing • Extra processing load • New formats emerging, but not fully adopted yet • Art direction
  11. 11. Some solutions • Picturefill • Adaptive Images • Foresight.js • HiSRC • SVG • Sencha.IO
  12. 12. Picturefill • picturefill.js • 11 K • github.com/scottjehl/picturefill
  13. 13. 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>
  14. 14. Picturefill • Art direction • Image breakpoint flexibility • No extra downloads • No bandwidth testing • Extra markup • Processing hit
  15. 15. Adaptive Images • .htaccess, adaptive-images.php, js cookie • Apache, PHP 5.x, GD lib • adaptive-images.com
  16. 16. Adaptive Images ! ! ! <img src="image.jpg" alt=“Alt text here">
  17. 17. Adaptive Images • No markup changes • No image editing • No extra downloads • Fast and reliable • Not good with CDNs • PHP only • No art direction
  18. 18. HiSRC • hisrc.js, initialization script • jQuery • 9K • github.com/teleject/hisrc
  19. 19. 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();! });
  20. 20. HiSRC • Bandwidth testing • Light markup • Uses jQuery • Requires jQuery • 2-3 image breakpoints • Multiple downloads
  21. 21. SVG • Scalable Vector Graphics • any-image.svg
  22. 22. SVG <img src=“image.svg”>! ! !
  23. 23. SVG • One image for all devices • Automatically high-resolution • Very small size • Only vector images

×