Responsive images
Download as PPTX, PDF0 likes372 views
The document discusses responsive images and how to efficiently load properly sized images that fit the page design. It notes that images account for over half the average page size and bandwidth is expensive on mobile. The key techniques discussed are using srcset and sizes attributes to load the best sized image based on screen width, and using x descriptors and art direction with <picture> for high DPI screens. Implementing responsive images can reduce image file sizes by over 70%.
Responsive images
- 1. Responsive Images September 1, 2015 Paul Stonier | www.paulstonier.com | 607-358-5199
- 2. –Yoav Weiss “Efficiently load properly dimensioned images that fit the page’s design”
- 3. –Yoav Weiss “Efficiently load properly dimensioned images that fit the page’s design”
- 4. –Yoav Weiss “Efficiently load properly dimensioned images that fit the page’s design”
- 5. Mobile • Bandwidth is expensive. • Download speeds are slow.
- 6. Images account for 56% of the average page’s total size. http://www.webperformancetoday.com/2014/12/02/page-bloat-update-average-top-1000-web-page-1795-kb-size/
- 9. Resolution-based selection Developers generally want to provide the same image in multiple resolutions, so that high-res devices can get the optimum image for a given resolution, while low-resolution devices can avoid wasting time and bandwidth downloading overly-large files. https://usecases.responsiveimages.org/
- 10. Responsive images can result in ~72% less image weight. http://timkadlec.com/2013/06/why-we-need-responsive-images/
- 12. How do we fix it? <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin"> If the screen size is 500px, small.jpg will load because it’s the largest size that fits within the viewport. If the screen size is 700px, medium.jpg will load because it’s the largest size that fits within the viewport.
- 13. How do we fix it? <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin"> If the screen size is 1000px, small.jpg will load because it’s the largest size that fits within 50% of the viewport. If the screen size is 2048px, large.jpg will load because it’s the largest size that fits within 50% of the viewport.
- 14. How do we fix it? <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin"> If the screen size is 1440px and 2X DPI, large.jpg will load because… 2x DPI results in (srcset width)/2. 1024w/2 = 512w 512w is the largest that will fit in the 50% of the viewport (720px)
- 15. The x descriptor <img src=“kittens-small.jpg” srcset=“kittens-hires.jpg 2x, kittens-medium.jpg 1.5x” sizes="100vw" alt=“kittens in a pumpkin">
- 17. <picture> • Art Direction • Mime Type
- 20. <picture> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
- 21. <picture> <picture> <source media="(min-width: 36em)" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="33.3vw" /> <img src="fallback.jpg" alt=""> </picture>
- 22. <picture> <picture> <source type="image/svg" src="logo.svg" /> <source type="image/png" src="logo.png" /> <img src="logo.gif" alt="RadWolf, Inc." /> </picture>
- 23. WordPress https://make.wordpress.org/core/tag/respimg/ Drupal https://www.youtube.com/watch?v=TxNW0YNylLI Grunt https://github.com/nwtn/grunt-respimg LazySizes https://github.com/aFarkas/lazysizes https://responsiveimages.org/ THE RICG ON GITHUB http://gh.responsiveimages.org IRC LOGS http://ircbot.responsiveimages.org DISCUSSION LIST ARCHIVES http://list.responsiveimages.org
- 24. Questions? Paul Stonier | www.paulstonier.com | 607-358-5199
- 25. Thank you Paul Stonier | www.paulstonier.com | 607-358-5199