画像ファイルの種類と形式ガイド

ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。

以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります （一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです）。

注: 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。

以下の節では、ウェブブラウザーで対応している画像ファイルの種類について簡単に説明します。

以下の表において、成分あたりのビット数とは、各色成分を表現するために使用されるビット数を意味します。 例えば、 RGB の色深度が 8 であれば、赤、緑、青の各成分は 8 ビットの値で表現されることになります。 一方、ビット深度とは、メモリー上で各画素を表現するために使用されるビット数の合計です。

APNG は Mozilla によって最初に導入されたファイル形式で、 PNG 規格を拡張してアニメーション画像の対応を追加したものです。概念的には何十年も使われているアニメーション GIF 形式に似ていますが、アニメーション GIF が 8 ビットの色深度しか対応していないのに対し、 APNG の方が様々なインデックスカラーに対応しているという点で優れています。

APNG は、進捗インジケーターやアクティビティスロバーなど、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適です。例えば、 APNG は Apple の iMessage アプリ (および iOS のメッセージアプリ) のアニメーションステッカーを作成する際に対応している形式の 1 つです。また、ウェブブラウザーのユーザーインターフェイスのアニメーション部分にもよく使用されています。

AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (High Efficiency Image File Format) コンテナーにエンコードした、強力でオープンソース、ロイヤリティフリーのファイル形式です。

AV1 は、もともとインターネットでの映像伝送用に設計された符号化方式です。 この形式は、近年の動画エンコーディングの著しい進歩の恩恵を受けており、関連するハードウェアレンダリングの対応の恩恵を受ける可能性があります。 しかし、動画と画像のエンコーディングには異なる要件があるため、場合によっては不利になることもあります。

この形式は、次のものを提供します。

• 視覚的に同程度の圧縮レベルであれば、 JPG や PNG と比べて優れた非可逆圧縮が可能です（例: 非可逆 AVIF 画像は JPEG 画像より約 50% 小さい）。
• 一般的に、 AVIF は WebP よりも圧縮率が高く、同じ JPG セットで中央値 50% 対 30% の圧縮率です（出典: AVIF WebP 比較）。 AVIF WebP 比較 (CTRL Blog)).
• 可逆圧縮圧縮。
• アニメーション/複数画像の格納（アニメーション GIF に似ていますが、圧縮率がはるかに優れています）。
• アルファチャンネル（つまり、透明度）の対応。
• ハイダイナミックレンジ (HDR): 画像の最も明るい部分と最も暗い部分の間のより大きなコントラストを表現できる画像の保存に対応しています。
• 広い色域: 画像がより広い範囲の色を含むことに対応しています。

AVIF はプログレッシブレンダリングに対応していないので、ファイルを表示する前に完全にダウンロードする必要があります。 AVIF ファイルは同等の JPEG や PNG ファイルよりもはるかに小さいため、ダウンロードと表示が迅速に行われ、実際のユーザー操作への影響が極めて小さくなります。 ファイルサイズが大きい場合は影響が大きくなるため、プログレッシブレンダリングを対応している形式の使用を検討する必要があります。

AVIF は、デスクトップでは Chrome、Opera、Firefox で対応しています（Firefox は静止画に対応していますが、アニメーションには対応していません）。 対応はまだ包括的ではなく（歴史もあまりありません）、WebP, JPEG, PNG 形式などで、 <picture> 要素 （またはその他の方法） を使用して代替形式を提供する必要があります。

BMP (Bitmap 画像) ファイル形式は、 Windows コンピューターで最も普及しており、ウェブアプリやコンテンツではふつう、特殊な場合にのみ使用されます。

BMP は理論的には様々な内部データ表現に対応しています。 最も単純でよく使われる形式の BMP ファイルは、非圧縮のラスター画像で、各画素が 3 バイトでその赤、緑、青の成分を表し、各行は 4 バイトの倍数の幅になるよう 0x00 バイトでパディングされています。

その他のデータ表現も仕様で定義されていますが、広く使われているわけではなく、完全に未実装であることが多いものです。 これらの機能には、異なるビット深度、インデックス付きカラー、アルファチャンネル、異なる画素オーダー（既定では、 BMP は左上隅から右と下に向かってではなく、左下隅から右と上に向かって書き込まれます）の対応が含まれます。

