$30 off During Our Annual Pro Sale. View details »

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!

Tobias Baldauf

August 22, 2015
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

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