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
4
680

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
Tweet

More Decks by newtron

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

Other Decks in Programming

See All in Programming
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
240
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
620
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
270
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
290
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
460

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
210
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k

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]