Twitter への画像投稿をネタにPNGとJPEGのお勉強

1. Twitter画像投稿をネタ
にJPEG,PNGフォー
マットのお勉強
2016/3/4(Fri) “よや” yoya@awm.jp

2. 自己紹介
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

3. Twitter画像投稿
画像を投稿すると画質が劣化する
http://furyu.hatenablog.com/entry/20160225/1456
353020

4. 検証しよう
先ほどのページの情報で十分ですね！
しかし、皆さん自分のやりやすい方法で独自に
検証してると思います
バージョンアップで制限が変わったりしますし
実際、ネット検索すると2MB で JPEG 強制とか、
最大サイズも1024pt といった古い情報が見つかり
ます
今回は検証方法の一例を紹介します
まずは PNG と JPEG の種類について復習から

5. 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

6. PNG フォーマット
color type (pixel 値の並べ方を定義)

7. PNG type:2 RGB (PNG24)
R,G,B の3つの値を並べる
IHDR IDAT IEND

8. PNG type:3 Index (PNG8)
パレットを定義して、そこへのインデックス値
で画像を表現
0 0 1
IHDR IDAT IENDPLTE
0
1

9. PNG type:3 Index (PNG8)
+ tRNS
tRNS をつけて透明度を表現できる
0 0
IHDR IDAT IENDtRNS
0
1
PLTE
0
1
1

10. PNG type:6 RGBA
(PNG32)
RGB に A(不透明度)追加で 4つの値を並べる
IHDR IDAT IEND

11. PNG インターレース
http://mikeneko.creator.club.ne.jp/~lab/grp/png/p
3.html#h3-5
GIF も多少独特だけど、PNG のインターレース
は Adam7 アルゴリズムという更に複雑な
行だけでなく列もインターレース処理する為、
圧縮が効きにくい。(データサイズが結構増える)

12. 下から
順番に
転送される
http://mikeneko.creator.club.ne.jp/~lab/grp/png/p3.html#h3-5

13. 実験画像作成
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)

14. 実験画像作成
Interlace Adam7 生成
$ convert Opaopa.png –interlace PNG Opaopa-
interlace.png
$ identify -verbose Opaopa-interlace.png | grep Inter
Interlace: PNG

15. 実験結果 (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

16. JPEG フォーマット
JPEGのYCbCrについて
https://blog.awm.jp/2016/02/06/ycbcr/
Red Green Blue Y Cb Cr
Cb,Crの下半分は負の色なので仮の着色

17. JPEG YCbCr
人は明るさに敏感 > Y(輝度)
色味は結構鈍感 > Cb(青の色差), Cr(赤の色差)
Cb, Cr の解像度を下げて、データを節約する
Chroma Subsampling
参考) http://jp.red.com/news/video-chroma-subsampling-
jp
Cb, Cr 画像の
解像度を下げる

18. 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 成分が４サンプ
ル
b: Cb,Cr 成分も各４サンプ
ル
c: 次の行(偶数行の)Cb,Cr 成分も各４サンプル

19. 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
同じ 同じ
同じ 同じ

20. YUV422 でデータ量削減
CbとCr を1/2 に減らす
Y Cb Cr Y Y Cb Cr Y
Y Cb Cr Y Y Cb Cr Y
a: Y 成分が４サンプ
ル
b: Cb,Cr 成分は各２サンプ
ル
c: 次の行(偶数行の)Cb,Cr 成分は各２サンプル

21. YUV410
(正直、減らしすぎ)
Y Cb Cr Y Y Y
Y Y Y Y
a: Y 成分が４サンプ
ル
b: Cb,Cr 成分は各１サンプ
ル
c: 次の行(偶数行の)Cb,Cr 成分は各０サンプル

22. YCC
YUV44
4
YCCYCCYCC
YCCYCCYCCYCC
YCC
YUV42
2
YCC
YCC YCC
YCC
YUV41
1
YCC
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
YCC
YUV44
0
YCCYCCYCC YCC
YUV42
0
YCC YCC
YUV41
0
Y Y Y
Y
Y
Y
Y
YYY Y YY Y Y YY
YUVabc の早見表

23. JPEG インターレース
JPEG は DCT 成分の荒い方から細かい方まで
フェーズに分けて、データ保存する
一般的なインターレースとは少し違う
なお、ベースラインJPEGよりインターレース
JPEGの方がサイズが減る可能性も結構ある
表示はベースラインJPEGより早いしサイズは小
さくなるかもしれないし良い事づくめ。(かもし
れない)

24. 最後までデータを読んで表示
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

25. 実験画像作成
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

26. 実験結果 (Mac+Chrome)
オリジナル画像 Twitter上の画像 (orig)
YUV444 YUV420
YUV422 YUV420
YUV411 YUV420
YUV440 YUV420
YUV420 YUV420
YUV410 YUV420

27. YCC
YUV44
4
YCCYCCYCC
YCCYCCYCCYCC
YCC
YUV42
2
YCC
YCC YCC
YCC
YUV41
1
YCC
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
YCC
YUV44
0
YCCYCCYCC YCC
YUV42
0
YCC YCC
YUV41
0
Y Y Y
Y
Y
Y
Y
YYY Y YY Y Y YY
YUVabc の早見表
全部 YUV420 に変換される！

28. YUV の量子化デメリット
ConvertToRGB
http://csbarn.blogspot.jp/2012/01/converttorgb.html
RGB 空間を全てカバーする為、YCbCr 空間は大き目
相互変換で下の桁が潰れて値の種類が減る

29. JPEG の量子化劣化
RGB => YCbCr => RGB で色数が1/4 に減色され
る
R,G,B で24bit だとすると 22bit
つまり、R,G,B 各々は実質約 7bit
ちなみに人間の目は 10bit 認識できる

30. まとめ
Twitter としてはなるべく JPEG にしたいらしい
データサイズを少しでも減らしたい
JPEG の場合、CbCr成分が横1/2、縦1/2 で 1/4 に間引きする
PNG でも透明ピクセルが含まれないと JPEG に変換される
JPEG は透明度を表現できないので透明ピクセルがあるPNGは
仕方なくPNGのまま
JPEG は全部プログレッシブJPEG
表示の早さ優先。ベースラインJPEGとサイズあまり変わらない。
減る可能性さえある
PNG のインターレースは無効化される
サイズが膨らむので避けたいはず

31. 質問受け付けます