Download to read offline
TwitterImgUpload
- 1.
- 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.
- 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.
- 13. 実験画像作成 PNG フォーマットについて http://blog.awm.jp/2016/01/26/png/ $ convertOpaopa.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 GreenBlue 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 CrY 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 CrY 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 CrY 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 YCCYCC 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 DQTSOF2 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/$ convertOpaopa.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 YCCYCC 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.