📷

Webで使用する画像フォーマットの簡単な説明

2022/03/07に公開

mdn web docsの画像ファイルの種類と形式ガイドhttps://developer.mozilla.org/ja/docs/Web/Media/Formats/Image_types を読み，ウェブコンテンツで使用する画像フォーマットの説明と，どんな場面でどのフォーマットを使用するのかの部分をまとめた．
元の文章には成分あたりのビット数やブラウザの対応状況も記載されていた．

画像ファイルの種類の詳細

APNG (Animated Portable Network Graphics)

Mozilla によって最初に導入されたファイル形式で、 PNG規格を拡張してアニメーション画像の対応を追加した
2004年開発，2017年chrome対応
アニメーション GIF が 8 ビットの色深度しか対応していないのに対し、 APNG の方が様々なインデックスカラーに対応している
APNG は、進捗インジケーターやアクティビティスロバー(進捗表示)など、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適

AV1 Image File Format (AVIF)

AV1 bitstreamをHigh Efficiency Image File Format (HEIF)コンテナ内にエンコードしたロイヤリティフリー，オープンソースの強力なファイルフォーマット
元はインターネット上のビデオ転送のために設計された
JPGと同等の見た目で50%軽量な非可逆圧縮
webpよりも圧縮率が高い (50% vs. 30%)
GIFに似ているが圧縮率が高いAnimation/multi-image storage
アルファチャンネルをサポートしている
明るい場所と暗い場所の大きいコントラストを保存するためHigh Dynamic Range(HDR)をサポート
色域が広い
プログレッシブレンダリングをサポートしていないのでダウンロード完了まで表示されないが，JPEGやPNGより軽いので問題は小さい
ブラウザのサポートが包括的でないので，<picture>要素でJPEGやPNGを併記するなどのフォールバックするべき

BMP (Bitmap file)

windowsで最も普及しており，web apps等ではめったに使われない
非圧縮のラスター画像としてデータ表現されるのでファイルサイズが大きい．webサイトコンテントで使用するべきではない．効率的なバージョンも存在するがブラウザのサポートが無いことが多い
色々な内部データ表現が可能(BMPファイル内で画像をJPEGやPNGで保持するなど)だが，一般的なものは非圧縮ラスター画像であり，各ピクセルが3バイト(red, green, blueを表す)．各行は0x00バイトから4バイト幅の倍数で埋められる

GIF (Graphics Interchange Format)

1987にネットプロバイダCompuServeによって導入された
Lempel-Ziv-Welch(LZW)アルゴリズムを使って8bit indexed color画像を可逆圧縮している
GIF自体はオープンだがLZWが2004年まで特許保護されていた．現在は自由に使用できる
XBMと並んでHTMLが最初にサポートした２つのフォーマットの一つ
GIFのピクセル値は24bitカラー(red, green, blueそれぞれ8bit)のパレット内のindexを表す1つの8bitの値
色テーブルのlength(=色の数?)は2のべき乗が使用される
透明のindexが指定されなければ不透明になる
近年のコンテンツでは静的画像ならPNG, アニメーションならAPNGを使うべきである

ICO (Microsoft Windows icon)

元はwindowsのデスクトップiconとして設計されたが，IEお気に入りメニューのアイコンとして使用できる機能が導入された
ICOファイルは複数のアイコンを含むことができ，それぞれのアイコンデータはheaderのないBMPかheaderを含むPNG
PNGはwindows vistaからサポートされたので，互換性のためにBMPでicoファイルを作成することが望ましい
faviconとしての使用も含めweb contentに使用するべきではない．pngファイルを使用するべき

JPEG (Joint Photographic Experts Group image)

非可逆圧縮で静止画として最も普及しているフォーマット
JPEGはファイルタイプではなく圧縮された写真のためのフォーマットであり，JFIF(JPEG File Interchange Format)がJPEG画像として認識されているファイルのフォーマット仕様を定義している

PNG (Portable Network Graphics)

