Improving Performance with Responsive Images [WebPerfTO]

C3e8ba214714b1402f3073334249fcdc?s=47 newtron
January 22, 2014

Improving Performance with Responsive Images [WebPerfTO]

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

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

January 22, 2014
Tweet

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
  3. None
  4. –Brad Frost “Good performance is good design”

  5. None
  6. None
  7. None
  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.”
  10. None
  11. None
  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%; }

  15. None
  16. None
  17. A solution Serve one big image and let the browser

    scale it
  18. None
  19. None
  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

  25. None
  26. None
  27. None
  28. None
  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

  38. None
  39. None
  40. None
  41. None
  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

  57. None
  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)
  64. None
  65. None
  66. None
  67. David Newton! @newtron on Twitter @nwtn on GitHub david@davidnewton.ca