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

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/

11. Properly Dimensioned

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">

16. Why this works
http://ericportis.com/posts/2014/srcset-sizes/

17. <picture>
• Art Direction
• Mime Type

18. Art Direction
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-
solutions/#artdirection

19. Art Direction
https://usecases.responsiveimages.org/#

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