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

Improving Performance with Responsive Images [j...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
310
Improving performance with responsive (and responsible!) images [OpenWest]
Avatar for newtron newtron
2
400

Other Decks in Programming

See All in Programming
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
840
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
260
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
0
410
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
0
350
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
170
新卒PdEのリアル
Avatar for ryu ryu1013
1
390
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
3
1k
FDEとは、何者なのか？
Avatar for Masapyon masapyon1212
0
140
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
0
220
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
260
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
100

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
240
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
300
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
890
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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]