Overview of responsive images

1. Responsive Images

3. Responsive redesigns
• Decrease bounce rate
• Increase unique visitors
• Increase time on site
• Increase conversions
• Increase revenue
http://www.lukew.com/ff/entry.asp?1691

4. Images are still an issue.

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

10. Who needs customized
images?

11. 1. Small-screen devices

12. 2. High-resolution devices

13. 3. Low-bandwidth situations

16. Unfortunately, there is
no current standard.

17. Current issues
• Multiple downloads
• Cumbersome markup
• No universally reliable bandwidth testing
• Extra processing load
• New formats emerging, but not fully
adopted yet
• Art direction

18. Some solutions
• Picturefill
• Adaptive Images
• Foresight.js
• HiSRC
• SVG
• Sencha.IO

19. Picturefill
• picturefill.js
• 11 K
• github.com/scottjehl/picturefill

20. 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>

21. Picturefill
• Art direction
• Image breakpoint flexibility
• No extra downloads
• No bandwidth testing
• Extra markup
• Processing hit

22. Adaptive Images
• .htaccess, adaptive-images.php, js cookie
• Apache, PHP 5.x, GD lib
• adaptive-images.com

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

24. Adaptive Images
• No markup changes
• No image editing
• No extra downloads
• Fast and reliable
• Not good with CDNs
• PHP only
• No art direction

25. HiSRC
• hisrc.js, initialization script
• jQuery
• 9K
• github.com/teleject/hisrc

26. 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();!
});

27. HiSRC
• Bandwidth testing
• Light markup
• Uses jQuery
• Requires jQuery
• 2-3 image breakpoints
• Multiple downloads

28. SVG
• Scalable Vector Graphics
• any-image.svg

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

30. SVG
• One image for all devices
• Automatically high-resolution
• Very small size
• Only vector images