Squeezing Images

Presented at Uber Destination:Web meetup in San Francisco (https://www.meetup.com/UberEvents/events/247549849/).

The current best practice for choosing an image format is to use JPEG for digital photos and PNG for artwork and company logos. In this talk, we examine these two popular formats in a bit more detail to understand the reasoning behind this conventional wisdom. Armed with this knowledge, we will learn color quantization, low-pass filtering, and aggressive encoding to reduce the size of the images even further.

Transcript

1. Squeezing Images
   https://unsplash.com/photos/Zh6C3GydNBA
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

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

   View Slide

6. Optimal
   File size
   Visual quality
   Ideal
   Unacceptable
   

   View Slide

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

   View Slide

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

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

   View Slide

10. Squeezing JPEG
    

    View Slide

11. JPEG Color Space: YCbCr
    Luminance Chroma
    

    View Slide

12. Block Splitting: 8 × 8 Pixels
    

    View Slide

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

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

    View Slide

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

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

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

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

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

    View Slide

20. Portrait Mode 2,735 KB
    

    View Slide

21. Portrait Mode 2,039 KB
    

    View Slide

22. Squeezing PNG
    

    View Slide

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

24. DEFLATE = Lempel-Ziv + Huffman
    RFC 1951
    

    View Slide

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

26. View Slide

27. Color Deduplication
    

    View Slide

28. PNG Color Channels
    

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

34. 9734 distinct colors
    

    View Slide

35. only 256 colors
    

    View Slide

36. View Slide

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

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

    View Slide

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

    View Slide

40. View Slide

41. Identify
    trade-offs
    Reduce
    details
    Encode
    exhaustively
    

    View Slide

42. File size
    Visual quality
    

    View Slide

43. Further Exploration
    

    View Slide

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

    View Slide