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

このガイドでは、ウェブブラウザーが一般的に対応している画像ファイルの種類を取り上げ、サイトの画像に使用するための最も適切な形式を選択するのに役立つ観点を提供します。

一般的な画像ファイルの種類
-------------

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

| 略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 概要 |
| --- | --- | --- | --- | --- |
| APNG | Animated Portable Network Graphics | `image/apng` | `.apng` | 劣化のない一連のアニメーションに最適です（GIF は性能が低い）。 AVIF や WebP はより性能が高いものですが、ブラウザーの対応が狭いのが現状です。**対応:** Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | `image/avif` | `.avif` | 高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適しています。 PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含める（つまり、 `<picture>` 要素を使用する）べきであることに注意してください。**対応:** Chrome, Opera, Firefox（静止画のみ。アニメーション画像は実装。） |
| GIF | Graphics Interchange Format | `image/gif` | `.gif` | 単純な画像やアニメーションに適しています。 PNG の方が劣化なし*かつ*インデックスカラーの静止画に適しており、アニメーションシーケンスには WebP, AVIF, APNG を検討してください。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | `image/jpeg` | `.jpg`, `.jpeg`, `.jfif`, `.pjpeg`, `.pjp` | 静止画の非可逆圧縮に適しています（現在最も普及しています）。 PNG の方がより正確な画像の再現が必要な場合に適しており、 WebP/AVIF の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| PNG | Portable Network Graphics | `image/png` | `.png` | PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 WebP/AVIF はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| SVG | Scalable Vector Graphics | `image/svg+xml` | `.svg` | ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。**対応:** Chrome, Edge, Firefox, IE, Opera, Safari |
| WebP | Web Picture format | `image/webp` | `.webp` | 画像とアニメーションの両方に最適です。 WebP は PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF のほうが圧縮機能はわずかに優れていますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。**対応:** Chrome, Edge, Firefox, Opera, Safari |

**メモ:** PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている（つまり、市場シェアがゼロに近づいてきている）ため、人気が高まってきています。

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

| 略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 説明 |
| --- | --- | --- | --- | --- |
| BMP | ビットマップファイル | `image/bmp` | `.bmp` | Chrome, Edge, Firefox, IE, Opera, Safari |
| ICO | Microsoft Icon | `image/x-icon` | `.ico`, `.cur` | Chrome, Edge, Firefox, IE, Opera, Safari |
| TIFF | Tagged Image File Format | `image/tiff` | `.tif`, `.tiff` | Safari |

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

**メモ:** Safari 11.1では、アニメーション GIF の代替として、動画形式を使用する機能が追加されました。
 他のブラウザは対応していません。
 詳しくは、 Chromium のバグ、Firefox のバグを参照してください。


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

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

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

### APNG (Animated Portable Network Graphics)

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

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

|  |  |
| --- | --- |
| MIME タイプ | `image/apng` |
| ファイル拡張子 | `.apng` |
| 仕様書 | wiki.mozilla.org/APNG\_Specification |
| ブラウザーの互換性 | Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8 |
| 最大の大きさ | 2,147,483,647×2,147,483,647 画素 |
| 対応している色モデル | 

| 色モード | 成分あたりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレイスケール | 1, 2, 4, 8, 16 | 各画素は、グレースケール画素の明るさを示す単一の *D* ビット値で構成されています。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す3つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は、 APNG ファイルの `PLTE` チャンク内に含まれるカラーパレットへのインデックスを示す *D* ビット値で、パレット内の色はすべて 8 ビットの深度を使用します。 |
| アルファ付きグレイスケール | 8, 16 | 各画素は、 2 つの *D* ビット値、グレイスケール画素の明るさとアルファサンプル、すなわち画素がどれだけ不透明かで表現されます。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、 4 つの *D* 画素の色成分、赤、緑、青、および画素の不透明度を示すアルファサンプルで構成されます。 |

 |
| 圧縮 | 可逆 |
| ライセンス | Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 以降の下にフリーかつオープンです。 |

### AVIF 画像

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