可逆または非可逆圧縮を使い効率的に圧縮し，GIFより高度な色深度サポート，アルファ透明度サポートを持つ
多くのブラウザでfull support を持つ．過去にはIEで長い間サポートされなかったことがあった

SVG (Scalable Vector Graphics)

形状・線・色．フィルタ等を描画するコマンドとして画像を表現するXMLベースのベクター画像フォーマット
アイコン，図，等に適する

100x100の描画領域に斜線が入った図を描画する例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

利用方法は2種類ある
- <svg>要素を直接HTMLに記述する
- svg画像を<img>, <picture>,やCSSのbackground-imageに記載する
SVGの中にbitmap画像を含めることが可能

TIFF (Tagged Image File Format)

スキャンされた写真のために作られたフォーマット
メタデータを含めることや非圧縮または圧縮後のサイズが大きいアルゴリズムを使用することで，他のファイルフォーマットよりもサイズが大きい傾向にある
TIFFファイルの値はtag(情報の種類を表す，画像幅など)とtype(データのフォーマット)を使って指定され，tagに割り当てられる値の配列の長さが続く
この方法により同じ属性内に違うデータ型が使用できる
例
- ImageWidthを表現するのに0x0100をtagに保存し，1要素の配列が続く
- type 3(SHORT)を指定することでImageWidthは16ビットで表現される
- 同じデータでtypeを 4(LONG)に変更すると32bitになる
TIFFは複数の画像を含むことができるが，読み込む側では1枚目だけサポートすれば良いことになっている
RGBだけでなくCMYK, YCbCr, 等の色空間をサポートしている
現在はブラウザで読み込むにはadd-on等が必要であり，web contentでは便利ではないが，写真の配布等の目的ではダウンロード用のTIFFを使用するのは一般的

WebP image

VP8ビデオコーデックに基づくpredictive coding経由の非可逆圧縮と，データの繰り返しの代替となる可逆圧縮を使用する
非可逆は見た目が同じ圧縮レベルでJPEGの25~35%小さいサイズになる
可逆は通常，PPNGの同じ画像より26%小さい
animationをサポートしており，
非可逆ではVP8 bitstreamで画像データを表現する
可逆ではアニメーションを記述するANIM chunkとアニメシークエンスのフレームを表現するANMF chunk を維持する
主要なブラウザの最新版ではサポートされているが，歴史的にはサポートが少ないので，<picture>要素でJPEGやPNGを使ってフォールバックするべき

XBM (X Window System Bitmap file)

最初にwebでサポートされたがセキュリティのリスクがあるので現在は使われるべきではない
現在のブラウザは何年もサポートしていないが，古い内容を扱うときに遭遇することがある
画像の内容をbytesのarrayを表すCコードスニペットで表現する
- 各画像は2から4個の#defineディレクティブを含み，bitmapの幅と高さを定義する
- その後，各値が8個の1bit モノクロピクセルであるunsigned charのarrayが続く
- 画像は8pixelの倍数の幅でなければならない

//例
#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};

フォーマットの選択

写真

-> webP or JPEGをメイン，JPEGをフォールバックにするべき

icon

-> SVG, Lossless WebP, or PNGがメイン，PNGがフォールバック

iconのような小さい画像はlosslessなフォーマットが望ましい
webPが理想的だが，fallbackがないならPNGがよい
256色より少ない色数ならGIFも選択肢に入るが，PNGはPNG-8のindexed 圧縮オプションでGIFより小さい
ベクターグラフィックならSVGも良いが，フォールバックにPNGを設定するべき

Screenshots

Lossless WebPまたは PNG．圧縮ノイズが気にならないならJPEG(文字が潰れやすい)
フォールバックはPNGかJPEG．色が少ないならGIF

Diagrams, drawings, and charts

ベクター画像ならSVGがよい．フォールバックはPNG(文字等を潰さない)

フォールバックの設定方法

<picture>要素内の<source>要素でフォールバックを指定

<picture>
	<source srcset="diagram.svg" type="image/svg+xml">
	<source srcset="diagram.png" type="image/png">
	<img src="diagram.gif" width="620" height="540"
	   alt="Diagram showing the data channels">
</picture>