Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving Performance with Responsive Images [W...

newtron
January 22, 2014

Improving Performance with Responsive Images [WebPerfTO]

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

newtron

January 22, 2014
Tweet

More Decks by newtron

Other Decks in Programming

Transcript

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


    
 BLAKE CROSBY (@BLAKECROSBY)
 THE IMPORTANCE OF A CDN HELLO! & Review!
  2. –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.”
  3. –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.”
  4. 1. A flexible, grid-based layout, 2. Flexible images and media,

    and 3. Media queries, a module from the CSS3 specification
  5. 1. A flexible, grid-based layout, 2. Flexible images and media,

    and 3. Media queries, a module from the CSS3 specification
  6. • Average web page size: 1,681 KB • Images account

    for 1,031 KB, over 61% of total ! HTTP Archive, January 15 2014
  7. <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>
  8. SVG

  9. <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>
  10. • Art direction • Viewport switching (using MQs) • DPR

    switching (using MQs) • Resolution switching (using srcset) • File type switching • Resource priorities
  11. • Art direction • Viewport switching (using MQs) • DPR

    switching (using MQs) • DPR switching (using srcset) • File type switching • Resource priorities
  12. <span data-picture data-postpone data-alt="A giant stone face"> <span data-type="image/webp" data-srcset="[email protected]

    1x, [email protected] 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="[email protected] 1x, [email protected] 2x"></span> <span data-srcset="medium.jpg@1x 1x, medium.jpg@2x 2x" data-media="(min-width: 400px)"></span> ... <noscript> <img src="[email protected]" alt="A giant stone face"> </noscript> </span>
  13. Optimizations • 14 HTTP requests • 476KB of data transferred

    (~84% savings) • 1.26s load time (~66% savings)
  14. Optimizations • 14 HTTP requests • 476KB of data transferred

    (~84% savings) • 1.26s load time (~66% savings)
  15. Optimizations + RP • 5 HTTP requests • 235KB of

    data transferred (~92% savings) • 1.11s load time (~70% savings)
  16. Optimizations + RP • 5 HTTP requests • 235KB of

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