理論的には複数の圧縮アルゴリズムに対応しており、 BMP ファイル内に JPEG や PNG という形式で画像データを格納することも可能です。

1987 年、オンラインサービスプロバイダーである CompuServe は、サービスの全会員が使用できる圧縮グラフィック形式を提供するため、 GIF (Graphics Interchange Format) 画像ファイル形式を導入しました。 GIF は Lempel-Ziv-Welch (LZW) アルゴリズムを使用して、 8 ビットのインデックスカラーグラフィックを可逆圧縮します。 GIF は XBM とともに、 HTML で対応された最初の 2 つのグラフィック形式のうちのひとつでした。

GIF の各画素は 8 ビットの値で表され、 24 ビット（赤、緑、青それぞれ 8 ビット）のカラーパレットへのインデックスとなります。カラーテーブルの長さは常に 2 のべき乗です（つまり、パレットは 2、4、8、16、32、64、256 の項目があります）。 255 または 256 色以上を示すには、ふつうディザリングが使用されます。 カラーパレットを持つ複数の画像ブロックをタイル状に並べてトゥルーカラー画像を作成することは技術的には可能ですが、実際にはほとんど行われません。

画素は不透明です。ただし、特定のカラーインデックスが透明と指定されている場合は、その値で着色された画素は完全に透明になります。

GIF は簡単なアニメーションに対応しています。最初の完全なフレームに続いて、フレームごとに変化する部分を反映した一連の画像を提供します。

GIF は、そのシンプルさと互換性から、何十年にもわたって非常に人気がありました。 アニメーションに対応したことで、ソーシャルメディア時代に人気が再燃し、短い「動画」やミームなどの簡単なアニメーションにアニメーション GIF が広く使われるようになりました。

GIF のもう一つの人気のある機能はインターレースの対応で、画素列を順番通りに保存しないため、部分的に受信したファイルを低画質で表示することができるものです。 これは、ネットワーク接続が遅い場合に特に有効です。

GIF は単純な画像やアニメーションに適していますが、フルカラー画像を GIF に変換すると満足のいくディザリングが得られないことがあります。 通常、新しいコンテンツは可逆圧縮やインデックスカラーの静止画には PNGを、可逆圧縮のアニメーションには APNG を使用することを検討してください。

ICO (Microsoft Windows icon) ファイル形式は、 Windows システムのデスクトップアイコン用に Microsoft が設計しました。 しかし、 Internet Explorer の初期バージョンでは、ウェブサイトのルートディレクトリーに favicon.ico という ICO ファイルを用意して、ファビコン - お気に入りメニューやサイトのアイコン表現が役立つその他の場所に表示するアイコンを指定することができます。

ICO ファイルには、複数のアイコンを含むことができ、それぞれの詳細が記載されたディレクトリーから始まります。 ディレクトリーの後に、アイコンのデータが続きます。 各アイコンのデータは、ファイルヘッダーを含まない BMP 画像か、ファイルヘッダーを含む完全な PNG 画像のどちらかを使用することができます。 ICO ファイル内で PNG を使用する方法は Windows Vista までは対応しておらず、対応が十分でない可能性があるため、 ICO ファイルを使用する場合は、 BMP 形式を使用することをお勧めします。

JPEG （ふつう "ジェイペグ" と発音します）画像形式は、現在もっとも広く使用されている静止画向けの非可逆圧縮形式です。 特に写真に有効です。図や表など鮮明さが必要なコンテンツに非可逆圧縮を適用すると、満足の行く結果が得られないことがあります。

JPEG はファイル形式というより、写真を圧縮するためのデータ形式です。 JFIF (JPEG File Interchange Format) 仕様書が、私たちが "JPEG" 画像と考えているファイル形式を記述しています。

PNG （"ピング"と読みます）画像形式は、 より効率的な圧縮を行うために可逆圧縮または非可逆圧縮を使用し、GIFより高い色深度を対応し、アルファ透過も完全に対応します。

PNG は広く対応されており、すべての主要なブラウザーがその機能を完全に対応しています。 Internet Explorer はバージョン 4〜5 で PNG 対応を導入しましたが、 IE9 まで完全には対応せず、長年にわたって、かつて存在した Internet Explorer 6 を含め、数多くの悪名高いバグがありました。 そのため PNG の普及は遅れましたが、現在では特に元画像の正確な再現が必要な場合によく使われるようになっています。

