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

Get the LEAST from your images

C620790ae5bf5b50c245b2e0ef95f338?s=47 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

C620790ae5bf5b50c245b2e0ef95f338?s=128

Dean Hume

November 15, 2013
Tweet

Transcript

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

  2. None
  3. Images are awesome

  4. None
  5. But they aren’t great for web performance

  6. in fact....

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

  8. Images are the biggest part of a web page Stylesheets,

    HTML, etc Images 60% JavaScript
  9. 56

  10. The average web page makes 56 image requests per page

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

    page * Source: HttpArchive.org
  12. The Web wouldn’t be the same without images

  13. ...So

  14. We need to Make more efficient use of requests

  15. We need to Make more efficient use of requests &

    Reduce the size of the images
  16. We will look at

  17. We will look at - Well known methods for reducing

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

    the size of your images and http requests - Some lesser known methods
  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
  20. The Basics

  21. Things everyone should be doing

  22. Things everyone should be doing

  23. Things everyone should be doing Image optimization

  24. Things everyone should be doing Image optimization Spriting images

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

    loading
  26. Image Optimization tools

  27. Offline tools

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

  29. - Image Magick - Jpeg Optim - Jpeg Tran Jpeg

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

    - Image Magick - Png Crush - Png Out Png - Image Magick - Gifsicle Gif
  31. Online tools

  32. Online tools smushit.com kraken.io

  33. Automate it!

  34. kraken.io Optimisation APIs

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

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

  37. The Baseline

  38. Sprites

  39. Take lots of little images

  40. ..and combine into one image

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

    }
  44. 1 request

  45. 1 request many images

  46. Recommendations - No whitespace

  47. Recommendations - No whitespace - Optimize & cache

  48. Recommendations - No whitespace - Optimize & cache - Aim

    for similar palettes
  49. Lazy Loading

  50. Lazy Loading - Only load what the user sees

  51. Lazy Loading - Only load what the user sees -

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

    Load images as the viewport moves - Reduce unnecessary HTTP requests
  53. Loads every image

  54. 12x Requests

  55. None
  56. None
  57. 3x Requests

  58. None
  59. None
  60. Benefits Reduced HTTP requests

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

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

    entire page Faster initial page load times
  63. Moving on..

  64. WebP Images

  65. WebP is a new image format

  66. WebP is a new image format newish

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

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

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

    JPGs Image quality isn’t affected
  70. Which means smaller web pages!

  71. Jpg WebP

  72. 48.9 KB ?

  73. 48.9 KB 12.6 KB

  74. 75%

  75. 280 Kb ?

  76. 280 Kb 50 Kb

  77. 83%

  78. WebP has it’s downsides

  79. WebP has it’s downsides No IE support

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

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

    No iOS support
  82. Support is growing!

  83. How can I use it?

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

  85. Use the WebP tool Specify compression

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

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

    Available for Win, Mac & Linux
  88. <img src=”cat.webp” />

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

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

  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

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

  93. Compressive Images

  94. Compressive Concept..

  95. Compressive Concept..

  96. Compressive Concept..

  97. Compressive Concept..

  98. Compressive Concept..

  99. Compressive Concept..

  100. Compressive Concept..

  101. Compressive Concept..

  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: <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.”
  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”
  104. Rationale 1. You don't want to download more bytes than

    necessary
  105. Rationale 2. Browsers are bad at resizing images

  106. Don’t download more bytes

  107. Don’t download more bytes * From Daan Jobsis’ wonderful article

    @ http://tinyurl.com/retinarev
  108. Don’t download more bytes Big image low quality = GOOD

    Small image high quality = BAD
  109. Browsers are bad at resizing

  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%
  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%
  112. * From Roy Tanck’s interesting study @ http://tinyurl.com/browserscaling No difference

    whatsoever Browsers are bad at resizing
  113. Is it good?

  114. Is it good?

  115. Support for Compressive Images

  116. Support for Compressive Images Chrome

  117. Support for Compressive Images Chrome All of them

  118. Support for Compressive Images Chrome All of them Opera

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

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

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

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

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

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

    of them Firefox All of them IE All of them
  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...
  126. Got <img>? Got Compressive

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

  128. Data URIs

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

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

    request
  131. Data URIs are different

  132. <img src="cat.png" alt="Funny Cat" />

  133. Data URIs are embedded as a Base64 encoded string

  134. <img src="data:image/png; base64, iVBORw0KGgoAAElEQVQI12P4//8/ w38U5ErkJggg==" alt="Funny Cat" />

  135. <img src="data:image/png; base64, iVBORw0KGgoAAElEQVQI12P4//8/ w38U5ErkJggg==" alt="Funny Cat" />

  136. Data URIs Embedded in a web page

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

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

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

    is made Faster load times* *Sometimes
  140. Support is great So....what’s the catch?

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

    certain size
  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
  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
  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
  145. Don’t worry!

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

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

  148. The Future?

  149. The Future?

  150. The right image for the user

  151. The right image for the user

  152. srcset HTML attribute

  153. <img alt="my cat" src="cat.jpg" />

  154. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  155. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  156. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  157. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  158. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  159. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  160. <img alt="My Cat" src="cat.jpeg" srcset="cat-HD.jpeg 2x, cat- mob.jpeg 100w, cat-mob-HD.

    jpeg 100w 2x" />
  161. picture HTML Element

  162. <img alt="my cat" src="cat.jpg" />

  163. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  164. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  165. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  166. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  167. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  168. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" src="tiger.jpg"> <source media="(min-width:

    18em)" src="cat.jpg"> <source src="kitten.jpg"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  169. picture + srcset

  170. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  171. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  172. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  173. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  174. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  175. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  176. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  177. <picture width="500" height="500" id="pictureElement"> <source media="(min-width: 45em)" srcset="tiger.jpg 1x, tiger-HD.jpg

    2x"> <source media="(min-width: 18em)" srcset="cat.jpg 1x, cat-HD.jpg 2x" > <source srcset="kitten.jpg 1x, kitten-HD.jpg 2x"> <img src="kitten.jpg" alt="cutekittyawww" lazyload> <p>Lookit the cuuute kitty awwww</p> </picture>
  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
  179. image-set() CSS4 function

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

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

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

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

  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); } }
  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); } }
  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); } }
  187. Your favourite?

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

    Reduces HTTP requests
  189. Summary

  190. Download the source code tinyurl.com/imageoptimiser

  191. View the demos tinyurl.com/LeastDemos

  192. @rposbo @deanohume