**メモ:** AVIF は、ウェブコンテンツで画像を共有するための「次の大きな流れ」となる可能性を秘めています。
 AVIF は、複雑なライセンスや特許使用料に煩わされることなく、最先端の機能と性能を提供し、他の類似製品を抑えています。


 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>` 要素 （またはその他の方法） を使用して代替形式を提供する必要があります。


|  |  |
| --- | --- |
| MIME タイプ | `image/avif` |
| ファイルの拡張子 | `.avif` |
| 仕様書 | AV1 Image File Format (AVIF) |
| ブラウザーの互換性 | Chrome 85, Opera 71, Firefox 93
 * Firefox 93 は静止画に対応しており、フルカラーとリミテッドレンジカラーの両方の色空間、ミラーリングと回転のための画像変換に対応しています。
 image.avif.compliance\_strictness の設定を使用して、仕様への準拠の厳密さを調整することができます。
 アニメーション画像には対応していません。
* Firefox 77 ～ 92 は `image.avif.enable` の設定を `true` にする必要があります。それ以前の版は基本的な対応のみです。
 |
| 最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 |
| 対応しているカラーモード | カラーモードの対応情報は AV1 Bitstream & Decoding Process Specification の 6.4.2 : Color config semantics にあります。
主なものとしては、以下のものがあります。* カラーモード: YUV444, YUV422, YUV420
* グレースケール対応: YUV400
* ビット数: 8/10/12 ビット
* アルファに対応
* ICC プロファイルに対応
* NCLX 対応: sRGB, linear sRGB, linear Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, など
* タイリングに対応
 |
| 圧縮 | 可逆および非可逆 |
| ライセンス | ロイヤリティフリーです。ライセンス情報は http://aomedia.org/license/ にあります。 |

### BMP (ビットマップファイル)

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

**警告:** ウェブサイトのコンテンツに BMP ファイルを使用することは、一般的に避けてください。
 一般的な BMP ファイルは、データを非圧縮のラスター画像として表現するため、 png や jpg の画像形式と比較してファイルサイズが大きくなります。
 より効率的な BMP 形式もありますが、あまり普及しておらず、ウェブブラウザーが対応していることもほとんどありません。


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

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

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

|  |  |
| --- | --- |
| MIME タイプ | `image/bmp` |
| ファイルの拡張子 | `.bmp` |
| 仕様書 | 仕様書はありません。ただし、 Microsoft は docs.microsoft.com/ja/windows/desktop/gdi/bitmap-storage で形式についての一般的なドキュメントを提供しています。 |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべての版 |
| 最大の画像の大きさ | 形式のバージョンによって 32,767×32,767 または 2,147,483,647×2,147,483,647 画素のどちらかです。 |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1 | それぞれのビットが単一の画素を表し、黒か白かのどちらかになります。 |
| トゥルーカラー | 8, 16 | それぞれの画素は、赤、緑、青の色成分を表す 3 つの値で表現されます。それぞれが *D* ビットです。 |
| インデックスカラー | 2, 4, 8 | それぞれの画素は、 2, 4, 8 ビットのうちの何れかの値で、カラーテーブル内のインデックスとして表現されます。 |
| アルファ付きグレースケール | *なし* | BMP には明確なグレースケールの形式がありません。 |
| アルファ付きトゥルーカラー | 8, 16 | それぞれの画素は、赤、緑、青、アルファの各色成分で表現されます。それぞれが *D* ビットです。 |

 |
| 圧縮 | 非可逆圧縮や可逆圧縮など、複数の圧縮方式に対応しています。 |
| ライセンス | Microsoft Open Specification Promise で扱っています。
 マイクロソフトは BMP に対して特許を保有していますが、特定の条件を満たす限り、特許権を主張しないという約束を発表しています。
 ただし、これはライセンスとは異なります。 BMP は、 Windows Metafile Format (`.wmf`) に含まれます。
  |

### GIF (Graphics Interchange Format)

 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 を使用することを検討してください。


|  |  |
| --- | --- |
| MIME タイプ | `image/gif` |
| ファイルの拡張子 | `.gif` |
| 仕様書 | GIF87a specificationGIF89a specification |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 65,536×65,536 画素 |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | *なし* | GIF には専用のグレースケール形式がありません。 |
| トゥルーカラー | *なし* | GIF はトゥルーカラーに対応していません。 |
| インデックスカラー | 8 | GIF パレット内のそれぞれの色は、赤、緑、青がそれぞれ 8 ビットで定義されています（全体で画素当たり 24 ビットです）。 |
| アルファ付きグレースケール | *なし* | GIF には専用のグレースケール形式がありません。 |
| アルファ付きトゥルーカラー | *なし* | GIF はトゥルーカラーに対応していません。 |

 |
| 圧縮 | 可逆圧縮 (LZW) |
| ライセンス | 
 GIF 形式自体はオープンですが、 LZW 圧縮アルゴリズムは 2000 年代初頭まで特許で保護されていました。
 2004 年 7 月 7 日現在、関連する特許はすべて失効しており、 GIF 形式は自由に使用することができます。
  |

### ICO (Microsoft Windows icon)

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

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


**警告:** ICO ファイルは、ウェブコンテンツに使用すべきではありません。
 また、ファビコンでの利用は 異なる利用場面のアイコンの提供 で述べたように、 PNG ファイルと `<link>` 要素を使用することで抑制されています。



|  |  |
| --- | --- |
| MIME タイプ | `image/vnd.microsoft.icon` (公式),
 `image/x-icon` (Microsoft が使用)
  |
| ファイルの拡張子 | `.ico` |
| 仕様書 |  |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 256×256 画素 |
| カラーモードの対応 | 

BMP 形式のアイコン| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1 | 各ビットは 1 画素を表し、黒か白のどちらかになります。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分を表す 3 つの値で表され、それぞれ *D* ビットです。 |
| インデックスカラー | 2, 4, 8 | 各画素は 2、4、8 ビットの値で表され、カラーテーブルのインデックスとなる。 |
| アルファ付きグレースケール | *なし* | BMP には明確なグレースケールの形式がありません。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青、アルファの色成分を表す 4 つの値で表され、それぞれ *D* ビットである。 |

PNG 形式のアイコン| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1, 2, 4, 8, and 16 | 各画素は、グレースケールの画素の明るさを示す 1 つの *D* ビット値で構成されます。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す 3 つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は *D* ビットの値で、 APNG ファイルの `PLTE` チャンク内のカラーパレットの中にあるインデックスを示します。パレット内のカラーはすべて 8 ビットの深度を使用します。 |
| アルファ付きグレースケール | 8, 16 | 各画素は 2 つの *D* ビット値で表します。グレースケール画素の明るさと、その画素がどの程度不透明であるかを示すアルファサンプルです。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青の 4 つの *D* 画素の色成分と、画素の不透明度を示すアルファサンプルで構成されています。 |

 |
| 圧縮 | 
 BMP 形式のアイコンは、ほぼ常に可逆圧縮が使用されますが、非可逆圧縮の方法も利用できます。
 PNG 形式のアイコンは常に可逆圧縮されます。
  |
| ライセンス | — |

### JPEG (Joint Photographic Experts Group image)

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

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


|  |  |
| --- | --- |
| MIME タイプ | `image/jpeg` |
| ファイルの拡張子 | `.jpg`, `.jpeg`, `.jpe`,
 `.jif`, `.jfif` |
| 仕様書 | jpeg.org/jpeg/ |
| ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン |
| 最大の画像の大きさ | 65,535×65,535 画素 |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | *なし* | ルーマ 1 チャンネル (Y) で真のグレイスケールに対応可能です。 |
| トゥルーカラー | 8 | 各画素は、赤、青、緑の色成分で記述され、それぞれ 8 ビットです。 |
| インデックスカラー | *なし* | JPEG はインデックスカラーモードを提供していません。 |
| アルファ付きグレースケール | *なし* | JPEG はアルファチャネルに対応していません。 |
| アルファ付きトゥルーカラー | *なし* | JPEG はアルファチャネルに対応していません。 |

 |
| 圧縮 | 非可逆圧縮です。離散コサイン変換に基づいています。 |
| ライセンス | 2006 年 10 月 27 日現在、米国における特許はすべて失効しています。 |

### PNG (Portable Network Graphics)

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

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


|  |  |
| --- | --- |
| MIME タイプ | `image/png` |
| ファイルの拡張子 | `.png` |
| 仕様書 | w3.org/TR/PNG |
| ブラウザーの互換性 | 

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 基本対応 | 1 | 12 | 1 | 5 | 3.5.1 (Presto)15 (Blink) | 1 |
| アルファチャネル | 1 | 12 | 1 | 5 | 6 (Presto)All (Blink) | 1 |
| ガンマコレクション | no | yes | 1 | 8 | 1 | broken |
| カラーコレクション | no | yes | 3 | 9 | no | no |
| インターレス | no | ? | 1 | broken | 3.5.1 | no |

 |
| 最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| グレースケール | 1, 2, 4, 8, 16 | 各画素は、グレースケールの画素の明るさを示す 1 つの *D* ビット値で構成されます。 |
| トゥルーカラー | 8, 16 | 各画素は、赤、緑、青の色成分のレベルを示す 3 つの *D* ビット値で表現されます。 |
| インデックスカラー | 1, 2, 4, 8 | 各画素は *D* ビットの値で、 APNG ファイルの `PLTE` チャンク内のカラーパレットの中にあるインデックスを示します。パレット内のカラーはすべて 8 ビットの深度を使用します。 |
| アルファ付きグレースケール | 8, 16 | 各画素は 2 つの *D* ビット値で表します。グレースケール画素の明るさと、その画素がどの程度不透明であるかを示すアルファサンプルです。 |
| アルファ付きトゥルーカラー | 8, 16 | 各画素は、赤、緑、青の 4 つの *D* 画素の色成分と、画素の不透明度を示すアルファサンプルで構成されています。 |

 |
| 圧縮 | 可逆圧縮で、任意で GIF のようなインデックスカラーがあります。 |
| ライセンス | 
 ©2003 W3C (MIT, ERCIM,
 Keio), All Rights Reserved. W3C
 liability,
 trademark, document use
 and
 software licensing rules apply. No known royalty-bearing patents.
  |

### SVG (Scalable Vector Graphics)

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

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


```html
<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 の中にビットマップ画像を含めることは可能です。


