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
   

   View Slide

2. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 2
   

   View Slide

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
   

   View Slide

4. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 4
   

   View Slide

5. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 5
   

   View Slide

6. WebP:
   PNG8+24+JPEG+GIF+be0er2compression
   Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 6
   

   View Slide

7. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 7
   

   View Slide

8. For$science!
   Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 8
   

   View Slide

9. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 9
   

   View Slide

10. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 10
    

    View Slide

11. 12.000x&WebP!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 11
    

    View Slide

12. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 12
    

    View Slide

13. WebP:&33%&sliced&off
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 13
    

    View Slide

14. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 14
    

    View Slide

15. JPEG%XR
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 15
    

    View Slide

16. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 16
    

    View Slide

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
    

    View Slide

18. Who$won$the$race?
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 18
    

    View Slide

19. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 19
    

    View Slide

20. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 20
    

    View Slide

21. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 21
    

    View Slide

22. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 22
    

    View Slide

23. Hold%it%right%there!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 23
    

    View Slide

24. Storage(space(is(cheap
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 24
    

    View Slide

25. Bandwidth)is)cheap
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 25
    

    View Slide

26. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 26
    

    View Slide

27. So#why#should#we#care?
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 27
    

    View Slide

28. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 28
    

    View Slide

29. Because'it's'all
    about'the'users!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 29
    

    View Slide

30. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 30
    

    View Slide

31. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 31
    

    View Slide

32. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 32
    

    View Slide

33. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 33
    

    View Slide

34. What%can%we%do%about%it?
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 34
    

    View Slide

35. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 35
    

    View Slide

36. The$king$is$dead!
    Long$live$the$king!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 36
    

    View Slide

37. JPEG!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 37
    

    View Slide

38. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 38
    

    View Slide

39. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 39
    

    View Slide

40. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 40
    

    View Slide

41. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 41
    

    View Slide

42. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 42
    

    View Slide

43. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 43
    

    View Slide

44. 16.7%million%colors
    24bit
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 44
    

    View Slide

45. Already(fully(standardized(+(OSS(in(1992
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 45
    

    View Slide

46. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 46
    

    View Slide

47. JPEG%codec%for%bitstream%data
    +
    file%format%declara5on:JFIF%or%Exif
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 47
    

    View Slide

48. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 48
    

    View Slide

49. JPEG:
    built+based+on+human+visual+system
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 49
    

    View Slide

50. Human&Vision:
    Brightness&=&+2
    Color&Differen9a9on&=&:1
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 50
    

    View Slide

51. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 51
    

    View Slide

52. DCT
    type%II
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 52
    

    View Slide

53. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 53
    

    View Slide

54. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 54
    

    View Slide

55. There%is%no%quality%se0ng
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 55
    

    View Slide

56. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 56
    

    View Slide

57. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 57
    

    View Slide

58. JPEG%encoders%are%opinionated%Rupe%Goldberg%machines
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 58
    

    View Slide

59. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 59
    

    View Slide

60. Remember&the&human&visual&system?
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 60
    

    View Slide

61. Rods%&%Cones
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 61
    

    View Slide

62. Cones&are&for&colors:
    long,&medium&&&short&wavelength&cone&types
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 62
    

    View Slide

63. Long,&medium&&&short&cones
    have&a&ra4o&of&18:3:1
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 63
    

    View Slide

64. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 64
    

    View Slide

65. We#see#RED#in#more#detail.
    RED#means#"tasty,#ripe,#good#to#eat"
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 65
    

    View Slide

66. Many%JPEG%encoders%are%less%lossy%for%RED
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 66
    

    View Slide

67. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 67
    

    View Slide

68. There%are%also%lossless%op+miza+ons%for%JPEGs
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 68
    

    View Slide

69. jpegtran)&)jpegrescan
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 69
    

    View Slide

70. Huffman'table'op.miza.on
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 70
    

    View Slide

71. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 71
    

    View Slide

72. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 72
    

    View Slide

73. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 73
    

    View Slide

74. mozjpeg
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 74
    

    View Slide

75. Op#mized)Huffman)tables
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 75
    

    View Slide

76. Custom'quan+za+on'matrices
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 76
    

    View Slide

77. Trellis'quan,za,on
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 77
    

    View Slide

78. Op#mized)progressive)encoding
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 78
    

    View Slide

79. all#with#minimal#impact
    on#the#SSIM#score
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 79
    

    View Slide

80. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 80
    

    View Slide

81. SSIM?
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 81
    

    View Slide

82. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 82
    

    View Slide

83. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 83
    

    View Slide

84. To#measure#dissimilarity:
    DSSIM
    h"ps:/
    /github.com/pornel/dssim
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 84
    

    View Slide

85. Dissimilarity:
    0.13%
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 85
    

    View Slide

86. ~1.5%&ok
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 86
    

    View Slide

87. Automate!
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 87
    

    View Slide

88. cjpeg&dssim
    h,p:/
    /github.com/technopagan/
    cjpeg&dssim
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 88
    

    View Slide

89. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 89
    

    View Slide

90. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 90
    

    View Slide

91. Adap%ve(JPEG(quality
    based(on
    Round(Trip(Times
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 91
    

    View Slide

92. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 92
    

    View Slide

93. Adept
    h"p:/
    /github.com/technopagan/adept3jpg3compressor
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 93
    

    View Slide

94. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 94
    

    View Slide

95. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 95
    

    View Slide

96. MSSS
    h"p:/
    /github.com/technopagan/mss3saliency
    Maximum'Symmetric'Surround'Saliency'Algorithm
    Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 96
    

    View Slide

97. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 97
    

    View Slide

98. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 98
    

    View Slide

99. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 99
    

    View Slide

100. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 100
     

     View Slide

101. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 101
     

     View Slide

102. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 102
     

     View Slide

103. There's'things'JPEG'just'can't'do...
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 103
     

     View Slide

104. ..."not"yet,"anyway!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 104
     

     View Slide

105. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 105
     

     View Slide

106. JPEG%XT
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 106
     

     View Slide

107. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 107
     

     View Slide

108. jpeg%extensions@listserv.uni%stu2gart.de
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 108
     

     View Slide

109. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 109
     

     View Slide

110. In#case#you#don't#have#the#0me
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 110
     

     View Slide

111. No!$Not$PNG24!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 111
     

     View Slide

112. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 112
     

     View Slide

113. PNG8%can%do%alpha%transparency
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 113
     

     View Slide

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
     

     View Slide

115. The$much,$much$be*er$way:
     h"p:/
     /github.com/pornel/pngquant
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 115
     

     View Slide

116. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 116
     

     View Slide

117. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 117
     

     View Slide

118. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 118
     

     View Slide

119. h"p:/
     /quasimondo.com/ZorroSVG/
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 119
     

     View Slide

120. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 120
     

     View Slide

121. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 121
     

     View Slide

122. SVG$can$be$op,mized,$too!
     h"p:/
     /github.com/svg/svgo
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 122
     

     View Slide

123. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 123
     

     View Slide

124. At#some#point
     things#don't#become#lighter#anymore
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 124
     

     View Slide

125. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 125
     

     View Slide

126. LQIP
     h"p:/
     /www.guypo.com/introducing3lqip3low3quality3image3placeholders/
     h"p:/
     /code.facebook.com/posts/991252547593574/the9technology9behind9preview9photos/
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 126
     

     View Slide

127. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 127
     

     View Slide

128. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 128
     

     View Slide

129. WebP
     OSS:$!
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 129
     

     View Slide

130. JPEG%XR
     OSS:$✋
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 130
     

     View Slide

131. (D)SSIM
     OSS:$!
     Worth&shipping:&❌
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 131
     

     View Slide

132. MSSS
     OSS:$!
     Worth&shipping:&❌
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 132
     

     View Slide

133. pngquant
     OSS:$!
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 133
     

     View Slide

134. svgo
     OSS:$!
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 134
     

     View Slide

135. JPEG%XT
     OSS:$!
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 135
     

     View Slide

136. mozjpeg
     OSS:$!
     Worth&shipping:&!
     Worth&helping:&!
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 136
     

     View Slide

137. Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 137
     

     View Slide

138. Tobias'Baldauf
     @tbaldauf
     who.tobias.is
     Tobias'Baldauf'-'@tbaldauf'-'who.tobias.is 138
     

     View Slide