Improving Performance with Responsive Images [WebPerfTO]

Toronto Web Performance Group
January 22, 2014
https://github.com/nwtn/pres-respimg-perf

Transcript

1. @towebperf Tweet! #towebperf ! ! DAVID NEWTON (@NEWTRON)
 RESPONSIVE IMAGES
 
 BLAKE CROSBY (@BLAKECROSBY)
 THE IMPORTANCE OF A CDN HELLO! & Review!
2. Improving Performance with Responsive Images Toronto Web Performance Group January 22, 2014
4. –Brad Frost “Good performance is good design”
8. –Anand Giridharadas, New York Times, April 10 2010 “More human beings today have access to a cellphone than the United Nations says have access to a clean toilet.”
9. –Anand Giridharadas, New York Times, April 10 2010 “More human beings today have access to a cellphone than the United Nations says have access to a clean toilet.”
12. 1. A flexible, grid-based layout, 2. Flexible images and media, and 3. Media queries, a module from the CSS3 specification
13. 1. A flexible, grid-based layout, 2. Flexible images and media, and 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
20. • Average web page size: 1,681 KB • Images account for 1,031 KB, over 61% of total ! HTTP Archive, January 15 2014
21. 2x resolution = 4x as many pixels
22. –Brad Frost “Good performance is good design”
23. A better solution Serve an appropriately-sized image to each user
24. Responsive Images
29. SVG, WebP, JPEG XR
30. • <picture>: http://picture.responsiveimages.org/ • srcset: http://www.w3.org/html/wg/drafts/srcset/ w3c-srcset/ • Client Hints: http://tools.ietf.org/html/draft-grigorik- http-client-hints-01
31. <picture> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> <img alt="A rad wolf." src="pic1x.jpg"> </picture>
32. <picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <img src="small.jpg" alt="The president."> </picture>
33. <picture> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)” srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt="The president."> </picture>
34. <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"> <img src="pic400.jpg" alt="The president."> </picture>
35. <picture> <source type="image/webp" src="prez.webp"> <img src="prez.jpg" alt="The president."> </picture>
36. http://picture.responsiveimages.org/
37. Performance wins
42. Resource Priorities http://www.w3.org/TR/resource-priorities/
43. When can we expect this to work?
44. What can you do now?
45. ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/
46. Use fewer images
47. SVG
48. Picturefill https://github.com/scottjehl/picturefill
49. • Art direction • Viewport switching (using MQs) • DPR switching (using MQs)
50. <span data-picture data-alt="A giant stone face"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> <noscript> <img src="small.jpg" alt="A giant stone face"> </noscript> </span>
51. data-media="(min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"
52. • Art direction • Viewport switching (using MQs) • DPR switching (using MQs) • Resolution switching (using srcset) • File type switching • Resource priorities
53. • Art direction • Viewport switching (using MQs) • DPR switching (using MQs) • DPR switching (using srcset) • File type switching • Resource priorities
54. Picturefull https://github.com/nwtn/picturefill
55. <span data-picture data-postpone data-alt="A giant stone face"> <span data-type="image/webp" data-srcset="small@1x.webp 1x, small@2x.webp 2x"></span> <span data-type="image/webp" data-srcset="medium.webp@1x 1x, medium.webp@2x 2x" data-media="(min-width: 400px)"></span> ... <span data-srcset="small@1x.jpg 1x, small@2x.jpg 2x"></span> <span data-srcset="medium.jpg@1x 1x, medium.jpg@2x 2x" data-media="(min-width: 400px)"></span> ... <noscript> <img src="small@1x.jpg" alt="A giant stone face"> </noscript> </span>
56. Impact
58. No optimizations • 11 HTTP requests • 2.9MB of data transferred • 3.72s load time
59. No optimizations • 11 HTTP requests • 2.9MB of data transferred • 3.72s load time
60. Optimizations • 14 HTTP requests • 476KB of data transferred (~84% savings) • 1.26s load time (~66% savings)
61. Optimizations • 14 HTTP requests • 476KB of data transferred (~84% savings) • 1.26s load time (~66% savings)
62. Optimizations + RP • 5 HTTP requests • 235KB of data transferred (~92% savings) • 1.11s load time (~70% savings)
63. Optimizations + RP • 5 HTTP requests • 235KB of data transferred (~92% savings) • 1.11s load time (~70% savings)
67. David Newton! @newtron on Twitter @nwtn on GitHub david@davidnewton.ca