$30 off During Our Annual Pro Sale. View Details »

Improving Performance with Responsive Images [jQueryTO]

newtron
March 15, 2014
Programming
4
490

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
170
Universal web design [HackerYou a11y club]
newtron
0
150
Universal web design [Full Stack Toronto]
newtron
0
160
Information architecture as knowledge translation [World IA Day]
newtron
0
220
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
290
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
220
Improving performance with responsive (and responsible!) images [CSSConf]
newtron
6
550
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
210
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
320

Other Decks in Programming

See All in Programming
アーキテクチャ刷新の現場 / Scene of architectural renewal
nrslib
3
770
ニフティ社内ISUCON開催への道のり - NIFTY Tech Day 2023
niftycorp
0
140
10年モノのAndroidアプリのコード品質を改善していく、3つの取り組み
okuzawats
0
660
Java 8 から 21 へのバージョンアップでどう変わる？：実アプリケーションで学ぶ実装のポイント / 20231111 Key Implementation Points from Java 8 to 21
mackey0225
6
550
Next.js App Router での MPA フロントエンド刷新
mugi_uno
28
9.3k
Unity Searchを拡張して高度な検索型UIを実現する
trapezoid
0
500
君たちはどうプログラミングするか
tanakahisateru
7
900
ニジエチューニング2023-12
nijieinfra
0
170
コードを読みやすくしよう！〜秒で身に付くよい命名〜 (LT) - NIFTY Tech Day 2023
niftycorp
1
130
フロントエンドエンジニアも知っておきたい HTTP/3 で変わること
yahiru
17
9.7k
Better Code Design in PHP
afilina
PRO
1
390
Microservices: what does good look like? (Nov 2023)
cer
PRO
0
500

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Reflections from 52 weeks, 52 projects
jeffersonlam
342
19k
Design by the Numbers
sachag
272
18k
GraphQLの誤解/rethinking-graphql
sonatard
45
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Into the Great Unknown - MozCon
thekraken
7
660
Bootstrapping a Software Product
garrettdimon
PRO
299
110k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
12k
What's new in Ruby 2.0
geeforr
336
30k
Docker and Python
trallard
32
2.4k

Transcript

  1. View Slide

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

    View Slide

  3. https://github.com/nwtn/

    pres-respimg-perf-jqueryto

    View Slide

  4. “Good performance is
    good design”
    Brad Frost

    View Slide

  5. View Slide

  6. View Slide

  7. bradfrostweb.com

    View Slide

  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

    View Slide

  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

    View Slide

  10. bradfrostweb.com

    View Slide

  11. bradfrostweb.com

    View Slide

  12. 1.A flexible, grid-based layout,
    2.Flexible images and media,
    3.Media queries, a module from
    the CSS3 specification

    View Slide

  13. 1.A flexible, grid-based layout,
    2.Flexible images and media
    3.Media queries, a module from
    the CSS3 specification

    View Slide

  14. img {
    max-width: 100%;
    }

    View Slide

  15. View Slide

  16. View Slide

  17. A solution
    Serve one big image and
    let the browser scale it

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    

    

    Images account for 1,063 KB,

    over 62% of total.

    

    HTTP Archive, March 1 2014

    View Slide

  22. 2x resolution = 4x as many pixels

    View Slide

  23. energy
    more pixels = more money
    time

    View Slide

  24. “Good performance is
    good design”
    Brad Frost

    View Slide

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

    View Slide

  26. Responsive Images

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. SVG, WebP, JPEG XR

    View Slide

  32. + srcset:

    http://picture.responsiveimages.org/
    Mozilla: Q1

    Blink (Chrome/Opera): Soon

    Webkit (Apple, etc.): Also soon?

    MS: ?

    View Slide

  33. + srcset:

    http://picture.responsiveimages.org/
    Mozilla Q1

    Blink (Chrome/Opera) Soon

    Webkit (Apple, etc.) Also soon?

    MS ?

    View Slide

  34. Client Hints:

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

    View Slide

  35. View Slide



  36. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  37. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  38. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  39. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  40. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  41. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  42. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide



  43. src="large.jpg" />
    src="med.jpg" />
    !



    View Slide

  44. View Slide




  45. !



    View Slide




  46. !



    View Slide




  47. !



    View Slide




  48. !



    View Slide




  49. !



    View Slide




  50. !



    View Slide

  51. View Slide

  52. src="pic1x.jpg"
    alt="A rad wolf" />

    View Slide

  53. src="pic1x.jpg"
    alt="A rad wolf" />

    View Slide

  54. src="pic1x.jpg"
    alt="A rad wolf" />

    View Slide

  55. src="pic1x.jpg"
    alt="A rad wolf" />

    View Slide

  56. src="pic1x.jpg"
    alt="A rad wolf" />

    View Slide

  57. View Slide


  58. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide


  59. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide


  60. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide


  61. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide


  62. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide


  63. srcset="large1.jpg 1x,
    large2.jpg 2x" />
    srcset="med1.jpg 1x,
    med2.jpg 2x" />



    View Slide

  64. View Slide


  65. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  66. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  67. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  68. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  69. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  70. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide

  71. View Slide


  72. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide


  73. srcset="pic400.jpg 400w,
    pic800.jpg 800w,
    pic1600.jpg 1600w" />
    !


    View Slide

  74. View Slide


  75. src="wolf.webp" />


    View Slide


  76. src="wolf.webp" />


    View Slide


  77. src="wolf.webp" />


    View Slide


  78. src="wolf.webp" />


    View Slide

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

    View Slide

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

    View Slide


  81. data-srcset=""
    data-src=""
    data-type=""
    data-media="">




    View Slide


  82. data-srcset=""
    data-src=""
    data-type=""
    data-media="">




    View Slide


  83. data-srcset=""
    data-src=""
    data-type=""
    data-media="">




    View Slide


  84. data-srcset=""
    data-src=""
    data-type=""
    data-media="">




    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. View Slide

  89. View Slide

  90. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  100. Impact

    View Slide

  101. View Slide

  102. View Slide

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

    View Slide

  104. Optimizations
    • ImageOptim-CLI on all images
    • WebP
    • Responsive images using Picturefill, for DPI- and
    viewport switching on content images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  108. View Slide

  109. “Good performance is
    good design”
    Brad Frost

    View Slide

  110. “Responsible images are
    good design”
    Dave Newton

    View Slide

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

    View Slide