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

Improving Performance with Responsive Images [j...

Avatar for newtron newtron
March 15, 2014
Programming
710
4

Improving Performance with Responsive Images [jQueryTO]

jQueryTO
March 15, 2014
https://github.com/nwtn/pres-respimg-perf-jqueryto

Avatar for newtron

newtron

March 15, 2014

More Decks by newtron

See All by newtron
Universal web design [Accessibility Camp Toronto]
Avatar for newtron newtron
0
250
Universal web design [HackerYou a11y club]
Avatar for newtron newtron
0
240
Universal web design [Full Stack Toronto]
Avatar for newtron newtron
0
280
Information architecture as knowledge translation [World IA Day]
Avatar for newtron newtron
0
320
Improving performance with responsive (and responsible!) images [CSSDay.io]
Avatar for newtron newtron
1
410
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
Avatar for newtron newtron
0
300
Improving performance with responsive (and responsible!) images [CSSConf]
Avatar for newtron newtron
6
740
Universal Web Design: How to create an awesome experience for every user [OpenWest]
Avatar for newtron newtron
0
300
Improving performance with responsive (and responsible!) images [OpenWest]
Avatar for newtron newtron
2
390

Other Decks in Programming

See All in Programming
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.1k
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
180
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
350
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
1.3k
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.7k
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
Avatar for tk3fftk tk3fftk
0
170
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
360
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
200
symfony/aiとlaravel/boost
Avatar for Hiromi Hishida 77web
0
120
Hatena Engineer Seminar #37「言語モデルの活用に関する研究」
Avatar for SlashNephy slashnephy
0
500
分散システム、なんですぐ死んでしまうん？耐障害性を高めたいあなたのためのレジリエンスパターン入門
Avatar for Mitsuhiro Shibuya mshibuya
7
4.9k
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
1k

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
960
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
670
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
330
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
350
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
280
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
210
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k

Transcript

  1. None

  2. Improving Performance with Responsive Images jQueryTO March 15, 2014

  3. https://github.com/nwtn/
 pres-respimg-perf-jqueryto

  4. “Good performance is good design” Brad Frost

  5. None
  6. None

  7. bradfrostweb.com

  8. “More human beings today have access to a cellphone than

    the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010

  9. “More human beings today have access to a cellphone than

    the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010

  10. bradfrostweb.com

  11. bradfrostweb.com

  12. 1.A flexible, grid-based layout, 2.Flexible images and media, 3.Media queries,

    a module from the CSS3 specification

  13. 1.A flexible, grid-based layout, 2.Flexible images and media 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. None

  21. Average web page size: 1,703 KB.
 
 
 Images account

    for 1,063 KB,
 over 62% of total.
 
 HTTP Archive, March 1 2014

  22. 2x resolution = 4x as many pixels

  23. energy more pixels = more money time

  24. “Good performance is good design” Brad Frost

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

  26. Responsive Images

  27. None
  28. None
  29. None
  30. None

  31. SVG, WebP, JPEG XR

  32. <picture> + srcset:
 http://picture.responsiveimages.org/ Mozilla: Q1
 Blink (Chrome/Opera): Soon
 Webkit

    (Apple, etc.): Also soon?
 MS: ?

  33. <picture> + srcset:
 http://picture.responsiveimages.org/ Mozilla Q1
 Blink (Chrome/Opera) Soon
 Webkit

    (Apple, etc.) Also soon?
 MS ?

  34. Client Hints:
 http://tools.ietf.org/html/draft-grigorik-http-client-hints-01

  35. None

  36. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  37. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  38. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  39. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  40. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  41. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  42. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>

  43. <picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"

    /> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
  44. None

  45. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

  46. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

  47. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

  48. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

  49. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

  50. <picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,

    pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
  51. None

  52. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad

    wolf" />

  53. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad

    wolf" />

  54. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad

    wolf" />

  55. <img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad

    wolf" />

  56. <img srcset="pic1x.jpg 1x, pic1.5x.jpg 1.5x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg"

    alt="A rad wolf" />
  57. None

  58. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

  59. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

  60. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

  61. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

  62. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

  63. <picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source

    media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
  64. None

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

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

    ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
  71. None

  72. <picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg

    400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

  73. <picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg

    400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
  74. None

  75. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"

    /> </picture>

  76. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"

    /> </picture>

  77. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"

    /> </picture>

  78. <picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"

    /> </picture>

  79. http://picture.responsiveimages.org/

  80. Picturefill by Scott Jehl https://github.com/scottjehl/picturefill

  81. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img

    /> </noscript> </span>

  82. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img

    /> </noscript> </span>

  83. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img

    /> </noscript> </span>

  84. <span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img

    /> </noscript> </span>

  85. Imager https://github.com/BBC-News/Imager.js RWD.Images https://github.com/stowball/rwd.images.js

  86. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG

  87. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG
  88. None
  89. None
  90. None

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

  92. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG

  93. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG

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

  95. grunt-svgmin https://github.com/sindresorhus/grunt-svgmin Scour https://launchpad.net/scour

  96. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG

  97. Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer

    Images Use SVG

  98. Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images

    Use SVG

  99. Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images

    SVG

  100. Impact

  101. None
  102. None

  103. 1,870KB 564KB 3,505KB Images (content) Images (style) Other content

  104. Optimizations • ImageOptim-CLI on all images • WebP • Responsive

    images using Picturefill, for DPI- and viewport switching on content images

  105. 1,870KB 564KB 3,505KB Images (content) Images (style) Other content

  106. 1,870KB 72KB 261KB Images (content) Images (style) Other content

  107. 1,870KB 72KB 534KB Images (content) Images (style) Other content

  108. None

  109. “Good performance is good design” Brad Frost

  110. “Responsible images are good design” Dave Newton

  111. David Newton! @newtron on Twitter @nwtn on GitHub [email protected]