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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. We#have
   a"problem
   

   View Slide

5. View Slide

6. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Tools
    

    View Slide

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

    View Slide

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

    View Slide

15. BEFORE:
    5.7MB
    EXIF%data
    

    View Slide

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

    View Slide

17. Must!&Go!&Faster!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. And$now$for
    SCIENCE!
    

    View Slide

25. 12.000
    Pseudorandom+JPEGs
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. JPEGOp'm+JPEGRescan0size0reduc'on
    12.0%
    median
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Binary'search'for'acceptable'dissimilarity
    

    View Slide

36. View Slide

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

    View Slide

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
    

    View Slide

39. View Slide

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

    View Slide

41. WebP
    

    View Slide

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

    View Slide

43. BEFORE:
    0.78MB
    No#EXIF#data
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. WebP%Browser%Support
    

    View Slide

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

    View Slide

49. View Slide

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

    View Slide

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

    View Slide

52. MozJPEG
    

    View Slide

53. View Slide

54. BEFORE:
    0.78MB
    No#EXIF#data
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. View Slide

59. MozJPEG(size(reduc0on
    12.1%
    median
    

    View Slide

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

    View Slide

61. JPEGmini
    

    View Slide

62. View Slide

63. JPEGmini(size(reduc0on
    17.2%
    median
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. View Slide

68. View Slide

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

    View Slide

70. View Slide

71. View Slide

72. BEFORE:
    0.78MB
    No#EXIF#data
    

    View Slide

73. bash%adept.sh%input.jpg
    

    View Slide

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

    View Slide

75. View Slide

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

    View Slide

77. View Slide

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

    View Slide

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

    View Slide

80. View Slide

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

    View Slide

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%
    

    View Slide

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

    View Slide

84. Thanks!
    

    View Slide