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
twitterimgupload
Search
yoya
March 04, 2016
Technology
0
380
twitterimgupload
Twitter への画像投稿をネタにPNGとJPEGのお勉強
yoya
March 04, 2016
Tweet
Share
More Decks by yoya
See All by yoya
resize_nitpick
yoya
1
150
ImageFluxBinary
yoya
2
2.8k
HEIF-kaisetsu
yoya
4
3.4k
go-thumber-imagick
yoya
1
180
chokaizomae
yoya
2
570
wildimagebinary
yoya
1
220
goimagicksyokai
yoya
2
1.1k
GoImagickThumbnail
yoya
0
1.6k
sushigazou
yoya
0
12k
Other Decks in Technology
See All in Technology
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.6k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
このままAIが発展するだけでAGI達成可能な理由
frievea
0
120
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
470
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
120
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
960
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
300
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
100
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Railsの話をしよう
yahonda
0
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Typedesign – Prime Four
hannesfritz
42
2.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Agile that works and the tools we love
rasmusluckow
331
21k
A designer walks into a library…
pauljervisheath
209
24k
Documentation Writing (for coders)
carmenintech
75
5.1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Building Adaptive Systems
keathley
44
2.8k
Transcript
Twitter画像投稿をネタに JPEG,PNGフォーマット のお勉強 2016/3/4(Fri) “よや”
[email protected]
自己紹介 Twitter: @yoya OSDN: https://osdn.jp/users/yoya/ バイナリを分解して並べ直すのが趣味です
ダンプツールを作ったので紹介 (PHP製) https://github.com/yoya/IO_JPEG https://github.com/yoya/IO_GIF https://github.com/yoya/IO_PNG
Twitter画像投稿 画像を投稿すると画質が劣化する http://furyu.hatenablog.com/entry/ 20160225/1456353020
検証しよう 先ほどのページの情報で十分ですね! しかし、皆さん自分のやりやすい方法で独自に 検証してると思います バージョンアップで制限が変わったりしますし 実際、ネット検索すると2MB
で JPEG 強制とか、最 大サイズも1024pt といった古い情報が見つかります 今回は検証方法の一例を紹介します まずは PNG と JPEG の種類について復習から
PNG と JPEG の復習 PNG フォーマットについて http://blog.awm.jp/2016/01/26/png/ color type:
PNG8, PNG24, PNG32 tRNS: PNG8, PNG24 の透明度 インターレース Adam7 JPEG フォーマットについて http://blog.awm.jp/2016/01/26/jpeg/ プログレッシブJPEG YCbCr のサブクロマサンプリング YUV444, 422, 411, 440, 420, 410
PNG フォーマット color type (pixel 値の並べ方を定義)
PNG type:2 RGB (PNG24) R,G,B の3つの値を並べる IHDR IDAT IEND
PNG type:3 Index (PNG8) パレットを定義して、そこへのインデックス値 で画像を表現 0 0 1
IHDR IDAT IEND PLTE 0 1
PNG type:3 Index (PNG8) + tRNS tRNS をつけて透明度を表現できる 0 0
IHDR IDAT IEND tRNS 0 1 PLTE 0 1 1
PNG type:6 RGBA (PNG32) RGB に A(不透明度)追加で 4つの値を並べる IHDR
IDAT IEND
PNG インターレース http://mikeneko.creator.club.ne.jp/~lab/grp/png/ p3.html#h3-5 GIF も多少独特だけど、PNG のインターレース は Adam7
アルゴリズムという更に複雑な 行だけでなく列もインターレース処理する為、圧縮が 効きにくい。(データサイズが結構増える)
下から 順番に 転送される http://mikeneko.creator.club.ne.jp/~lab/grp/png/p3.html#h3-5
実験画像作成 PNG フォーマットについて http://blog.awm.jp/2016/01/26/png/ $ convert Opaopa.png png8:Opaopa-png8.png $
convert Opaopa.png png24:Opaopa-png24.png $ convert Opaopa.png png32:Opaopa-png32.png $ identify -verbose Opaopa-png32.png | grep type Mime type: image/png png:IHDR.color-type-orig: 6 png:IHDR.color_type: 6 (RGBA)
実験画像作成 Interlace Adam7 生成 $ convert Opaopa.png –interlace PNG
Opaopa-interlace.png $ identify -verbose Opaopa-interlace.png | grep Inter Interlace: PNG
実験結果 (Mac+Chrome) オリジナル画像 Twitter上の画像 (orig) PNG8+tRNS 、 PNG32 PNG PNG8,
PNG24 (両方 tRNSなし) Progressive JPEG 巨大なPNG (多分3MB以上) Progressive JPEG オリジナル画像 インターレース Twitter上の画像 (orig) PNG8+tRNS 、 PNG32 PNG (インターレース無し) PNG8, PNG24 (両方 tRNSなし) Progressive JPEG 巨大なPNG (多分3MB以上) Progressive JPEG
JPEG フォーマット JPEGのYCbCrについて https://blog.awm.jp/2016/02/06/ycbcr/ Red Green Blue Y Cb
Cr Cb,Crの下半分は負の色なので仮の着色
JPEG YCbCr 人は明るさに敏感 > Y(輝度) 色味は結構鈍感 > Cb(青の色差),
Cr(赤の色差) Cb, Cr の解像度を下げて、データを節約する Chroma Subsampling 参考) http://jp.red.com/news/video-chroma-subsampling-jp Cb, Cr 画像の 解像度を下げる
YUV444 (CbCrを省略しない) Y Cb Cr Y Cb Cr Y Cb
Cr Y Cb Cr Y Cb Cr Y Cb Cr Y Cb Cr Y Cb Cr a: Y 成分が4サンプル b: Cb,Cr 成分も各4サンプル c: 次の行(偶数行の)Cb,Cr 成分も各4サンプル
YUV422 (一般的な方式、特に動画) Y Cb Cr Y Cb Cr Y Cb
Cr Y Cb Cr Y Cb Cr Y Cb Cr Y Cb Cr Y Cb Cr 同じ 同じ 同じ 同じ
YUV422 でデータ量削減 CbとCr を1/2 に減らす Y Cb Cr Y
Y Cb Cr Y Y Cb Cr Y Y Cb Cr Y a: Y 成分が4サンプル b: Cb,Cr 成分は各2サンプル c: 次の行(偶数行の)Cb,Cr 成分は各2サンプル
YUV410 (正直、減らしすぎ) Y Cb Cr Y Y Y Y Y
Y Y a: Y 成分が4サンプル b: Cb,Cr 成分は各1サンプル c: 次の行(偶数行の)Cb,Cr 成分は各0サンプル
YCC YUV444 YCC YCC YCC YCC YCC YCC YCC YCC
YUV422 YCC YCC YCC YCC YUV411 YCC Y Y Y Y Y Y Y Y Y Y YCC YUV440 YCC YCC YCC YCC YUV420 YCC YCC YUV410 Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y YUVabc の早見表
JPEG インターレース JPEG は DCT 成分の荒い方から細かい方まで フェーズに分けて、データ保存する 一般的なインターレースとは少し違う
なお、ベースラインJPEGよりインターレース JPEGの方がサイズが減る可能性も結構ある 表示はベースラインJPEGより早いしサイズは小 さくなるかもしれないし良い事づくめ。(かもし れない)
最後までデータを読んで表示 SOI APP0 DQT SOF2 DHT SOS DHT SOS DHT
SOS DHT SOS EOI SOI APP0 DQT SOF0 DHT DHT DHT DHT SOS EOI 粗い成分を読んだ時点で表示 読みながら徐々に細かい 成分も表示 Baseline JPEG Progressive JPEG
実験画像作成 JPEG フォーマットについて http://blog.awm.jp/2016/01/26/jpeg/ $ convert Opaopa.png –sampling-factor “1x1,1x1,1x1”
yuv444.jpeg $ convert Opaopa.png –sampling-factor “2x1,1x1,1x1” yuv422.jpeg (略) $ convert Opaopa.png –sampling-factor “4x2,1x1,1x1” yuv410.jpeg $ identify -verbose Opaopa-yuv420.png | grep samp jpeg:sampling-factor: 2x2,1x1,1x1
実験結果 (Mac+Chrome) オリジナル画像 Twitter上の画像 (orig) YUV444 YUV420 YUV422 YUV420 YUV411
YUV420 YUV440 YUV420 YUV420 YUV420 YUV410 YUV420
YCC YUV444 YCC YCC YCC YCC YCC YCC YCC YCC
YUV422 YCC YCC YCC YCC YUV411 YCC Y Y Y Y Y Y Y Y Y Y YCC YUV440 YCC YCC YCC YCC YUV420 YCC YCC YUV410 Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y YUVabc の早見表 全部 YUV420 に変換される!
YUV の量子化デメリット ConvertToRGB http://csbarn.blogspot.jp/2012/01/converttorgb.html RGB 空間を全てカバーする為、YCbCr 空間は大き目 相互変換で下の桁が潰れて値の種類が減る
JPEG の量子化劣化 RGB => YCbCr => RGB で色数が1/4 に減色される
R,G,B で24bit だとすると 22bit つまり、R,G,B 各々は実質約 7bit ちなみに人間の目は 10bit 認識できる
まとめ Twitter としてはなるべく JPEG にしたいらしい データサイズを少しでも減らしたい JPEG
の場合、CbCr成分が横1/2、縦1/2 で 1/4 に間引きする PNG でも透明ピクセルが含まれないと JPEG に変換される JPEG は透明度を表現できないので透明ピクセルがあるPNGは仕 方なくPNGのまま JPEG は全部プログレッシブJPEG 表示の早さ優先。ベースラインJPEGとサイズあまり変わらない。 減る可能性さえある PNG のインターレースは無効化される サイズが膨らむので避けたいはず
質問受け付けます