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

Improving Performance with Responsive Images [jQueryTO]

newtron
March 15, 2014
Programming
4
450

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

Other Decks in Programming

See All in Programming
K/NとNSKeyedArchiverと私
ryunen344
0
160
ANDPADの攻めと守り
andpad
1
260
ブックマークレットを使おう！
yamish123
0
2.6k
UICollectionView Compositional Layout
usamik26
0
180
DevRel/Japan 2023 - １つの事業部だけで行う DevRel とは
hcrane
0
260
温故知新 TypeScript10年の歴史を振り返る
hyopt
3
1.8k
音声合成してみよう
xztaityozx
2
620
新しいことに挑戦したい組織が考えるべきこと
headwaters
0
130
kotlin-resultを用いて鉄道志向なエラーハンドリングを試みる
blackbracken
1
160
DevToolsではじめる簡単Nostrプロトコル (Nostr勉強会 #0)
heguro
0
160
鹿児島からRubyではじめるスタートアップ
yoshikouki
0
680
Android端末のNFCを無効化しようとしてダメだった話
mitchan
1
2.7k

Featured

See All Featured
How to name files
jennybc
48
76k
Documentation Writing (for coders)
carmenintech
51
3k
Become a Pro
speakerdeck
PRO
6
3.3k
Scaling GitHub
holman
453
140k
The Invisible Side of Design
smashingmag
292
49k
A Philosophy of Restraint
colly
193
15k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
Gamification - CAS2011
davidbonilla
75
4.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
14
1.2k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
Writing Fast Ruby
sferik
613
58k

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