Improving Performance with Responsive Images [WebPerfTO]

Transcript

1. 1.

   @towebperf Tweet! #towebperf ! ! DAVID NEWTON (@NEWTRON)
 RESPONSIVE IMAGES


   
 BLAKE CROSBY (@BLAKECROSBY)
 THE IMPORTANCE OF A CDN HELLO! & Review!
2. 2.

   Improving Performance with Responsive Images Toronto Web Performance Group January

   22, 2014
3. 3.

   None
4. 4.

   –Brad Frost “Good performance is good design”

5. 5.

   None
6. 6.

   None
7. 7.

   None
8. 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. 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.”
10. 10.

    None
11. 11.

    None
12. 12.

    1. A flexible, grid-based layout, 2. Flexible images and media,

    and 3. Media queries, a module from the CSS3 specification
13. 13.

    1. A flexible, grid-based layout, 2. Flexible images and media,

    and 3. Media queries, a module from the CSS3 specification
14. 14.

    img { max-width: 100%; }

15. 15.

    None
16. 16.

    None
17. 17.

    A solution Serve one big image and let the browser

    scale it
18. 18.

    None
19. 19.

    None
20. 20.

    • Average web page size: 1,681 KB • Images account

    for 1,031 KB, over 61% of total ! HTTP Archive, January 15 2014
21. 21.

    2x resolution = 4x as many pixels

22. 22.

    –Brad Frost “Good performance is good design”

23. 23.

    A better solution Serve an appropriately-sized image to each user

24. 24.

    Responsive Images

25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 28.

    None
29. 29.

    SVG, WebP, JPEG XR

30. 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. 31.

    <picture> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> <img alt="A

    rad wolf." src="pic1x.jpg"> </picture>
32. 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. 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. 34.

    <picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"> <img

    src="pic400.jpg" alt="The president."> </picture>
35. 35.

    <picture> <source type="image/webp" src="prez.webp"> <img src="prez.jpg" alt="The president."> </picture>

36. 36.

    http://picture.responsiveimages.org/

37. 37.

    Performance wins

38. 38.

    None
39. 39.

    None
40. 40.

    None
41. 41.

    None
42. 42.

    Resource Priorities http://www.w3.org/TR/resource-priorities/

43. 43.

    When can we expect this to work?

44. 44.

    What can you do now?

45. 45.

    ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/

46. 46.

    Use fewer images

47. 47.

    SVG

48. 48.

    Picturefill https://github.com/scottjehl/picturefill

49. 49.

    • Art direction • Viewport switching (using MQs) • DPR

    switching (using MQs)
50. 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. 51.

    data-media="(min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"

52. 52.

    • Art direction • Viewport switching (using MQs) • DPR

    switching (using MQs) • Resolution switching (using srcset) • File type switching • Resource priorities
53. 53.

    • Art direction • Viewport switching (using MQs) • DPR

    switching (using MQs) • DPR switching (using srcset) • File type switching • Resource priorities
54. 54.

    Picturefull https://github.com/nwtn/picturefill

55. 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. 56.

    Impact

57. 57.

    None
58. 58.

    No optimizations • 11 HTTP requests • 2.9MB of data

    transferred • 3.72s load time
59. 59.

    No optimizations • 11 HTTP requests • 2.9MB of data

    transferred • 3.72s load time
60. 60.

    Optimizations • 14 HTTP requests • 476KB of data transferred

    (~84% savings) • 1.26s load time (~66% savings)
61. 61.

    Optimizations • 14 HTTP requests • 476KB of data transferred

    (~84% savings) • 1.26s load time (~66% savings)
62. 62.

    Optimizations + RP • 5 HTTP requests • 235KB of

    data transferred (~92% savings) • 1.11s load time (~70% savings)
63. 63.

    Optimizations + RP • 5 HTTP requests • 235KB of

    data transferred (~92% savings) • 1.11s load time (~70% savings)
64. 64.

    None
65. 65.

    None
66. 66.

    None
67. 67.

    David Newton! @newtron on Twitter @nwtn on GitHub david@davidnewton.ca