Squeezing PNG and JPEG

Presented at ForwardJS Summit July 2017.

Transcript

1. Squeezing PNG & JPEG
   The Lazy Person's Guide
   https://unsplash.com/photos/srd-rZ5fcFw
   

   View Slide

2. View Slide

3. View Slide

4. Objective
   Deliver a two-dimensional array of colors
   in the smallest possible PNG/JPEG file
   without any noticeable loss in visual quality
   

   View Slide

5. Optimal
   File size
   Visual quality
   Ideal
   Unacceptable
   

   View Slide

6. 010110010101 01011001010101
   0100 1001010110010101010100
   1001 0101100101010101001001
   01011001010101010010010 101
   Encoding
   Decoding
   

   View Slide

7. 010110010101 01011001010101
   0100 1001010110010101010100
   1001 0101100101010101001001
   01011001010101010010010 101
   010110010101 01011001010101
   0100 1001010110010101010100
   1001 0101100101010101001001
   01011001010101010010010 101
   Lossless
   Lossy
   Not identical
   vs the original
   

   View Slide

8. .jpg
   8 megapixels
   JPEG Quality 95
   2,210 KB
   MozJPEG
   Q = 84
   879 KB
   2 seconds
   .jpg
   Guetzli
   5 minutes
   877 KB
   

   View Slide

9. https://unsplash.com/photos/Zh6C3GydNBA
   Squeezing PNG
   

   View Slide

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

    View Slide

11. DEFLATE = Lempel-Ziv + Huffman
    RFC 1951
    

    View Slide

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

    View Slide

13. View Slide

14. Color Deduplication
    

    View Slide

15. PNG Color Channels
    

    View Slide

16. PNG Compression Efficiency
    https://encode.ru/threads/1725-pngthermal-pseudo-thermal-view-of-PNG-compression-efficiency
    

    View Slide

17. 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]
    

    View Slide

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

    View Slide

19. 0 50 100 150 200
    Original
    Zopfli
    KB
    PNG File Size
    

    View Slide

20. Quantization of Colors
    https://ariya.io/2016/07/shrinking-png-images-with-quantization
    9734 distinct colors only 256 colors
    

    View Slide

21. 9734 distinct colors
    

    View Slide

22. only 256 colors
    

    View Slide

23. View Slide

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

    View Slide

25. 0 50 100 150
    Full colors
    Reduced colors
    KB
    PNG File Size
    

    View Slide

26. https://unsplash.com/photos/5bdKZLqeySU
    Squeezing JPEG
    

    View Slide

27. JPEG Color Space: YCbCr
    Luminance Chroma
    

    View Slide

28. Block Splitting: 8 × 8 Pixels
    

    View Slide

29. 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)
    

    View Slide

30. Effects of different Quality Factor
    Q = 60 Q = 20 Q = 5
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Pyschovisual Similarity
    github.com/google/butteraugli
    https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c
    MozJPEG
    Butteraugli score: 2.3
    Guetzli
    Butteraugli score: 1.9
    

    View Slide

35. Blurring the Background
    Photo by Kaizen Nguyễn on https://unsplash.com/photos/jcLcWL8D7AQ
    116 KB 105 KB
    

    View Slide

36. https://unsplash.com/photos/FCrgmqqvl-w
    Summary
    

    View Slide

37. View Slide

38. Identify
    trade-offs
    Reduce
    details
    Encode
    exhaustively
    

    View Slide

39. File size
    Visual quality
    

    View Slide

40. Further Exploration
    

    View Slide

41. Thank You
    shapesecurity.com
    Some artworks are from https://unsplash.com/ and http://openclipart.org.
    speakerdeck.com/ariya
    @ariyahidayat
    

    View Slide