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
690
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
240
Universal web design [HackerYou a11y club]
Avatar for newtron newtron
0
230
Universal web design [Full Stack Toronto]
Avatar for newtron newtron
0
270
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
400
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
720
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
380

Other Decks in Programming

See All in Programming
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
190
Codex CLI でつくる、Issue から merge までの開発フロー
Avatar for amata1219 amata1219
0
280
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
150
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
160
今こそ押さえておきたい アマゾンウェブサービス（AWS）の データベースの基礎 おもクラ #6版
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
220
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
110
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
110
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
120
PHP 7.4でもOpenTelemetryゼロコード計装がしたい！ / PHPerKaigi 2026
Avatar for Arthur arthur1
1
460
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.5k
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
250
Nuxt Server Components
Avatar for wattanx wattanx
0
230

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
730
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
720
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190

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]