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

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.

Tobias Baldauf

October 11, 2014
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. We#have
    a"problem

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. BEFORE:
    5.7MB
    EXIF%data

    View full-size slide

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

    View full-size slide

  13. Must!&Go!&Faster!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. And$now$for
    SCIENCE!

    View full-size slide

  21. 12.000
    Pseudorandom+JPEGs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Binary'search'for'acceptable'dissimilarity

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  33. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. WebP%Browser%Support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. MozJPEG(size(reduc0on
    12.1%
    median

    View full-size slide

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

    View full-size slide

  47. JPEGmini(size(reduc0on
    17.2%
    median

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

  53. bash%adept.sh%input.jpg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

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

    View full-size slide