High Performance Images - Front In Amsterdam 2015

Today's average website is 62% pure image data. We use images to convey emotion, elicit an action or simply to amuse our peers. They show holiday photos, pie charts or animated cats.

To the unitiated, nothing much has changed since the JPEG file format was standardized in 1992 and GIFs became capable of showing multiple frames of cat mischief. But under the hood, the complex realm of raster and vector images is ever changing: new encoders use cues from the fields of computer vision and machine learning to optimize image data, old formats learn new tricks and completely new image formats try to take the stage.

To deliver a great user experience, we need to learn to create high performance images and implement an image management strategy: leveraging the ideal image file formats and use advanced techniques to handle the challenges of responsive designs and situational performance. High performance images increase the perceived performance of your website, improve the user experience and drive conversions.

Transcript

1. High%Performance%Images Tobias%Baldauf%7%@tbaldauf #FrontInAms%2015 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 1
2. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 2
3. Hero%Images Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 3
4. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 4
5. Hero%Image%Delay%-%HID h"p:/ /www.stevesouders.com/blog/2015/05/12/hero9image9custom9metrics/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 5
6. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 6
7. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 7
8. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 8
9. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 9
10. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 10
11. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 11
12. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 12
13. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 13
14. Speed%& Usability Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 14
15. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 15
16. Saltatory(Conduc.on through(Nodes(of(Ranvier 1.2m(in(100ms Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 16
17. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 17
18. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 18
19. "The%Psychology of%Speed" Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 19
20. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 20
21. Median'Time'To'Interact (TTI)'2013'vs.'2014 5.3s'vs.'6.5s Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 21
22. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 22
23. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 23
24. Yay$for$images! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 24
25. Yay$for$fast$websites! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 25
26. Nay$for$large$image$data and$s1ll$having$fast$websites! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 26
27. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 27
28. Tools Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 28
29. "We're&really&aiming&very,&very&high& here…&at&something&like&100& milliseconds." —&Urs$Hölzle,$Google$Senior$VP$Opera6ons,$June$2010 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 29
30. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 30
31. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 31
32. WebP: PNG8+24+JPEG+GIF+be0er2compression Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 32
33. For$science! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 33
34. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 34
35. WebP:&33%&sliced&off Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 35
36. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 36
37. JPEG%XR Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 37
38. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 38
39. "Good%psy[cho,visual]%op3miza3ons% are%more%important%than%anything%else% for%compression." —%Fiona&Glaser,&x264&encoder&developer,&September&2010 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 39
40. Who$won$the$race? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 40
41. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 41
42. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 42
43. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 43
44. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 44
45. JPEG Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 45
46. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 46
47. Already(fully(standardized(+(OSS(in(1992 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 47
48. 16.7%million%colors 24bit Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 48
49. JPEG: based+on+human+visual+system Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 49
50. Human&Vision: Brightness&=&+2 Color&Differen9a9on&=&:1 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 50
51. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 51
52. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 52
53. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 53
54. There%is%no%single%"best"%quality%se3ng Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 54
55. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 55
56. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 56
57. JPEG%encoders%are%opinionated%Rupe%Goldberg%machines Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 57
58. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 58
59. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 59
60. mozjpeg Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 60
61. Op#mized)Huffman)tables Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 61
62. Custom'quan+za+on'matrices Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 62
63. Trellis'quan,za,on Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 63
64. Op#mized)progressive)encoding Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 64
65. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 65
66. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 66
67. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 67
68. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 68
69. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 69
70. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 70
71. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 71
72. There's'things'JPEG'just'can't'do... Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 72
73. ..."not"yet,"anyway! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 73
74. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 74
75. Full$alpha$transparency Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 75
76. No!$Don't$use$PNG24! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 76
77. PNG8%can%do%full%alpha%transparency! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 77
78. The$old$way: cat$infile.png$|$pngquant$256$>$tmp.png pngout'sta*c,'c3,'d8,'force,'y,tmp.png,tmp.png pngcrush)*bit*depth)8)*brute)*rem)alla)*reduce)tmp.png)output.png Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 78
79. The$much,$much$be*er$way: h"p:/ /github.com/pornel/pngquant Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 79
80. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 80
81. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 81
82. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 82
83. h"p:/ /quasimondo.com/ZorroSVG/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 83
84. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 84
85. Some%mes'"simply"'compressing'is'not'enough Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 85
86. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 86
87. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 87
88. AIC Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 88
89. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 89
90. LQIP h"p:/ /www.guypo.com/introducing3lqip3low3quality3image3placeholders/ h"p:/ /code.facebook.com/posts/991252547593574/the9technology9behind9preview9photos/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 90
91. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 91
92. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 92
93. JPEG%XT Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 93
94. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 94
95. jpeg%extensions@listserv.uni%stu2gart.de Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 95
96. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 96
97. Priority'I Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 97
98. Compress(JPEGs(with(mozjpeg(today Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 98
99. Follow%JPEG%XT%development%and%deploy%ASAP Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 99
100. Priority'II Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 100
101. Ship%WebP%to%Blink%browsers Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 101
102. Ship%JPEG*XR%to%IE/Edge Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 102
103. Priority'III Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 103
104. Transparency*via*pngquant*or*SVG*mask Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 104
105. Enhance'perceived'performance'+'UX by'using'LQIP,'AIC'&'async Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 105
106. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 106
107. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 107
108. Tobias'Baldauf @tbaldauf who.tobias.is Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 108