Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Squeezing PNG and JPEG
Search
Ariya Hidayat
July 27, 2017
Programming
2
430
Squeezing PNG and JPEG
Presented at ForwardJS Summit July 2017.
Ariya Hidayat
July 27, 2017
Tweet
Share
More Decks by Ariya Hidayat
See All by Ariya Hidayat
RAG for Small LLM
ariya
0
160
Vector Search and LLM
ariya
0
150
Making a Bigger Impact with Open Source
ariya
0
91
Practical Testing of Firebase Projects
ariya
0
120
Practical CI/CD for React Native
ariya
0
140
Hijrah ke TypeScript
ariya
0
490
Unggul dan Berdikari dengan Open-source
ariya
0
300
Practical CI/CD for React Native
ariya
1
480
Integrasi Berkesinambungan untuk React Native
ariya
1
420
Other Decks in Programming
See All in Programming
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Model Pollution
hschwentner
1
190
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
550
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
Le côté obscur des IA génératives
pascallemerrer
0
130
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Building Adaptive Systems
keathley
43
2.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Become a Pro
speakerdeck
PRO
29
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
Squeezing PNG & JPEG The Lazy Person's Guide https://unsplash.com/photos/srd-rZ5fcFw
None
None
Objective Deliver a two-dimensional array of colors in the smallest
possible PNG/JPEG file without any noticeable loss in visual quality
Optimal File size Visual quality Ideal Unacceptable
010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Encoding Decoding
010110010101 01011001010101 0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 010110010101 01011001010101
0100 1001010110010101010100 1001 0101100101010101001001 01011001010101010010010 101 Lossless Lossy Not identical vs the original
.jpg 8 megapixels JPEG Quality 95 2,210 KB MozJPEG Q
= 84 879 KB 2 seconds .jpg Guetzli 5 minutes 877 KB
https://unsplash.com/photos/Zh6C3GydNBA Squeezing PNG
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
DEFLATE = Lempel-Ziv + Huffman RFC 1951
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
None
Color Deduplication
PNG Color Channels
PNG Compression Efficiency https://encode.ru/threads/1725-pngthermal-pseudo-thermal-view-of-PNG-compression-efficiency
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]
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
0 50 100 150 200 Original Zopfli KB PNG File
Size
Quantization of Colors https://ariya.io/2016/07/shrinking-png-images-with-quantization 9734 distinct colors only 256 colors
9734 distinct colors
only 256 colors
None
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.
0 50 100 150 Full colors Reduced colors KB PNG
File Size
https://unsplash.com/photos/5bdKZLqeySU Squeezing JPEG
JPEG Color Space: YCbCr Luminance Chroma
Block Splitting: 8 × 8 Pixels
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)
Effects of different Quality Factor Q = 60 Q =
20 Q = 5
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
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
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
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
Blurring the Background Photo by Kaizen Nguyễn on https://unsplash.com/photos/jcLcWL8D7AQ 116
KB 105 KB
https://unsplash.com/photos/FCrgmqqvl-w Summary
None
Identify trade-offs Reduce details Encode exhaustively
File size Visual quality
Further Exploration
Thank You shapesecurity.com Some artworks are from https://unsplash.com/ and http://openclipart.org.
speakerdeck.com/ariya @ariyahidayat