High Performance Images - Front In Amsterdam 2015

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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

August 28, 2015
Tweet

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