|  |  |
| --- | --- |
| MIME タイプ | `image/svg+xml` |
| ファイルの拡張子 | `.svg` |
| 仕様書 | w3.org/TR/SVG2 |
| ブラウザーの互換性 | 

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| SVG 対応 | 4 | 12 | 3 | 9 | 10 (Presto)15 (Blink) | 3.2 |
| SVG を画像として使用 (`<img>` など) | 28 | 12 | 4 | 9 | 10 (Presto)15 (Blink) | 9 |

 |
| 最大の画像の大きさ | 無制限 |
| カラーモードの対応 | SVG 内の色は、 CSS 色構文を使用して指定されます。 |
| 圧縮 | SVG ソースは転送中に HTTP 圧縮技術を使用したり、ディスク上で `.svgz` ファイルを使用したりすることで圧縮できます。 |
| ライセンス | 
 ©2018 W3C (MIT, ERCIM,
 Keio,
 Beihang), All Rights Reserved. W3C
 liability,
 trademark,
 document use
 and
 software licensing
 rules apply. No known royalty-bearing patents.
  |

### TIFF (Tagged Image File Format)

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

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

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


| タグ | 型 | サイズ | 値 |
| --- | --- | --- | --- |
| `0x0100` (`ImageWidth`) | `0x0003` (`SHORT`) | `0x00000001` (1 項目) | `0x0280` (640 画素) |

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

