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
Lossy PNG for true-color images (Velocity Conf ...
Search
Kornel Lesiński
November 18, 2014
Design
2
870
Lossy PNG for true-color images (Velocity Conf EU 2014)
Kornel Lesiński
November 18, 2014
Tweet
Share
More Decks by Kornel Lesiński
See All by Kornel Lesiński
SudWeb
kornel
0
180
Modern PNG compressors
kornel
13
1.2k
Handling binary data in JS
kornel
1
380
Mobblestouch — W3C Touch Events and gestures
kornel
2
720
Server-Sent Events
kornel
5
960
"HTML5" Transport Protocol
kornel
3
370
Front-end Performance
kornel
5
470
Other Decks in Design
See All in Design
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
260
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
270
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
マンガで分かるサービスデザインガイドライン
senryakuka
1
660
LLMによるRAG評価用合成テストデータの生成
licux
6
710
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
650
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
240
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
700
デザイナーとPMの両ロール_3つのポイント
toy1618
1
170
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Become a Pro
speakerdeck
PRO
26
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Transcript
Lossy PNG Kornel Lesiński 2014
PNG Lossless JPEG Lossy
PNG PNG JPEG Lossless Lossy PNG Opaque Alpha Channel WebP
JPEG 2000 JPEG XR JPEG XT if you need lossy and alpha, it becomes complicated. You may need to serve 4 different files for every image!
flickr.com/photos/ama711/8760361969 0% 100% Lossy PNG is a hack, but it
works like a truly lossy format
Pixels Math gzip Standard PNG
None
gzip finds and removes repeated sequences of identical pixels
00000000 00000001 00000010 00000011 00000100 00000101 00000110 00000111 00001000 00001001
00001010 0 10 110 1110 11110 111110 1111110 11111110 111111110 1111111110 11111111110 → → → → → → → → → → → Instead of storing 8 bits per byte, gzip uses variable-length sequences. Most popular bytes are given shortest sequences.
Some images don’t have repeated pixels and few very popular
colors
0 1 2 3 4 5 6 7 8 9
0 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = = Instead of storing uncompressible absolute values PNG can store difference between neighboring pixels
5 6 4 6 5 5 6 4 5 4
5 + 1 -2 +2 - 1 0 + 1 -2 + 1 - 1 = = 5 0 0 0 0 0 0 0 0 0 0 Noisy images won’t compress well… unless you fake the data and remove the noise
Pixels Math gzip Lies Lossy PNG trick is about replacing
math with lies. Only the encoder changes, so it’s 100% compatible.
? When PNG “guesses” what the next pixel will be,
it can make the guess based on average of 2 neighbors, which in lossy PNG causes blur
flickr.com/photos/tundra-ice/5124841152 Original: 2MB 0.6MB 0.3MB
Original: 2MB 0.6MB 0.3MB
Original: 221KB Lossy: 67KB ed_g2s
182KB flickr.com/photos/_tar0_/6223343149
27KB flickr.com/photos/_tar0_/6223343149 The algorithm can decide quality of every pixel,
so it tends to preserve sharp edges, especially text
28KB flickr.com/photos/_tar0_/6223343149 Top of the file has 0% quality, bottom
80% quality
• Works everywhere—fully backwards-compatible • No color limit—supports 24 and
32-bit PNG • Preserves edges—per-pixel quality control • Very fast—small tweak in the encoder • Streamable—only needs 2 lines of the image
pngquant -Q 75-100 --skip-if-larger \ -o out.png in.png || posterize
-b -Q 75 in.jpg out.jpg pngquant is often more efficient, but can’t guarantee quality. You can combine the two for best results.
pngmini.com — ImageAlpha GUI github.com/pornel/mediancut-posterizer CLI logicnet.dk/Analyzer — Image Analyzer
GUI @pornelski pngmini.com/lossypng.html