FrOSCon 2015 - The JPEG is dead! Long live the JPEG!

A tour de force of major developments in open source image optimization.

A JPEG is a JPEG and nothing changed since 1992? Think again! Automated compression quality detection, advanced dithering algorithms, saliency mapping and computer vision - get a glimpse at what the image optimization open source community has been up to!

Transcript

1. JPEG%is%dead!%Long%live%the%JPEG! Tobias%Baldauf%9%@tbaldauf #FrOSCon%2015 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 1
2. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 2
3. "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 3
4. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 4
5. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 5
6. WebP: PNG8+24+JPEG+GIF+be0er2compression Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 6
7. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 7
8. For$science! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 8
9. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 9
10. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 10
11. 12.000x&WebP! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 11
12. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 12
13. WebP:&33%&sliced&off Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 13
14. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 14
15. JPEG%XR Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 15
16. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 16
17. "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 17
18. Who$won$the$race? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 18
19. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 19
20. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 20
21. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 21
22. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 22
23. Hold%it%right%there! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 23
24. Storage(space(is(cheap Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 24
25. Bandwidth)is)cheap Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 25
26. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 26
27. So#why#should#we#care? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 27
28. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 28
29. Because'it's'all about'the'users! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 29
30. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 30
31. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 31
32. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 32
33. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 33
34. What%can%we%do%about%it? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 34
35. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 35
36. The$king$is$dead! Long$live$the$king! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 36
37. JPEG! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 37
38. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 38
39. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 39
40. 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. 16.7%million%colors 24bit Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 44
45. Already(fully(standardized(+(OSS(in(1992 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 45
46. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 46
47. JPEG%codec%for%bitstream%data + file%format%declara5on:JFIF%or%Exif Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 47
48. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 48
49. JPEG: built+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. DCT type%II Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 52
53. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 53
54. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 54
55. There%is%no%quality%se0ng Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 55
56. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 56
57. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 57
58. JPEG%encoders%are%opinionated%Rupe%Goldberg%machines Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 58
59. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 59
60. Remember&the&human&visual&system? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 60
61. Rods%&%Cones Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 61
62. Cones&are&for&colors: long,&medium&&&short&wavelength&cone&types Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 62
63. Long,&medium&&&short&cones have&a&ra4o&of&18:3:1 Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 63
64. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 64
65. We#see#RED#in#more#detail. RED#means#"tasty,#ripe,#good#to#eat" Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 65
66. Many%JPEG%encoders%are%less%lossy%for%RED Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 66
67. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 67
68. There%are%also%lossless%op+miza+ons%for%JPEGs Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 68
69. jpegtran)&)jpegrescan Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 69
70. Huffman'table'op.miza.on Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 70
71. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 71
72. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 72
73. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 73
74. mozjpeg Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 74
75. Op#mized)Huffman)tables Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 75
76. Custom'quan+za+on'matrices Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 76
77. Trellis'quan,za,on Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 77
78. Op#mized)progressive)encoding Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 78
79. all#with#minimal#impact on#the#SSIM#score Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 79
80. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 80
81. SSIM? Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 81
82. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 82
83. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 83
84. To#measure#dissimilarity: DSSIM h"ps:/ /github.com/pornel/dssim Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 84
85. Dissimilarity: 0.13% Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 85
86. ~1.5%&ok Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 86
87. Automate! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 87
88. cjpeg&dssim h,p:/ /github.com/technopagan/ cjpeg&dssim Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 88
89. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 89
90. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 90
91. Adap%ve(JPEG(quality based(on Round(Trip(Times Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 91
92. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 92
93. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 93
94. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 94
95. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 95
96. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 96
97. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 97
98. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 98
99. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 99
100. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 100
101. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 101
102. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 102
103. There's'things'JPEG'just'can't'do... Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 103
104. ..."not"yet,"anyway! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 104
105. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 105
106. JPEG%XT Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 106
107. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 107
108. jpeg%extensions@listserv.uni%stu2gart.de Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 108
109. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 109
110. In#case#you#don't#have#the#0me Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 110
111. No!$Not$PNG24! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 111
112. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 112
113. PNG8%can%do%alpha%transparency Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 113
114. 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 114
115. The$much,$much$be*er$way: h"p:/ /github.com/pornel/pngquant Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 115
116. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 116
117. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 117
118. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 118
119. h"p:/ /quasimondo.com/ZorroSVG/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 119
120. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 120
121. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 121
122. SVG$can$be$op,mized,$too! h"p:/ /github.com/svg/svgo Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 122
123. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 123
124. At#some#point things#don't#become#lighter#anymore Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 124
125. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 125
126. LQIP h"p:/ /www.guypo.com/introducing3lqip3low3quality3image3placeholders/ h"p:/ /code.facebook.com/posts/991252547593574/the9technology9behind9preview9photos/ Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 126
127. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 127
128. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 128
129. WebP OSS:$! Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 129
130. JPEG%XR OSS:$✋ Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 130
131. (D)SSIM OSS:$! Worth&shipping:&❌ Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 131
132. MSSS OSS:$! Worth&shipping:&❌ Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 132
133. pngquant OSS:$! Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 133
134. svgo OSS:$! Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 134
135. JPEG%XT OSS:$! Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 135
136. mozjpeg OSS:$! Worth&shipping:&! Worth&helping:&! Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 136
137. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 137
138. Tobias'Baldauf @tbaldauf who.tobias.is Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 138