SVG は XML ベースのベクターグラフィック形式で、画像の内容を、図形や線の作成、色やフィルターの適用などの描画コマンド群として指定するものです。 SVG ファイルは、図やアイコンなど、任意の大きさで正確に描画できる画像に適しています。 そのため、最近のウェブデザインでは、ユーザーインターフェイスの素材としてよく使われています。

SVG ファイルはテキストファイルで、解釈されると希望する画像が描画されるソースコードを含んでいます。 例えば、この例では、初期サイズ 100 × 100 の描画領域を定義し、その中に斜めに引いた線が含まれています。

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

SVG はウェブコンテンツで 2 通りの使い方ができます。

1. <svg> 要素を HTML に直接書き、その中に SVG 要素を入れて画像を描く。
2. 他のいずれかの画像種別で使用することができるあらゆる場所で表示する。 <img> や <picture> 要素、 CSS の background-image プロパティなどです。

SVG は、一連の描画コマンドで表現できる画像に最適です。特に、画像が描画されるサイズが不明であったり、変動する可能性がある場合、 SVG は希望するサイズに滑らかに拡大縮小するので、最適な選択と言えます。 ビットマップ画像や写真画像には適していませんが、 SVG の中にビットマップ画像を含めることは可能です。

TIFF はスキャンした写真を格納するために作成されたラスターファイル形式ですが、あらゆる種類の画像に使用することができます。 これらはある意味で「重い」形式であり、 TIFF のファイルは他の画像形式よりも大きくなる傾向があります。 これは、多くの場合メタデータが含まれていることと、ほとんどの TIFF 画像が非圧縮か、圧縮後のファイルがかなり大きくなってしまう圧縮アルゴリズムを使用しているためです。

TIFF は様々な圧縮方式に対応していますが、最も一般的に使用されているのは、 FAX ソフトウェアで使用されている CCITT グループ 4 （古い FAX システムではグループ 3）の圧縮方式と、 LZW および非可逆 JPEG の圧縮方式です。

TIFF ファイルのそれぞれの値は、タグ（画像の幅など情報の種類を示す）と型（データの格納形式を示す）で指定し、そのタグに割り当てる値の配列の長さを続けます（単一の値でも、すべてのプロパティは配列で格納されます）。 これにより、同じプロパティに異なるデータ型を使用することができます。 たとえば、画像の幅である ImageWidth は、タグ 0x0100 を用いて格納され、 1 項目の配列となります。 タイプ 3 (SHORT) を指定すると、 ImageWidth の値は 16 ビットで格納されます。

タイプ 4 (LONG) では、幅を 32 ビット値で格納します。

1 つの TIFF ファイルに複数の画像を含めることができます。これは、例えば複数ページの文書（複数ページのスキャン文書や受信した FAX など）を表現するために使用される場合があります。 ただし、 TIFF ファイルを読み込むソフトウェアは、最初の画像にのみ対応する必要があります。

TIFF は、 RGB だけでなく、さまざまな色空間に対応しています。 CMYK や YCbCr などがあり、印刷物や映画、テレビなどのメディア向けの画像を保存するのに適しています。

一昔前までは、ウェブコンテンツの中で TIFF 画像に対応しているブラウザーもありましたが、現在では特別なライブラリーやブラウザーのアドオンを使用する必要があります。 しかし、精密な編集や印刷を目的とした写真やアートワークを配布する場合、ダウンロード可能な TIFF ファイルを提供することが一般的です。

WebP は、VP8 動画コーデックに基づく予測符号化による非可逆圧縮と、反復データの置換を使用した可逆圧縮に対応しています。 非可逆圧縮の WebP 画像は、視覚的に同程度の圧縮レベルの JPEG 画像よりも平均 25 ～ 35% 縮小されます。 可逆圧縮の WebP 画像は、 PNG 形式の同じ画像と比較して、通常 26% 縮小されます。

WebP はアニメーションにも対応しています。非可逆圧縮の WebP ファイルでは、画像データは VP8 ビットストリームで表現され、複数のフレームを含むことができます。 可逆圧縮の WebP はアニメーションを記述した ANIM チャンクと、アニメーションシーケンスのフレームを表す ANMF チャンクを保持します。 ループはサポートされています。

