Get the LEAST from your images

This talk was presented at Velocity Europe 2013.

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

Transcript

1. @deanohume Getting the LEAST from your images @rposbo
3. Images are awesome
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
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
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
57. 3x Requests
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