Slide 1

Slide 1 text

Twitter画像投稿をネタに JPEG,PNGフォーマット のお勉強 2016/3/4(Fri) “よや” [email protected]

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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サンプル

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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サンプル

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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 の早見表

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 に変換される!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

質問受け付けます