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

Improving Performance with Responsive Images [j...

newtron
March 15, 2014
Programming
4
630

Improving Performance with Responsive Images [jQueryTO]

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

newtron

March 15, 2014
Tweet

More Decks by newtron

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

Other Decks in Programming

See All in Programming
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
940
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
CloudNativePGを布教したい
nnaka2992
0
120
未経験でSRE、はじめました！ 組織を支える役割と軌跡
curekoshimizu
1
180
JAWS Days 2025のインフラ
komakichi
1
130
Formの複雑さに立ち向かう
bmthd
1
940
読まないコードリーディング術
hisaju
0
110
Jakarta EE meets AI
ivargrimstad
0
530
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.9k

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
15k
How STYLIGHT went responsive
nonsquared
99
5.4k
A Philosophy of Restraint
colly
203
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Fireside Chat
paigeccino
35
3.2k
Why Our Code Smells
bkeepers
PRO
336
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Faster Mobile Websites
deanohume
306
31k
Speed Design
sergeychernyshev
27
810

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 david@davidnewton.ca