Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Image Compression Techniques - VelocityConf Barcelona - November 2014

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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

November 19, 2014
Tweet

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

  6. None
  7. 54#MB

  8. None
  9. Workarounds

  10. None
  11. picture brought(to(you(by(@yoavweiss

  12. None
  13. None
  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

  19. None
  20. None
  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

  34. None
  35. None
  36. None
  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

  47. None
  48. WebP%size%reduc-on 32.9% median

  49. WebP%visual%dissimilarity%(DSSIM) 0.3% median

  50. MozJPEG

  51. None
  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

  57. None
  58. MozJPEG(size(reduc0on 12.1% median

  59. MozJPEG(visual(dissimilarity((DSSIM) 0.09% median

  60. JPEGmini

  61. None
  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

  66. None
  67. None
  68. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm

  69. None
  70. None
  71. BEFORE: 0.78MB No#EXIF#data

  72. bash%adept.sh%input.jpg

  73. AFTER&ADEPT: 0.59MB Dissimilarity:+2.9%

  74. None
  75. And$now$12.000x$Adept$for$science

  76. None
  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

  85. None
  86. Adap%ve(JPEG(quality(based(on Round&Trip&Times

  87. None
  88. None
  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!