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