Squeezing PNG and JPEG - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Optimal File size Visual quality Ideal Unacceptable

Slide 6

Slide 6 text

010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Encoding Decoding

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

DEFLATE = Lempel-Ziv + Huffman RFC 1951

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Color Deduplication

Slide 15

Slide 15 text

PNG Color Channels

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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]

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

0 50 100 150 200 Original Zopfli KB PNG File Size

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

9734 distinct colors

Slide 22

Slide 22 text

only 256 colors

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

JPEG Color Space: YCbCr Luminance Chroma

Slide 28

Slide 28 text

Block Splitting: 8 × 8 Pixels

Slide 29

Slide 29 text

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)

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Identify trade-offs Reduce details Encode exhaustively

Slide 39

Slide 39 text

File size Visual quality

Slide 40

Slide 40 text

Further Exploration

Slide 41

Slide 41 text

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