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

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!

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

August 22, 2015
Tweet

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