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

Get the LEAST from your images

Dean Hume
November 15, 2013

Get the LEAST from your images

This talk was presented at Velocity Europe 2013.

http://deanhume.com
http://robinosborne.co.uk

Dean Hume

November 15, 2013
Tweet

More Decks by Dean Hume

Other Decks in Technology

Transcript

  1. @deanohume
    Getting the
    LEAST from
    your images
    @rposbo

    View Slide

  2. View Slide

  3. Images are
    awesome

    View Slide

  4. View Slide

  5. But they aren’t
    great for web
    performance

    View Slide

  6. in fact....

    View Slide

  7. They are greedy
    Stylesheets,
    HTML, etc
    Images
    JavaScript

    View Slide

  8. Images are the biggest part of
    a web page
    Stylesheets,
    HTML, etc
    Images 60%
    JavaScript

    View Slide

  9. 56

    View Slide

  10. The average web page
    makes 56 image
    requests per page
    * Source: HttpArchive.org

    View Slide

  11. 42% of all websites
    make over 50 image
    requests per page
    * Source: HttpArchive.org

    View Slide

  12. The Web wouldn’t
    be the same without
    images

    View Slide

  13. ...So

    View Slide

  14. We need to
    Make more efficient use of requests

    View Slide

  15. We need to
    Make more efficient use of requests
    &
    Reduce the size of the images

    View Slide

  16. We will look at

    View Slide

  17. We will look at
    - Well known methods for reducing the size
    of your images and http requests

    View Slide

  18. We will look at
    - Well known methods for reducing the size
    of your images and http requests
    - Some lesser known methods

    View Slide

  19. We will look at
    - Well known methods for reducing the size
    of your images and http requests
    - Some lesser known methods
    - The future of images on the web

    View Slide

  20. The Basics

    View Slide

  21. Things everyone should be doing

    View Slide

  22. Things everyone should be doing

    View Slide

  23. Things everyone should be doing
    Image optimization

    View Slide

  24. Things everyone should be doing
    Image optimization
    Spriting images

    View Slide

  25. Things everyone should be doing
    Image optimization
    Spriting images
    Lazy loading

    View Slide

  26. Image
    Optimization
    tools

    View Slide

  27. Offline tools

    View Slide

  28. - Image Magick
    - Jpeg Optim
    - Jpeg Tran
    Jpeg

    View Slide

  29. - Image Magick
    - Jpeg Optim
    - Jpeg Tran
    Jpeg
    - Image Magick
    - Png Crush
    - Png Out
    Png

    View Slide

  30. - Image Magick
    - Jpeg Optim
    - Jpeg Tran
    Jpeg
    - Image Magick
    - Png Crush
    - Png Out
    Png
    - Image Magick
    - Gifsicle
    Gif

    View Slide

  31. Online tools

    View Slide

  32. Online tools
    smushit.com
    kraken.io

    View Slide

  33. Automate it!

    View Slide

  34. kraken.io
    Optimisation APIs

    View Slide

  35. kraken.io
    punypng.com/api
    Optimisation APIs

    View Slide

  36. kraken.io
    punypng.com/api
    webresizer.com
    Optimisation APIs

    View Slide

  37. The Baseline

    View Slide

  38. Sprites

    View Slide

  39. Take lots of little images

    View Slide

  40. ..and combine into one image

    View Slide

  41. View Slide

  42. View Slide

  43. .norwegian_flag
    {
    width: 120px;
    height: 75px;
    background:url('/images/sprites/flag-sprite.png');
    background-position: -240px -84px;
    }

    View Slide

  44. 1 request

    View Slide

  45. 1 request
    many
    images

    View Slide

  46. Recommendations
    - No whitespace

    View Slide

  47. Recommendations
    - No whitespace
    - Optimize & cache

    View Slide

  48. Recommendations
    - No whitespace
    - Optimize & cache
    - Aim for similar palettes

    View Slide

  49. Lazy Loading

    View Slide

  50. Lazy Loading
    - Only load what the user sees

    View Slide

  51. Lazy Loading
    - Only load what the user sees
    - Load images as the viewport moves

    View Slide

  52. Lazy Loading
    - Only load what the user sees
    - Load images as the viewport moves
    - Reduce unnecessary HTTP requests

    View Slide

  53. Loads
    every
    image

    View Slide

  54. 12x Requests

    View Slide

  55. View Slide

  56. View Slide

  57. 3x Requests

    View Slide

  58. View Slide

  59. View Slide

  60. Benefits
    Reduced HTTP requests

    View Slide

  61. Benefits
    Reduced HTTP requests
    A lot of users don’t scroll entire page

    View Slide

  62. Benefits
    Reduced HTTP requests
    A lot of users don’t scroll entire page
    Faster initial page load times

    View Slide

  63. Moving on..

    View Slide

  64. WebP
    Images

    View Slide

  65. WebP is a new
    image format

    View Slide

  66. WebP is a new
    image format
    newish

    View Slide

  67. They’re great because:
    26% smaller than PNGs

    View Slide

  68. They’re great because:
    26% smaller than PNGs
    25-35% smaller than JPGs

    View Slide

  69. They’re great because:
    26% smaller than PNGs
    25-35% smaller than JPGs
    Image quality isn’t affected

    View Slide

  70. Which means
    smaller web pages!

    View Slide

  71. Jpg WebP

    View Slide

  72. 48.9 KB ?

    View Slide

  73. 48.9 KB 12.6 KB

    View Slide

  74. 75%

    View Slide

  75. 280 Kb ?

    View Slide

  76. 280 Kb 50 Kb

    View Slide

  77. 83%

    View Slide

  78. WebP has it’s downsides

    View Slide

  79. WebP has it’s downsides
    No IE support

    View Slide

  80. WebP has it’s downsides
    No IE support
    No FireFox support

    View Slide

  81. WebP has it’s downsides
    No IE support
    No FireFox support
    No iOS support

    View Slide

  82. Support is
    growing!

    View Slide

  83. How can I
    use it?

    View Slide

  84. Use it today
    https://developers.google.com/speed/webp/
    WebP converter tool

    View Slide

  85. Use the WebP tool
    Specify compression

    View Slide

  86. Use the WebP tool
    Specify compression
    Specify sharpness & size

    View Slide

  87. Use the WebP tool
    Specify compression
    Specify sharpness & size
    Available for Win, Mac & Linux

    View Slide


  88. View Slide

  89. JavaScript Shim
    https://github.com/antimatter15/weppy

    View Slide

  90. JavaScript Shim
    https://github.com/antimatter15/weppy
    Client Side
    http://www.stucox.com/blog/using-webp-with-modernizr/

    View Slide

  91. JavaScript Shim
    https://github.com/antimatter15/weppy
    Client Side
    http://www.stucox.com/blog/using-webp-with-modernizr/
    Server Side
    http://tinyurl.com/BlogWebP

    View Slide

  92. Give it a go!
    tinyurl.com/LeastWebP

    View Slide

  93. Compressive
    Images

    View Slide

  94. Compressive Concept..

    View Slide

  95. Compressive Concept..

    View Slide

  96. Compressive Concept..

    View Slide

  97. Compressive Concept..

    View Slide

  98. Compressive Concept..

    View Slide

  99. Compressive Concept..

    View Slide

  100. Compressive Concept..

    View Slide

  101. Compressive Concept..

    View Slide

  102. YDN says...
    “Don't Scale Images in HTML. Don't use a bigger image than you need
    just because you can set the width and height in HTML. If you need:

    then your image (mycat.jpg) should be 100x100px rather than a
    scaled down 500x500px image.”

    View Slide

  103. Google says..
    “Specify dimensions that match those of the images themselves. Don't
    use width and height specifications to scale images on the fly. If an image
    file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the
    HTML or CSS. If the image needs to be smaller, scale it in an image editor
    and set its dimensions to match”

    View Slide

  104. Rationale
    1. You don't want to
    download more bytes
    than necessary

    View Slide

  105. Rationale
    2. Browsers are bad at
    resizing images

    View Slide

  106. Don’t
    download more
    bytes

    View Slide

  107. Don’t download more bytes
    * From Daan Jobsis’ wonderful article @ http://tinyurl.com/retinarev

    View Slide

  108. Don’t download more bytes
    Big image low quality = GOOD
    Small image high quality = BAD

    View Slide

  109. Browsers are
    bad at resizing

    View Slide

  110. * From Roy Tanck’s interesting study @ http://tinyurl.com/browserscaling
    Browsers are bad at resizing
    150 images:
    50 x 24bit pngs
    50 x jpeg
    50 x 8bit gif
    One page:
    images displayed at 100%

    View Slide

  111. Browsers are bad at resizing
    150 images:
    50 x 24bit pngs
    50 x jpeg
    50 x 8bit gif
    * From Roy Tanck’s interesting study @ http://tinyurl.com/browserscaling
    One page:
    images displayed at 100%
    Duplicate page:
    images scaled to 61.5%

    View Slide

  112. * From Roy Tanck’s interesting study @ http://tinyurl.com/browserscaling
    No difference
    whatsoever
    Browsers are bad at resizing

    View Slide

  113. Is it good?

    View Slide

  114. Is it good?

    View Slide

  115. Support for Compressive Images

    View Slide

  116. Support for Compressive Images
    Chrome

    View Slide

  117. Support for Compressive Images
    Chrome
    All of them

    View Slide

  118. Support for Compressive Images
    Chrome
    All of them
    Opera

    View Slide

  119. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them

    View Slide

  120. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox

    View Slide

  121. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox
    All of them

    View Slide

  122. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox
    All of them
    IE

    View Slide

  123. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox
    All of them
    IE
    All of them

    View Slide

  124. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox
    All of them
    IE
    All of them

    View Slide

  125. Support for Compressive Images
    Chrome
    All of them
    Opera
    All of them
    Firefox
    All of them
    IE
    All of them* at least I think so...

    View Slide

  126. Got ?
    Got Compressive

    View Slide

  127. Give it a go!
    tinyurl.com/LeastCompressive

    View Slide

  128. Data URIs

    View Slide

  129. “The fastest HTTP
    request is the one
    not made.”

    View Slide

  130. Every image in a
    web page is a new
    HTTP request

    View Slide

  131. Data URIs
    are different

    View Slide

  132. alt="Funny Cat" />

    View Slide

  133. Data URIs are
    embedded as a Base64
    encoded string

    View Slide


  134. View Slide


  135. View Slide

  136. Data URIs
    Embedded in a web page

    View Slide

  137. Data URIs
    Embedded in a web page
    No HTTP request is made

    View Slide

  138. Data URIs
    Embedded in a web page
    No HTTP request is made
    Faster load times

    View Slide

  139. Data URIs
    Embedded in a web page
    No HTTP request is made
    Faster load times* *Sometimes

    View Slide

  140. Support is great
    So....what’s the
    catch?

    View Slide

  141. - Some browsers only support Data URIs up
    to a certain size

    View Slide

  142. - Some browsers only support Data URIs up
    to a certain size
    - Base64 encoded strings are actually around
    a third larger than the original image size

    View Slide

  143. - Some browsers only support Data URIs up
    to a certain size
    - Base64 encoded strings are actually around
    a third larger than the original image
    - Need to re-encode on every change

    View Slide

  144. - Some browsers only support Data URIs up
    to a certain size
    - Base64 encoded strings are actually around
    a third larger than the original image
    - Need to re-encode on every change
    - Consume battery and CPU on mobile devices

    View Slide

  145. Don’t worry!

    View Slide

  146. - Images less than 32K
    - Great for icons
    Use it for:

    View Slide

  147. Give it a go!
    tinyurl.com/LeastDataURI

    View Slide

  148. The Future?

    View Slide

  149. The Future?

    View Slide

  150. The right image
    for the user

    View Slide

  151. The right image
    for the user

    View Slide

  152. srcset
    HTML attribute

    View Slide

  153. src="cat.jpg" />

    View Slide

  154. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  155. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  156. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  157. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  158. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  159. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  160. src="cat.jpeg"
    srcset="cat-HD.jpeg 2x, cat-
    mob.jpeg 100w, cat-mob-HD.
    jpeg 100w 2x" />

    View Slide

  161. picture
    HTML Element

    View Slide

  162. src="cat.jpg" />

    View Slide






  163. Lookit the cuuute kitty awwww

    View Slide






  164. Lookit the cuuute kitty awwww

    View Slide






  165. Lookit the cuuute kitty awwww

    View Slide






  166. Lookit the cuuute kitty awwww

    View Slide






  167. Lookit the cuuute kitty awwww

    View Slide






  168. Lookit the cuuute kitty awwww

    View Slide

  169. picture + srcset

    View Slide



  170. >


    Lookit the cuuute kitty awwww

    View Slide



  171. >


    Lookit the cuuute kitty awwww

    View Slide



  172. >


    Lookit the cuuute kitty awwww

    View Slide



  173. >


    Lookit the cuuute kitty awwww

    View Slide



  174. >


    Lookit the cuuute kitty awwww

    View Slide



  175. >


    Lookit the cuuute kitty awwww

    View Slide



  176. >


    Lookit the cuuute kitty awwww

    View Slide



  177. >


    Lookit the cuuute kitty awwww

    View Slide

  178. HD
    SD
    Tiger & Cat: http://www.flickr.com/photos/doug88888/ Kitten: http://www.flickr.
    min-width: 45em
    tiger-HD.jpg 2x
    min-width: 18em
    cat-HD.jpg 2x
    min-width: 18em
    cat.jpg 1x
    kitten.jpg 1x
    kitten.jpg 2x
    min-width: 45em
    tiger.jpg 1x

    View Slide

  179. image-set()
    CSS4 function

    View Slide

  180. background-image:
    image-set(
    "cat.png" 1x,
    "cat-HD.png" 2x,
    "cat-print.png" 600dpi );

    View Slide

  181. background-image:
    image-set(
    "cat.png" 1x,
    "cat-HD.png" 2x,
    "cat-print.png" 600dpi );

    View Slide

  182. background-image:
    image-set(
    "cat.png" 1x,
    "cat-HD.png" 2x,
    "cat-print.png" 600dpi );

    View Slide

  183. background-image:
    image-set(
    "cat.png" 1x,
    "cat-HD.png" 2x,
    "cat-print.png" 600dpi );

    View Slide

  184. @media all{
    #pictureElement{
    background-image: image-set(kitten.jpg 1x, kitten-HD.jpg 2x);
    }
    }
    @media all and (min-width: 45em){
    #pictureElement{
    background-image: image-set(tiger.jpg 1x, tiger-HD.jpg 2x);
    }
    }
    @media all and (min-width: 18em){
    #pictureElement{
    background-image: image-set(cat.jpg 1x, cat.jpg 2x);
    }
    }

    View Slide

  185. @media all{
    #pictureElement{
    background-image: image-set(kitten.jpg 1x, kitten-HD.jpg 2x);
    }
    }
    @media all and (min-width: 45em){
    #pictureElement{
    background-image: image-set(tiger.jpg 1x, tiger-HD.jpg 2x);
    }
    }
    @media all and (min-width: 18em){
    #pictureElement{
    background-image: image-set(cat.jpg 1x, cat.jpg 2x);
    }
    }

    View Slide

  186. @media all{
    #pictureElement{
    background-image: image-set(kitten.jpg 1x, kitten-HD.jpg 2x);
    }
    }
    @media all and (min-width: 45em){
    #pictureElement{
    background-image: image-set(tiger.jpg 1x, tiger-HD.jpg 2x);
    }
    }
    @media all and (min-width: 18em){
    #pictureElement{
    background-image: image-set(cat.jpg 1x, cat.jpg 2x);
    }
    }

    View Slide

  187. Your
    favourite?

    View Slide

  188. Srcset Image-set Picture
    Element
    Multiple image
    dimensions
    Multiple image
    resolutions
    Reduces HTTP
    requests

    View Slide

  189. Summary

    View Slide

  190. Download the
    source code
    tinyurl.com/imageoptimiser

    View Slide

  191. View the demos
    tinyurl.com/LeastDemos

    View Slide

  192. @rposbo
    @deanohume

    View Slide