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
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
6. Optimal File size Visual quality Ideal Unacceptable
7. 010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Encoding Decoding
8. 010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Lossless Lossy Not identical vs the original
9. .jpg 8 megapixels JPEG Quality 95 2,210 KB MozJPEG Q = 84 879 KB 2 seconds .jpg Guetzli 5 minutes 877 KB
10. Squeezing JPEG
11. JPEG Color Space: YCbCr Luminance Chroma
12. Block Splitting: 8 × 8 Pixels
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)
14. Effects of different Quality Factor Q = 60 Q = 20 Q = 5
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
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
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
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
19. Blurring the Background Photo by Kaizen Nguyễn on https://unsplash.com/photos/jcLcWL8D7AQ 116 KB 105 KB
20. Portrait Mode 2,735 KB
21. Portrait Mode 2,039 KB
22. Squeezing PNG
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
24. DEFLATE = Lempel-Ziv + Huffman RFC 1951
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
27. Color Deduplication
28. PNG Color Channels
29. PNG Compression Efficiency https://encode.ru/threads/1725-pngthermal-pseudo-thermal-view-of-PNG-compression-efficiency
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]
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
32. 0 50 100 150 200 Original Zopfli KB PNG File Size
33. Quantization of Colors https://ariya.io/2016/07/shrinking-png-images-with-quantization 9734 distinct colors only 256 colors
34. 9734 distinct colors
35. only 256 colors
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.
38. 0 50 100 150 Full colors Reduced colors KB PNG File Size
39. https://unsplash.com/photos/FCrgmqqvl-w Summary
41. Identify trade-offs Reduce details Encode exhaustively
42. File size Visual quality
43. Further Exploration
44. Thank You Some artworks are from https://unsplash.com/ and http://openclipart.org. speakerdeck.com/ariya @ariyahidayat