今さら聞けない画像フォーマット

ミニWDDDS 今さら聞けない画像フォーマット 普段なんとなく使用している画像について少しだけ詳しくなりませんか。 jpg、png、bmp形式の構造理解によって、適切な用途や注意点を解説します。 2022/09/15 画像システム課 原英明 © SCIENCEPARK CORPORATION. SP2209-E21

ミニWDDDS この講演で得られること 1. JPG,PNG,BMPの違いについて簡単な説明ができる 2. 用途別に画像フォーマットを選択できる 3. 適切なファイルサイズ削減を行うことができる 2

ミニWDDDS 目次 1. 画像フォーマットとは 2. ラスタ形式とベクタ形式 3. フォーマットの種類 4. フォーマットによる画像比較 5. 最適化 6. さいごに 3

ミニWDDDS 画像フォーマットとは 1. 画像データを扱うための形式・規格のこと 2. 統一することで様々なアプリケーションで扱うことが可能 4

ミニWDDDS ラスタ形式とベクタ形式 • ラスタ形式 ➢ 画像情報をピクセル単位(画素)で保持 5

ミニWDDDS ラスタ形式とベクタ形式 • ラスタ形式 ➢ x=2, y=2（R:120,G:60,B:100） ➢ x=4, y=4（R:200,G:230,B:230） 6

ミニWDDDS ラスタ形式とベクタ形式 • ベクタ形式 ➢ 画像情報を数式で保持 7

ミニWDDDS ラスタ形式とベクタ形式 • ベクタ形式 ➢ sample.svgの中身はコード(xml) 8

ミニWDDDS 画像フォーマットの種類 1. ラスタ形式とベクタ形式あわせて100種類近く存在する ➢ https://en.wikipedia.org/wiki/Image_file_format 2. 今回解説するフォーマット フォーマット よく言われている特徴 圧縮形式 JPG 写真に適したフォーマットで、ファイルサイズを小さくで きる。ただし、何度も編集・保存すると画像が劣化してし まう。 非可逆圧縮 PNG 可逆圧縮のため画像が劣化しない。ただし、JPGと比べて 写真などのファイルサイズが大きくなってしまう。 可逆圧縮 BMP 最も古い画像形式で、圧縮しないので劣化しない。ただし、 他のフォーマットと比べてファイルサイズが大きくなって しまう。 圧縮しない 9

• https://en.wikipedia.org/wiki/Image_file_format

ミニWDDDS 画像品質と圧縮率について • 画像品質と圧縮率はトレードオフの関係 画像品質は高いが、圧縮率が低い 画像品質 画像品質は低いが、圧縮率が高い 圧縮率 10

ミニWDDDS 画像フォーマットの基本 • 基本データ構造 画像フォーマット 1. 2. 3. 4. 5. 6. 画像の幅・高さ 圧縮方式 ピクセルデータ数 解像度 サムネイル情報 色深度 メタデータ 1. カラープロファイル 2. カラーインデックス数 3. アルファチャンネル カラーデータ 1. 実際のピクセルデータ ピクセルデータ 11

ミニWDDDS JPG（非可逆圧縮） ◼ 基本的な考え方 ➢ 見た目に影響を与えないように情報量を減らすこと ➢ （＝品質を多少犠牲にしてでも高い圧縮率を実現したい） ◼ 圧縮方式について ➢ 人間の眼の2つの性質に着目 1. 明るさの変化に敏感である一方、色の変化には鈍感である 2. 図柄の緩やかな変化には敏感である一方、細かく急激な変化には鈍感で ある 12

ミニWDDDS JPG（非可逆圧縮） ◼ 圧縮方式について 1. 明るさを変えずに色の変化情報のみを間引く 輝度情報 色情報を間引く 13

ミニWDDDS JPG（非可逆圧縮） ◼ 圧縮方式について 2. 図柄の緩やかな変化を変えずに急激な変化を間引く 輝度情報 色情報 14

ミニWDDDS JPG（非可逆圧縮） ◼ 圧縮前後の比較 圧縮前 圧縮後 15

ミニWDDDS PNG（可逆圧縮） ◼ 基本的な考え方 ➢ 品質を落とさずにファイルサイズを削減すること ➢ （＝品質最優先でファイルサイズはついでに削減） ◼ 圧縮方式について ➢ Deflate圧縮方式（LZ77アルゴリズム＋ハフマン符号化） 16

ミニWDDDS PNG（可逆圧縮） ◼ LZ77アルゴリズム ➢ 文字列中において、過去に出現したことのある文字列が再出現したとき に、その文字列を「前回出現した箇所までの距離」と「長さ」の情報で 構成される符号に置き換えるアルゴリズム ➢ 例えば、符号を[距離,長さ]と定義すると以下のように符号化が行われます。 sciencepark sciencepark sciencepark s[12,10] 「データの繰り返し」に着目 17

ミニWDDDS PNG（可逆圧縮） ◼ ハフマン符号化 ➢ 出現頻度の高い文字を短いビット列で表し、出現頻度の低い文字を長い ビット列で表す工夫がされたアルゴリズム ➢ 例えば、「sciencepark」という文字列を符号化する場合、出現確率を計 算して出現頻度の高い文字から短いビット列を割り当てます。 ➢ 出現回数：s:1回, c:2回, i:1回, e:2回, n:1回, p:1回, a:1回, r:1回, k:1回 s c i e n c e p a r k 1110011 1100011 1101001 1100101 1101110 1100011 1100101 1110000 1100001 1110010 1101011 s c i e n c e p a r k 10 00 11 01 100 00 01 101 110 111 1000 「データの出現頻度」に着目 18