| タグ | 型 | サイズ | 値 |
| --- | --- | --- | --- |
| `0x0100` (`ImageWidth`) | `0x0004` (`LONG`) | `0x00000001` (1 項目) | `0x00000280` (640 画素) |

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

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

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


|  |  |
| --- | --- |
| MIME タイプ | `image/tiff` |
| ファイルの拡張子 | `.tif`, `.tiff` |
| 仕様書 | adobe.io/open/standards/TIFF.html |
| ブラウザーの互換性 | TIFF の対応はどのブラウザーにも組み込まれておらず、ダウンロード形式としての価値しかありません。 |
| 最大の画像の大きさ | 4,294,967,295×4,294,967,295 画素 (理論値) |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 (*D*) | 説明 |
| --- | --- | --- |
| バイレベル | 1 | 
 バイレベル TIFF はそれぞれのバイトが 8 ビットとなり、 1 画素あたり 1 ビットです。
 `PhotometricInterpretation` フィールドで 0 と 1 のどちらが黒で、どちらが白かを指定します。
  |
| グレースケール | 4 および 8 | 各画素は、グレースケール画素の明るさを示す 1 つの *D* ビット値で構成されています。 |
| トゥルーカラー | 8 | RGB のトゥルーカラー画像は、赤、緑、青をそれぞれ 8 ビットずつ使って保存されます。 |
| インデックスカラー | 4 および 8 | 各画素は `ColorMap` レコードのインデックスであり、画像に使用される色を定義します。カラーマップは、赤の値すべて、緑の値すべて、青の値すべての順に並びます（`rgb, rgb, rgb...` ではなく）。 |
| アルファ付きグレースケール | 4 および 8 | アルファ情報は、 `SamplesPerPixel` フィールドで 1 画素あたり 3 サンプル以上あることを指定し、アルファの種類（1 なら関連付けられた、あらかじめ乗算されたアルファ成分、 2 なら関連付けられないアルファ（別のマット））を示すことで追加されます。しかし、アルファチャンネルは TIFF ファイルではほとんど使われず、ユーザーのソフトウェアによって対応されていない可能性があります。 |
| アルファ付きトゥルーカラー | 8 | アルファ情報は、 `SamplesPerPixel` フィールドで 1 画素あたり 3 サンプル以上あることを指定し、アルファの種類（1 なら関連付けられた、あらかじめ乗算されたアルファ成分、 2 なら関連付けられないアルファ（別のマット））を示すことで追加されます。しかし、アルファチャンネルは TIFF ファイルではほとんど使われておらず、ユーザーのソフトウェアによっては対応していない可能性があります。 |

 |
