Advanced Image Compression Techniques - VelocityConf Barcelona - November 2014

Image assets are a major impediment to page load times. Best practices for common image compression have been evangelized. To further reduce image bytesize, we have to get creative: discover how to apply lossy compression to lossless formats, automatically detect good compression levels, and learn how disciplines like computer vision and machine learning can help us to improve image compression.

Transcript

1. Advanced(Cat(Content(Compression(101
2. Tobias'Baldauf @tbaldauf tbaldauf@akamai.com
3. What%You%Will%Learn
4. Q"vs."DSSIM"&"Encoders Saliency)Maps)&)automagic)Q
5. 50#MB
7. 54#MB
9. Workarounds
11. picture brought(to(you(by(@yoavweiss
14. No#way#around the$heavy$li*ing
15. Tools
16. Measure'Dissimilarity: DSSIM h"ps:/ /github.com/pornel/dssim
17. DSSIM convert(input.jpg(input.png convert(output.jpg(output.png dssim%input.png%output.png
18. Dissimilarity because'JPEG'"quality"'is'not'standardized
21. jpegop&m h"ps:/ /github.com/tjko/jpegop3m
22. jpegop&m())strip)all())all)progressive())stdout(input.jpg(>(output)lossless.jpg
23. BEFORE: 5.7MB EXIF%data
24. AFTER&LOSSLESS: 5.3MB No#EXIF#data Dissimilarity:+0%
25. Must!&Go!&Faster!
26. jpegop&m())max=75())strip)all())all)progressive())stdout(input.jpg(>(output)lossy.jpg
27. AFTER&LOSSY: 0.79MB No#EXIF#data Dissimilarity:+1.9%
28. jpegrescan h"p:/ /github.com/kud/jpegrescan based&on&jpegtran bruteforces*Huffman*table*op2miza2on
29. jpegrescan beats jpegtran h"p:/ /tobias.is/geeky/webperf/progressive5jpeg5performance5op:miza:on/
30. jpegrescan*+q*+s*+i*input.jpg*output.jpg
31. AFTER&JPEGRESCAN: 0.78MB'('10kb'saved'by'math Dissimilarity:+0%
32. And$now$for SCIENCE!
33. 12.000 Pseudorandom+JPEGs
37. JPEGOp'm+JPEGRescan0size0reduc'on 12.0% median
38. JPEGOp'm+JPEGRescan0visual0dissimilarity0(DSSIM) 0.02% median
39. WebP
40. Think:'PNG8+24+JPEG+GIF+be5er'compression aka#not#made#for#HiDef#photography#or#game#engines
41. BEFORE: 0.78MB No#EXIF#data
42. cwebp&'quiet&input.jpg&'o&output.webp
43. As#WebP: 0.46MB Dissimilarity:+1.5%
44. dwebp&output.webp&+o&output+webp.png
45. WebP%Browser%Support
46. And$now$12.000x$WebP$for$science
48. WebP%size%reduc-on 32.9% median
49. WebP%visual%dissimilarity%(DSSIM) 0.3% median
50. MozJPEG
52. Luma 16#16#16#18#25#37#56#85 16#17#20#27#34#40#53#75 16#20#24#31#43#62#91#135 18#27#31#40#53#74#106#156 25#34#43#53#69#94#131#189 37#40#62#74#94#124#169#238 56#53#91#106#131#169#226#311 85#75#135#156#189#238#311#418
53. BEFORE: 0.78MB No#EXIF#data
54. cjpeg&'quality&75&'op2mize&'progressive&'outfile&output.jpg&input.jpg
55. A"er%MozJPEG: 0.76MB Dissimilarity:+0.03%
56. And$now$12.000x$MozJPEG$for$science
58. MozJPEG(size(reduc0on 12.1% median
59. MozJPEG(visual(dissimilarity((DSSIM) 0.09% median
60. JPEGmini
62. JPEGmini(size(reduc0on 17.2% median
63. JPEGmini(visual(dissimilarity((DSSIM) 0.4% median
64. Be#smart#about#what's#in#the#box
65. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor
68. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm
71. BEFORE: 0.78MB No#EXIF#data
72. bash%adept.sh%input.jpg
73. AFTER&ADEPT: 0.59MB Dissimilarity:+2.9%
75. And$now$12.000x$Adept$for$science
77. Adept&size&reduc-on 29.9% median
78. Adept&visual&dissimilarity&(DSSIM) 0.7% median
79. Adap%ve(JPEG(Compression coming'to'mozjpeg
80. brought(to(you(by(@pornelski
81. mozjpeg(+(adap,ve(quality(+(saliency(= superhero(compression
82. Even%more%adap,ve%quality
83. What%if%I%told%you... that$the$JPEG$quality$se0ng$sucks?
84. cjpeg&dssim h"ps:/ /github.com/technopagan/cjpeg4dssim
86. Adap%ve(JPEG(quality(based(on Round&Trip&Times
89. JPEGOp'm+Rescan:112.0%@0.02% WebP:&32.9%@0.3% MozJPEG:)12.1%@0.09% JPEGmini:)17.2%@0.4% Adept:'29.9%@0.7%
90. 1.#Install'mozjpeg 2.#Follow%saliency%mapping 3.#Leverage'cjpeg+dssim 4.#Serve%WebP%+%RTT,Q%via%Akamai
91. Thank&you!