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.

Tobias Baldauf

November 19, 2014
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. Advanced(Cat(Content(Compression(101

    View full-size slide

  2. What%You%Will%Learn

    View full-size slide

  3. Q"vs."DSSIM"&"Encoders
    Saliency)Maps)&)automagic)Q

    View full-size slide

  4. picture
    brought(to(you(by(@yoavweiss

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Dissimilarity
    because'JPEG'"quality"'is'not'standardized

    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. Think:'PNG8+24+JPEG+GIF+be5er'compression
    aka#not#made#for#HiDef#photography#or#game#engines

    View full-size slide

  25. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. WebP%Browser%Support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  34. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. MozJPEG(size(reduc0on
    12.1%
    median

    View full-size slide

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

    View full-size slide

  40. JPEGmini(size(reduc0on
    17.2%
    median

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. BEFORE:
    0.78MB
    No#EXIF#data

    View full-size slide

  46. bash%adept.sh%input.jpg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Adap%ve(JPEG(Compression
    coming'to'mozjpeg

    View full-size slide

  52. brought(to(you(by(@pornelski

    View full-size slide

  53. mozjpeg(+(adap,ve(quality(+(saliency(=
    superhero(compression

    View full-size slide

  54. Even%more%adap,ve%quality

    View full-size slide

  55. What%if%I%told%you...
    that$the$JPEG$quality$se0ng$sucks?

    View full-size slide

  56. cjpeg&dssim
    h"ps:/
    /github.com/technopagan/cjpeg4dssim

    View full-size slide

  57. Adap%ve(JPEG(quality(based(on
    Round&Trip&Times

    View full-size slide

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

  59. 1.#Install'mozjpeg
    2.#Follow%saliency%mapping
    3.#Leverage'cjpeg+dssim
    4.#Serve%WebP%+%RTT,Q%via%Akamai

    View full-size slide