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

Squeezing Images

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.

Ariya Hidayat

February 28, 2018
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

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

    View full-size slide

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

  3. Optimal
    File size
    Visual quality
    Ideal
    Unacceptable

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Squeezing JPEG

    View full-size slide

  8. JPEG Color Space: YCbCr
    Luminance Chroma

    View full-size slide

  9. Block Splitting: 8 × 8 Pixels

    View full-size slide

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

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

    View full-size slide

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

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

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

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

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

    View full-size slide

  17. Portrait Mode 2,735 KB

    View full-size slide

  18. Portrait Mode 2,039 KB

    View full-size slide

  19. Squeezing PNG

    View full-size slide

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

  21. DEFLATE = Lempel-Ziv + Huffman
    RFC 1951

    View full-size slide

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

  23. Color Deduplication

    View full-size slide

  24. PNG Color Channels

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  30. 9734 distinct colors

    View full-size slide

  31. only 256 colors

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  35. Identify
    trade-offs
    Reduce
    details
    Encode
    exhaustively

    View full-size slide

  36. File size
    Visual quality

    View full-size slide

  37. Further Exploration

    View full-size slide

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

    View full-size slide