WebP は現在、主要なウェブブラウザーの最新バージョンが幅広く対応していますが、歴史的に深く対応してはいません。 JPEG または PNG 形式の代替画像を、 <picture> 要素などで提供してください。

XBM (X Bitmap) ファイルは、ウェブで最初に対応されましたが、もはや使用されておらず、その形式には潜在的なセキュリティ上の懸念があるため、避けるべきです。 最近のブラウザーは何年も前から XBM ファイルに対応していませんが、古いコンテンツを扱っていると、まだ残っているものが見つかるかもしれません。

XBM は画像の内容をバイトの配列として表現するために C 言語のコードの断片を使用します。 各画像は 2 つから 4 つの #define ディレクティブからなり、ビットマップの幅と高さを（画像がカーソルとして設計されている場合は、オプションでホットスポットも）与え、その後に unsigned char の配列が続き、それぞれの値は 8 個の 1 ビットモノクロ画素から構成されます。

画像は幅 8 画素の倍数でなければなりません。 例えば、次のコードは 8 画素× 8 画素の XBM 画像を、それらの画素が白黒の市松模様になるように表現しています。

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

画像形式は、動画形式と比較して、対応が幅広いものの選択肢が少なく、また、それぞれ特定の用途を持つ傾向があるため、ニーズに合わせて最適なものを選択することが容易と思われます。

写真は一般的に非可逆圧縮でうまくいきます（エンコーダの設定に依存します）。 このため、写真には JPEG と WebP が適しています。 JPEG は互換性がより高いのですが、 WebP はおそらく圧縮率がより優れています。 品質を最大化し、ダウンロード時間を最小化するには、代替画像を使用して WebP を第一候補に、 JPEG を第二候補にして両方を提供することを検討してください。 それ以外の場合は、互換性のために JPEG を選択するのが無難です。

アイコンのような小さい画像では、サイズに制約のある画像で細部が失われないように、可逆圧縮形式を使用します。 可逆圧縮の WebP はこの目的に最適ですが、対応がまだ進んでいないため、代替画像を提供しない限り、 PNG がより良い選択となります。 画像に含まれる色が256色より少ない場合は、GIFも選択肢に入りますが、PNGはインデックス圧縮オプション（PNG-8）でさらに小さく圧縮されることがよくあります。

アイコンがベクターグラフィックで表現できる場合は、 SVG を検討してください。 SVG の対応状況は良いのですが、古いブラウザーのために PNG の代替を提供する価値があるかもしれません。

品質を妥協しない限り、スクリーンショットには可逆圧縮形式を使用することをお勧めします。 これは、スクリーンショットにテキストが含まれる場合に特に重要です。テキストは非可逆圧縮ではぼやけたり不鮮明になったりしやすいからです。

PNG はおそらく最善の方法ですが、可逆圧縮の WebP の方が間違いなく圧縮率が高くなります。

ベクターグラフィックを使用して表すことができる画像であれば、すべて SVG が 第一候補です。 そうでない場合は、 PNG のような可逆圧縮形式を使用する必要があります。 JPEG や非可逆 WebP のような非可逆形式を選択する場合は、テキストやその他の図形がぼやけたり不鮮明にならないように、圧縮レベルを慎重に判断してください。

標準的な HTML の <img> 要素は、画像で互換性のための代替画像に対応していませんが、 <picture> 要素は対応しています。 <picture> はいくつかの <source> 要素のラッパーとして使われ、それぞれが異なる形式や異なるメディア条件における画像のバージョンを指定し、 <img> 要素で画像を表示する場所と、代替可能な既定または「最も互換性のある」バージョンを指定します。

例えば、 SVG で表示するのが最適な図を、 PNG や GIF で代替できるように表示したい場合、次のようにします。

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

<source> はいくつでも指定できますが、通常は 2 つか 3 つで十分です。

• メディアの種類と形式のガイド
• ウェブメディア技術
• ウェブで使用される動画コーデックのガイド
• HTML の <img> および <picture> 要素
• CSS の background-image プロパティ
• HTMLImageElement.Image() コンストラクターと HTMLImageElement インターフェイス