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

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


    
 BLAKE CROSBY (@BLAKECROSBY)
 THE IMPORTANCE OF A CDN HELLO! & Review!
  2. 3.
  3. 5.
  4. 6.
  5. 7.
  6. 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.”
  7. 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.”
  8. 10.
  9. 11.
  10. 12.

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

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

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

    and 3. Media queries, a module from the CSS3 specification
  12. 15.
  13. 16.
  14. 18.
  15. 19.
  16. 20.

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

    for 1,031 KB, over 61% of total ! HTTP Archive, January 15 2014
  17. 25.
  18. 26.
  19. 27.
  20. 28.
  21. 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>
  22. 38.
  23. 39.
  24. 40.
  25. 41.
  26. 47.

    SVG

  27. 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>
  28. 52.

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

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

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

    switching (using MQs) • DPR switching (using srcset) • File type switching • Resource priorities
  30. 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>
  31. 56.
  32. 57.
  33. 58.
  34. 59.
  35. 60.

    Optimizations • 14 HTTP requests • 476KB of data transferred

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

    Optimizations • 14 HTTP requests • 476KB of data transferred

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

    Optimizations + RP • 5 HTTP requests • 235KB of

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

    Optimizations + RP • 5 HTTP requests • 235KB of

    data transferred (~92% savings) • 1.11s load time (~70% savings)
  39. 64.
  40. 65.
  41. 66.