Improving Performance with Responsive Images [jQueryTO]

jQueryTO
March 15, 2014
https://github.com/nwtn/pres-respimg-perf-jqueryto

Transcript

2. Improving Performance with Responsive Images jQueryTO March 15, 2014
3. https://github.com/nwtn/
 pres-respimg-perf-jqueryto
4. “Good performance is good design” Brad Frost
7. bradfrostweb.com
8. “More human beings today have access to a cellphone than the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010
9. “More human beings today have access to a cellphone than the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010
10. bradfrostweb.com
11. bradfrostweb.com
12. 1.A flexible, grid-based layout, 2.Flexible images and media, 3.Media queries, a module from the CSS3 specification
13. 1.A flexible, grid-based layout, 2.Flexible images and media 3.Media queries, a module from the CSS3 specification
14. img { max-width: 100%; }
17. A solution Serve one big image and let the browser scale it
21. Average web page size: 1,703 KB.
 
 
 Images account for 1,063 KB,
 over 62% of total.
 
 HTTP Archive, March 1 2014
22. 2x resolution = 4x as many pixels
23. energy more pixels = more money time
24. “Good performance is good design” Brad Frost
25. A better solution Serve an appropriately-sized image to each user
26. Responsive Images
31. SVG, WebP, JPEG XR
32. <picture> + srcset:
 http://picture.responsiveimages.org/ Mozilla: Q1
 Blink (Chrome/Opera): Soon
 Webkit (Apple, etc.): Also soon?
 MS: ?
33. <picture> + srcset:
 http://picture.responsiveimages.org/ Mozilla Q1
 Blink (Chrome/Opera) Soon
 Webkit (Apple, etc.) Also soon?
 MS ?
34. Client Hints:
 http://tools.ietf.org/html/draft-grigorik-http-client-hints-01
36. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
37. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
38. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
39. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
40. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
41. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
42. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
43. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg" /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
45. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
46. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
47. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
48. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
49. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
50. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
52. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad wolf" />
53. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad wolf" />
54. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad wolf" />
55. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad wolf" />
56. <img srcset="pic1x.jpg 1x, pic1.5x.jpg 1.5x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad wolf" />
58. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
59. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
60. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
61. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
62. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
63. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
65. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
66. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
67. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
68. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
69. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
70. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
72. <picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
73. <picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
75. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
76. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
77. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
78. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
79. http://picture.responsiveimages.org/
80. Picturefill by Scott Jehl https://github.com/scottjehl/picturefill
81. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img /> </noscript> </span>
82. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img /> </noscript> </span>
83. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img /> </noscript> </span>
84. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img /> </noscript> </span>
85. Imager https://github.com/BBC-News/Imager.js RWD.Images https://github.com/stowball/rwd.images.js
86. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
87. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
91. Resource Priorities http://www.w3.org/TR/resource-priorities/
92. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
93. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
94. ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/
95. grunt-svgmin https://github.com/sindresorhus/grunt-svgmin Scour https://launchpad.net/scour
96. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
97. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer Images Use SVG
98. Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images Use SVG
99. Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images SVG
100. Impact
103. 1,870KB 564KB 3,505KB Images (content) Images (style) Other content
104. Optimizations • ImageOptim-CLI on all images • WebP • Responsive images using Picturefill, for DPI- and viewport switching on content images
105. 1,870KB 564KB 3,505KB Images (content) Images (style) Other content
106. 1,870KB 72KB 261KB Images (content) Images (style) Other content
107. 1,870KB 72KB 534KB Images (content) Images (style) Other content
109. “Good performance is good design” Brad Frost
110. “Responsible images are good design” Dave Newton
111. David Newton! @newtron on Twitter @nwtn on GitHub david@davidnewton.ca