| 圧縮 | ほとんどの TIFF ファイルは非圧縮ですが、可逆圧縮の PackBits と LZW 圧縮、非可逆圧縮の JPEG 圧縮に対応しています。 |
| ライセンス | ライセンスは不要（ただし、使用するライブラリーに関連するものは除く）。既知の特許はすべて失効しています。 |

### WebP 画像

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

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

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


|  |  |
| --- | --- |
| MIME タイプ | `image/webp` |
| ファイルの拡張子 | `.webp` |
| 仕様書 | 
RIFF Container SpecificationRFC 6386: VP8 Data Format and Decoding Guide
 (可逆圧縮)WebP Lossless Bitstream Specification
 |
| ブラウザーの互換性 | 

| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| 非可逆 WebP の対応 | 17 | 18 | 65 | なし | 11.10 (Presto)15 (Blink) | 14 |
| 可逆 WebP | 2325 on Android | 18 | 65 | なし | 12.10 (Presto)15 (Blink) | 14 |
| アニメーション | 32 | 18 | 65 | なし | 19 (Blink) | 14 |

WebP は Firefox 96 および Chrome 50 以降で、画像の*エクスポート*に使用することもできます（対応バージョンの詳細情報は `HTMLCanvasElement.toBlob()` を参照してください）。 |
| 最大の画像の大きさ | 16,383×16,383 画素 |
| カラーモードの対応 | 
 非可逆の WebP は、画像を 8 ビット Y'CbCr 4:2:0 (YUV420) 形式で格納します。
 可逆の WebP は 8 ビット ARGB カラーで、それぞれの成分が 8 ビットであり、合計で画素あたり 32 ビットです。
  |
| 圧縮 | 可逆（ハフマン、LZ77、カラーキャッシュコード）または非可逆（VP8） |
| ライセンス | ライセンスは不要で、ソースコードも公開されています。 |

**メモ:** Safari 14、すなわちバージョン 14.0 は WebP の対応がアナウンスされているにもかかわらず、 .webp 画像は macOS デスクトップではネイティブで表示されません。一方、 Safari の iOS 14 版では .webp 画像が正しく表示されます。

### XBM (X Window System Bitmap file)

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

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

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


```cpp
#define square8\_width 8
#define square8\_height 8
static unsigned char square8_bits[] = {
  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
```


|  |  |
| --- | --- |
| MIME タイプ | `image/xbm`, `image-xbitmap` |
| ファイルの拡張子 | `.xbm` |
| 仕様書 | なし |
| ブラウザーの互換性 | Firefox 1–3.5, Internet Explorer 1–5 |
| 最大の画像の大きさ | 無制限 |
| カラーモードの対応 | 

| カラーモード | コンポーネント当たりのビット数 | 説明 |
| --- | --- | --- |
| グレースケール | 1 | 各バイトには 1 ビットの画素が 8 つ含まれています。 |
| トゥルーカラー | *なし* | *なし* |
| インデックスカラー | *なし* | *なし* |
| アルファ付きグレースケール | *なし* | *なし* |
| アルファ付きトゥルーカラー | *なし* | *なし* |

 |
| 圧縮 | Lossless |
| ライセンス | オープンソース |

画像形式の選択
-------

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

### 写真

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


| 第一候補 | 代替用 |
| --- | --- |
| WebP または JPEG | JPEG |

### アイコン

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

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


| 第一候補 | 代替用 |
| --- | --- |
| SVG, 可逆 WebP, PNG | PNG |

### スクリーンショット

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

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

| 第一候補 | 代替用 |
| --- | --- |
| 可逆 WebP または PNG圧縮結果が気にならない場合は JPEG | PNG または JPEGスクリーンショットで GIF を使用すると色数が制限されます |

### 図、イラスト、グラフ

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


| 第一候補 | 代替用 |
| --- | --- |
| SVG | PNG |

代替画像の提供
-------

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

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


```html
<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` インターフェイス