Responsive images

725 views
617 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
725
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

×