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

Squeezing PNG and JPEG

Squeezing PNG and JPEG

Presented at ForwardJS Summit July 2017.

Ariya Hidayat

July 27, 2017
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Objective Deliver a two-dimensional array of colors in the smallest

    possible PNG/JPEG file without any noticeable loss in visual quality
  2. 010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 010110010101 01011001010101

    0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Lossless Lossy Not identical vs the original
  3. .jpg 8 megapixels JPEG Quality 95 2,210 KB MozJPEG Q

    = 84 879 KB 2 seconds .jpg Guetzli 5 minutes 877 KB
  4. Portable Network Graphics Lossless encoding Truecolor RGB RGB+A Indexed Color

    Grayscale RFC 2083 http://www.w3.org/TR/PNG/ Good compression (using DEFLATE) 8 bits/channel
  5. Lempel-Ziv: De-duplication 'Cause the players gonna play, play, play, play,

    play 'Cause the players gonna play, play, play, play, play 'Cause the players gonna[5:14], play, play, play, play 'Cause the players gonna[5:14], [6:6]play, play, play
  6. Duplication Search Trade-offs 'Cause the players gonna play, play, play,

    play, play 'Cause the players gonna[5:14], [6:6] [6:6] [6:6] [6:6] 'Cause the players gonna[5:14], [6:6] [12:12] [6:6]
  7. Zopfli: Exhaustive DEFLATE https://ariya.io/2016/06/using-zopfli-to-optimize-png-images github.com/google/zopfli > zopflipng tiger.png tiger-small.png Optimizing

    tiger.png Input size: 197220 (192K) Result size: 135325 (132K). Percentage of original: 68.616% Result is smaller
  8. pngquant.org > pngquant --speed 1 --verbose tiger.png tiger.png: read 193KB

    file made histogram...9734 colors found selecting colors...2% selecting colors...4% selecting colors...17% selecting colors...29% selecting colors...31% selecting colors...44% selecting colors...57% selecting colors...70% selecting colors...82% selecting colors...95% selecting colors...100% moving colormap towards local minimum eliminated opaque tRNS-chunk entries...59 entries transparent mapped image to new colors...MSE=1.048 (Q=96) writing 256-color image as tiger-fs8.png Quantized 1 image.
  9. Spatial → Frequency Domain 40 24 15 19 28 24

    19 15 38 34 35 35 31 28 27 29 40 47 49 40 33 29 32 43 42 49 50 39 34 30 32 46 40 47 46 35 31 32 35 43 38 43 42 31 27 27 28 33 39 33 25 17 14 15 19 26 29 16 6 1 -4 0 7 18 239 32 27 -12 3 -5 3 1 34 -3 -19 6 3 0 -1 1 -70 2 8 23 9 6 -1 -1 5 0 -6 11 -2 0 -1 1 -17 -3 6 6 3 -1 0 0 2 4 2 2 1 -2 0 1 -3 0 0 -1 -1 -1 0 0 1 -1 3 1 0 0 0 0 Discrete Cosine Transform (DCT)
  10. Quantization of DCT Coefficients 92 3 -9 -7 3 -1

    0 2 -39 -58 12 17 -2 2 4 2 -84 62 1 -18 3 4 -5 5 -52 -36 -10 14 -10 4 -2 0 -86 -40 49 -7 17 -6 -2 5 -62 65 -12 -2 3 -8 -2 0 -17 14 -36 17 -11 3 3 -1 -54 32 -9 -9 22 0 1 3 90 0 -7 0 0 0 0 0 -35 -56 9 11 0 0 0 0 -84 54 0 -13 0 0 0 0 -45 -33 -0 0 0 0 0 0 -77 -39 45 0 0 0 0 0 -52 60 0 0 0 0 0 0 -15 0 -19 0 0 0 0 0 -51 19 0 0 0 0 0 0 Affected by the Q factor https://cs.stanford.edu/people/eroberts/courses/soco/projects/data-compression/lossy/jpeg/coeff.htm
  11. Reduce Quality, Lose Details github.com/mozilla/mozjpeg > cjpeg –quality 84 original.jpg

    > output.jpg 2,210 KB → 879 KB 8 megapixels Original Q=95
  12. Alternative JPEG Encoder: Guetzli > guetzli –-quality 84 original.jpg output.jpg

    github.com/google/guetzli 2,210 KB → 877 KB 8 megapixels Original Q=95