ミニWDDDS BMP（無圧縮） ◼ 基本的な考え方 ➢ シンプルで汎用性が高い構造 ➢ 旧式のフォーマットであるため利点は少ない ◼ 圧縮方式について ➢ 無圧縮のためエンコード・デコードがない ➢ （＝正確には圧縮処理がない） 19

ミニWDDDS 目的別フォーマット選択基準（JPG,PNG,BMP） 1. とにかくファイルサイズを小さくしたい（品質劣化を許容できる） ➢ 基本：「JPG」 ➢ イラスト・単純な画像：「PNG」 20

ミニWDDDS 目的別フォーマット選択基準（JPG,PNG,BMP） 2. 絶対に品質を落としたくない（圧縮は最低限でOK） ➢ 「PNG」一択 21

ミニWDDDS 目的別フォーマット選択基準（JPG,PNG,BMP） 3. エンコード・デコードの速度を最速にしたい ➢ 「BMP」を使うメリットあり ➢ 圧縮処理がない分、エンコード・デコードの時間は最も短い 22

ミニWDDDS 検証 1. 以下の2つの画像をJPG、PNG、BMP形式で保存して比較することで、 上記で述べた選択基準が本当に有用であるかを検証 画像番号１ 画像番号２ 富士山がきれいに見える色鮮やかな画像 簡単な図形が描画された画像 23

ミニWDDDS 検証結果 画像番号１ 画像番号２ 画像サイズ 2500x1500 2500x1500 JPG 1.07MB 193KB PNG 8.15MB 52.8KB BMP 10.7MB 10.7MB 24

ミニWDDDS 検証結果 1. とにかくファイルサイズを小さくしたい（品質劣化を許容できる） 画像番号１ 画像番号２ 画像サイズ 2500x1500 2500x1500 JPG 1.07MB 193KB PNG 8.15MB 52.8KB BMP 10.7MB 10.7MB 25

ミニWDDDS 検証結果 2. 絶対に品質を落としたくない（圧縮は最低限でOK） 画像番号１ 画像番号２ 画像サイズ 2500x1500 2500x1500 JPG 1.07MB 193KB PNG 8.15MB 52.8KB BMP 10.7MB 10.7MB 26

ミニWDDDS 検証結果 3. エンコード・デコードの速度を最速にしたい 画像番号１ 画像番号２ 画像サイズ 2500x1500 2500x1500 JPG 1.07MB 193KB PNG 8.15MB 52.8KB BMP 10.7MB 10.7MB ➢ ファイル読み書き時間構成 ➢ ＝(シーケンシャルアクセスタイム)＋(エンコード・デコード)＋(その他・オーバーヘッド) 速度の検証：https://qiita.com/spc_ehara/items/45925bb567fd2258abf6 27

• https://qiita.com/spc_ehara/items/45925bb567fd2258abf6

ミニWDDDS 最適化 ◼ 最適化 ➢ ファイルサイズを削減するために最適なフォーマット構成になるように変 更を加えること ➢ 処理・実装に時間がかかる ①整理されていない不揃いなデータ ②すべて確認して整理整頓 ③適切な構成になったデータ 28

ミニWDDDS 検証 1. 以下の2つの画像をJPG、PNG、BMP形式で保存して最適化処理の前後 を比較することで、どのくらいの圧縮が可能になるのかを検証 画像番号１ 画像番号２ 富士山がきれいに見える色鮮やかな画像 簡単な図形が描画された画像 29

ミニWDDDS 検証結果 1. 画像番号１（JPG）検証結果 最適化前（JPG） 最適化後（JPG） サイズ：1.07MB サイズ：332KB 30

ミニWDDDS 検証結果 1. 画像番号１（PNG）検証結果 最適化前（PNG） 最適化後（PNG） サイズ：8.15MB サイズ：1.4MB 31

ミニWDDDS 検証結果 1. 画像番号２（JPG）検証結果 最適化前（JPG） 最適化後（JPG） サイズ：193KB サイズ：63.9KB 32

ミニWDDDS 検証結果 1. 画像番号２（PNG）検証結果 最適化前（PNG） 最適化後（PNG） サイズ：52.8KB サイズ：14.7KB 33

ミニWDDDS 検証結果 ◼ 最適化で大幅なファイルサイズ削減が可能 ◼ フォーマット間のファイルサイズの大小は変わらない 画像サイズ 画像番号１ 画像番号２ 2500x1500 2500x1500 最適化前 JPG 1.07MB 193KB PNG 8.15MB 52.8KB BMP 10.7MB 10.7MB 最適化後 JPG 332KB 63.9KB PNG 1.4MB 14.7KB BMP 10.7MB 10.7MB 34

ミニWDDDS さいごに 1. JPG,PNG,BMPごとの違いについて簡単な説明ができる 2. 用途別に画像フォーマットを選択できる 3. 適切なファイルサイズ削減を行うことができる 35

ミニWDDDS 参考資料 1. 画像処理講座-目次： https://qiita.com/spc_ehara/items/e425b6dcc0398299c40d 2. もっと詳しく知りたい方へ ➢ JPG：https://qiita.com/spc_ehara/items/87d383a59a37a2c82531 ➢ PNG：https://qiita.com/spc_ehara/items/c748ec636283df805926 ➢ BMP：https://qiita.com/spc_ehara/items/03d179f4901faeadb184 36

• https://qiita.com/spc_ehara/items/e425b6dcc0398299c40d
• https://qiita.com/spc_ehara/items/87d383a59a37a2c82531
• https://qiita.com/spc_ehara/items/c748ec636283df805926
• https://qiita.com/spc_ehara/items/03d179f4901faeadb184

ミニWDDDS ご清聴ありがとうございました！