Advanced Image Compression Techniques - WebPerfDays Amsterdam October 2014

Advanced Image Compression Techniques - WebPerfDays Amsterdam October 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

October 11, 2014
Tweet

Transcript

  1. Welcome'to... Advanced(Cat(Content(Compression(101

  2. Tobias'Baldauf @tbaldauf tbaldauf@akamai.com

  3. Am#I#in#the#right#place?

  4. We#have a"problem

  5. None
  6. None
  7. Workarounds • Async&loading&below&the&fold • Spri6ng • Iconfonts&&&inlined&SVG • ...

  8. No#way#around the$heavy$li*ing

  9. Layers Binaries:)libjpeg,)pngquant,)cwebp)... Wrappers:(jpegop,m,(jpegrescan,(... GUIs:&ImageOp-m,&PNGgauntlet&...

  10. Measure'Dissimilarity: DSSIM h"ps:/ /github.com/pornel/dssim

  11. DSSIM convert(input.jpg(input.png convert(output.jpg(output.png dssim%input.png%output.png

  12. Tools

  13. jpegop&m h"ps:/ /github.com/tjko/jpegop3m

  14. jpegop&m())strip)all())all)progressive())stdout(input.jpg(>(output)lossless.jpg

  15. BEFORE: 5.7MB EXIF%data

  16. AFTER&LOSSLESS: 5.3MB No#EXIF#data Dissimilarity:+0%

  17. Must!&Go!&Faster!

  18. jpegop&m())max=75())strip)all())all)progressive())stdout(input.jpg(>(output)lossy.jpg

  19. AFTER&LOSSY: 0.79MB No#EXIF#data Dissimilarity:+1.9%

  20. jpegrescan h"p:/ /github.com/kud/jpegrescan based&on&jpegtran bruteforces*Huffman*table*op2miza2on

  21. jpegrescan beats jpegtran h"p:/ /tobias.is/geeky/webperf/progressive5jpeg5performance5op:miza:on/

  22. jpegrescan*+q*+s*+i*input.jpg*output.jpg

  23. AFTER&JPEGRESCAN: 0.78MB'('10kb'saved'by'math Dissimilarity:+0%

  24. And$now$for SCIENCE!

  25. 12.000 Pseudorandom+JPEGs

  26. None
  27. None
  28. None
  29. JPEGOp'm+JPEGRescan0size0reduc'on 12.0% median

  30. JPEGOp'm+JPEGRescan0visual0dissimilarity0(DSSIM) 0.02% median

  31. Let's&hunt&for&moar!

  32. Imagine(adap+ve(compression(quality(based(on Round&Trip&Times

  33. Akamai&Adap)ve&Image&Compression Awesome'for'Mobile

  34. Or#adap've#compression#quality#based#on Visual'Impact

  35. Binary'search'for'acceptable'dissimilarity

  36. None
  37. Why$dissimilarity? Because'of'non+standardized'"quality"'metric

  38. 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

  39. None
  40. Adap%ve(compression(based(on(visual(impact also%plays%nicely%with%other%formats%like%WebP

  41. WebP

  42. Think:'PNG8+24+JPEG+GIF+be5er'compression aka#not#made#for#HiDef#photography#or#game#engines

  43. BEFORE: 0.78MB No#EXIF#data

  44. cwebp&'quiet&input.jpg&'o&output.webp

  45. As#WebP: 0.46MB Dissimilarity:+1.5%

  46. dwebp&output.webp&+o&output+webp.png

  47. WebP%Browser%Support

  48. And$now$12.000x$WebP$for$science

  49. None
  50. WebP%size%reduc-on 32.9% median

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

  52. MozJPEG

  53. None
  54. BEFORE: 0.78MB No#EXIF#data

  55. cjpeg&'quality&75&'op2mize&'progressive&'outfile&output.jpg&input.jpg

  56. A"er%MozJPEG: 0.76MB Dissimilarity:+0.03%

  57. And$now$12.000x$MozJPEG$for$science

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

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

  61. JPEGmini

  62. None
  63. JPEGmini(size(reduc0on 17.2% median

  64. JPEGmini(visual(dissimilarity((DSSIM) 0.4% median

  65. Be#smart#about#what's#in#the#box

  66. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor

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

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

  73. bash%adept.sh%input.jpg

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

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

  77. None
  78. Adept&size&reduc-on 29.9% median

  79. Adept&visual&dissimilarity&(DSSIM) 0.7% median

  80. None
  81. I"WANT"YOU to#compress#images#stronger

  82. 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%

  83. 1)#Install#grunt-imagine 2)#Get#ImageOp-m.CLI#on#Mac 3)#git#clone#Adept#&#create#PRs#;) h"p:/ /github.com/technopagan/adept3jpg3compressor

  84. Thanks!