initial commit

2 files changed, 1459 insertions, 0 deletions

diff --git a/files/ja/web/media/formats/image_types/index.html b/files/ja/web/media/formats/image_types/index.html
new file mode 100644
index 0000000000..4b32fcc327
--- /dev/null
+++ b/files/ja/web/media/formats/image_types/index.html
@@ -0,0 +1,1373 @@
+---
+title: 画像ファイルの種類と形式ガイド
+slug: Web/Media/Formats/Image_types
+tags:
+  - APNG
+  - BMP
+  - Bitmap
+  - Diagrams
+  - File
+  - File Types
+  - Filetype
+  - Graphics
+  - Guide
+  - ICO
+  - Icons
+  - Image
+  - Images
+  - JPEG
+  - JPG
+  - Media
+  - PNG
+  - Photos
+  - SVG
+  - WebP
+  - gif
+  - icon
+translation_of: Web/Media/Formats/Image_types
+---
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</div>
+
+<p><span class="seoSummary">このガイドでは、ウェブブラウザーが一般的に対応している画像ファイルの種類を取り上げ、サイトの画像に使用するための最も適切な形式を選択するのに役立つ観点を提供します。</span></p>
+
+<h2 id="Common_image_file_types" name="Common_image_file_types">一般的な画像ファイルの種類</h2>
+
+<p>ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。</p>
+
+<div id="table-of-image-file-types">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">略称</th>
+   <th scope="row">ファイル形式</th>
+   <th scope="col">MIME タイプ</th>
+   <th scope="col">ファイル拡張子</th>
+   <th scope="col">概要</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("APNG")}}</th>
+   <th scope="row">Animated Portable Network Graphics</th>
+   <td><code>image/apng</code></td>
+   <td><code>.apng</code></td>
+   <td>劣化のない一連のアニメーションに最適 (GIF は性能が低い)。 {{anch("AVIF")}} や {{anch("WebP")}} はより性能が高いが、ブラウザーの対応が狭い。<br>
+    <strong>対応:</strong> Chrome, Edge, Firefox, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("AVIF")}}</th>
+   <th scope="row">AV1 Image File Format</th>
+   <td><code>image/avif</code></td>
+   <td><code>.avif</code></td>
+   <td>
+    <p>高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適している。 {{anch("PNG")}} や {{anch("JPEG")}} よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応している。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含めるべきであることに注意してください (つまり、 {{HTMLElement("picture")}} 要素を使用する)。<br>
+     <strong>対応:</strong> Chrome, Opera, Firefox (設定で隠蔽)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("GIF")}}</th>
+   <th scope="row">Graphics Interchange Format</th>
+   <td><code>image/gif</code></td>
+   <td><code>.gif</code></td>
+   <td>単純な画像やアニメーションに適しています。 {{anch("PNG")}} の方が劣化なし<em>かつ</em>インデックスカラーの静止画に適しており、アニメーションシーケンスには {{anch("WebP")}}, {{anch("AVIF")}}, {{anch("APNG")}} を検討してください。<br>
+    <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("JPEG")}}</th>
+   <th scope="row">Joint Photographic Expert Group image</th>
+   <td><code>image/jpeg</code></td>
+   <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jfif</code>, <code>.pjpeg</code>, <code>.pjp</code></td>
+   <td>
+    <p>静止画の非可逆圧縮に適しています (現在最も普及しています)。 {{anch("PNG")}} の方がより正確な画像の再現が必要な場合に適しており、 {{anch("WebP")}}/{{anch("AVIF")}} の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。<br>
+     <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("PNG")}}</th>
+   <th scope="row">Portable Network Graphics</th>
+   <td><code>image/png</code></td>
+   <td><code>.png</code></td>
+   <td>
+    <p>PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 {{anch("WebP")}}/{{anch("AVIF")}} はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。<br>
+     <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("SVG")}}</th>
+   <th scope="row">Scalable Vector Graphics</th>
+   <td><code>image/svg+xml</code></td>
+   <td><code>.svg</code></td>
+   <td>ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。<br>
+    <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("WebP")}}</th>
+   <th scope="row">Web Picture format</th>
+   <td><code>image/webp</code></td>
+   <td><code>.webp</code></td>
+   <td>画像とアニメーションの両方に最適です。 WebP は {{anch("PNG")}} や {{anch("JPEG")}} よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 {{anch("AVIF")}} はわずかに優れた圧縮機能を提供していますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。<br>
+    <strong>対応:</strong> Chrome, Edge, Firefox, Opera, Safari</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="table-of-less-used-image-file-types">
+<div class="note">
+<p><strong>注:</strong> PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている (つまり、市場シェアがゼロに近づいてきている) ため、人気が高まってきています。</p>
+</div>
+</div>
+
+<p>以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります (一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです)。</p>
+
+<div id="table-of-less-used-image-file-types">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">略称</th>
+   <th scope="row">ファイル形式</th>
+   <th scope="col">MIME タイプ</th>
+   <th scope="col">ファイル拡張子</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("BMP")}}</th>
+   <th scope="row">Bitmap ファイル</th>
+   <td><code>image/bmp</code></td>
+   <td><code>.bmp</code></td>
+   <td>Chrome, Edge, Firefox, IE, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("ICO")}}</th>
+   <th scope="row">Microsoft Icon</th>
+   <td><code>image/x-icon</code></td>
+   <td><code>.ico</code>, <code>.cur</code></td>
+   <td>Chrome, Edge, Firefox, IE, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("TIFF")}}</th>
+   <th scope="row">Tagged Image File Format</th>
+   <td><code>image/tiff</code></td>
+   <td><code>.tif</code>, <code>.tiff</code></td>
+   <td>Safari</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="table-of-less-used-image-file-types">
+<div class="note">
+<p><strong>注:</strong> 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。</p>
+</div>
+</div>
+
+<h2 id="Image_file_type_details" name="Image_file_type_details">画像ファイルの種類の詳細</h2>
+
+<p>以下の節では、ウェブブラウザーで対応している画像ファイルの種類について簡単に説明します。</p>
+
+<p>以下の表において、<strong>成分あたりのビット数</strong>とは、各色成分を表現するために使用されるビット数を意味します。例えば、 RGB の色深度が 8 であれば、赤、緑、青の各成分は 8 ビットの値で表現されることになります。一方、<strong>ビット深度</strong>とは、メモリ上で各画素を表現するために使用されるビット数の合計です。</p>
+
+<h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3>
+
+<p>APNG は Mozilla によって最初に導入されたファイル形式で、 {{anch("PNG")}}} 規格を拡張してアニメーション画像の対応を追加したものです。概念的には何十年も使われているアニメーション GIF 形式に似ていますが、アニメーション GIF が 8 ビットの{{interwiki("wikipedia", "色深度")}}しか対応していないのに対し、 APNG の方が様々な{{interwiki("wikipedia", "インデックスカラー")}}に対応しているという点で優れています。</p>
+
+<p>APNG は、進捗インジケーターやアクティビティ{{interwiki("wikipedia", "throbber", "スロバー")}}など、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適です。例えば、 APNG は Apple の iMessage アプリ (および iOS のメッセージアプリ) の<a href="https://developer.apple.com/stickers/">アニメーションステッカーを作成する際に対応している形式の1つ</a>です。また、ウェブブラウザーのユーザーインターフェイスのアニメーション部分にもよく使用されています。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME タイプ</th>
+   <td><code>image/apng</code></td>
+  </tr>
+  <tr>
+   <th scope="row">ファイル拡張子</th>
+   <td><code>.apng</code></td>
+  </tr>
+  <tr>
+   <th scope="row">仕様書</th>
+   <td><a href="https://wiki.mozilla.org/APNG_Specification">wiki.mozilla.org/APNG_Specification</a></td>
+  </tr>
+  <tr>
+   <th scope="row">ブラウザーの互換性</th>
+   <td>Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8</td>
+  </tr>
+  <tr>
+   <th scope="row">最大の大きさ</th>
+   <td>2,147,483,647×2,147,483,647 ピクセル</td>
+  </tr>
+  <tr>
+   <th scope="row">対応している色モデル</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1, 2, 4, 8, 16</td>
+       <td>各ピクセルは、グレースケールピクセルの明るさを示す単一の <em>D</em> ビット値で構成されています。</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8, 16</td>
+       <td>各ピクセルは、赤、緑、青の色成分のレベルを示す3つの <em>D</em> ビット値で表現されます。</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>1, 2, 4, 8</td>
+       <td>各ピクセルは、APNG ファイルの <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> チャンク内に含まれるカラーパレットへのインデックスを示す <em>D</em> ビット値で、パレット内の色はすべて 8 ビットの深度を使用します。</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td>8, 16</td>
+       <td>各ピクセルは、2つの <em>D</em> ビット値、グレイスケールピクセルの明るさとアルファサンプルで表現されます。</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8, 16</td>
+       <td>各ピクセルは、4つの <em>D</em> ピクセルの色成分、赤、緑、青、およびピクセルの不透明度を示すアルファサンプルで構成されます。</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>可逆</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td><a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 以降の下にフリーかつオープンです。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="AVIF_画像"><a id="AVIF" name="AVIF">AVIF 画像</a></h3>
+
+<p>AV1 Image File Format (AVIF) is a powerful new, open source, royalty-free file format that encodes <dfn>AV1 bitstreams in the High Efficiency Image File Format (HEIF) container. </dfn></p>
+
+<div class="note">
+<p><strong>Note:</strong> AVIF has potential to become the "next big thing" for sharing images in web content. It offers state-of-the-art features and performance, without the encumbrance of complicated licensing and patent royalties that have hampered comparable alternatives.</p>
+</div>
+
+<p><dfn>AV1 is a coding format that was originally designed for video transmission over the Internet. The format benefits from the signficant advances in video encoding in recent years, and may potentially benefit from the associated support for hardware rendering. However it also has disadvantages for some cases, as video and image encoding have some different requirements.</dfn></p>
+
+<p>The format offers:</p>
+
+<ul>
+ <li>Excellent lossy compression compared to JPG and PNG for visually similar compression levels (e.g. lossy AVIF images are around 50% smaller than JPEG images).</li>
+ <li>Generally AVIF has better compression than WebP — median 50% vs 30% compression for the same JPG set (source: <a href="https://www.ctrl.blog/entry/webp-avif-comparison.html">AVIF WebP Comparision</a> (CTRL Blog)).</li>
+ <li>Lossless compression.</li>
+ <li>Animation/multi-image storage (similar to animated GIFs, but with much better compression)</li>
+ <li>Alpha channel support (i.e. for transparency).</li>
+ <li><em>High Dynamic Range</em> (HDR): support for storing images that can represent bigger contrasts between the lightest and darkest parts of the image.</li>
+ <li>Wide Color Gamut: Support for images that can contain a larger range of colours.</li>
+</ul>
+
+<p>AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed. This often has little impact on real-world user experience because AVIF files are much smaller than the equivalent JPEG or PNG files, and hence can be downloaded and displayed much faster. For larger file size the impact can become significant, and you should consider using a format that supports progressive rendering.</p>
+
+<p>AVIF is supported on desktop in Chrome 85, Opera 71 and Firefox 77 (requires the feature flag <code>image.avif.enable</code> set <code>true</code>). As support is not yet comprehensive (and has no historical depth) you should provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format using the {{HTMLElement("picture")}} element (or some other approach).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td>Firefox and Chrome use <code>image/avif</code> for both still images and sequences. Type not yet <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#image">registered</a>. as of November 2020.</td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.avif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td>
+    <p><a href="https://aomediacodec.github.io/av1-avif/">AV1 Image File Format (AVIF)</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>Chrome 85, Opera 71, and Firefox 77 (requires the preference <code>image.avif.enable</code> set <code>true</code>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>2,147,483,647×2,147,483,647 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <p>Color mode support information is provided in the <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">AV1 Bitstream &amp; Decoding Process Specification</a>, section 6.4.2 : Color config semantics.</p>
+
+    <p>A non-exhaustive summary is:</p>
+
+    <ul>
+     <li>Color modes: YUV444, YUV422, YUV420</li>
+     <li>Greyscale support: YUV400</li>
+     <li>Bits: 8/10/12 bit</li>
+     <li>Alpha support</li>
+     <li>ICC profile support</li>
+     <li>NCLX support: sRGB, linear sRGB, linear Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, etc.</li>
+     <li>Tiling support</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Lossy and lossless.</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>Royalty free. Licensing information is available at http://aomedia.org/license/ .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="BMP_Bitmap_file"><a id="BMP" name="BMP"><br>
+ BMP</a> (Bitmap file)</h3>
+
+<p>The <strong>BMP</strong> (<strong>Bitmap image</strong>) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Note:</strong> You should typically avoid using BMP files for web site content. The most common form of BMP file represents the data as an uncompressed raster image, resulting in large file sizes compared to png or jpg image tpes. More efficient BMP formats exist but are not widely used, and rarely supported in web browsers.</p>
+</div>
+
+<p>BMP theoretically supports a variety of internal data representations. The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with <code>0x00</code> bytes to a multiple of 4 bytes wide.</p>
+
+<p>While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).</p>
+
+<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in {{anch("JPEG")}} or {{anch("PNG")}} format within the BMP file.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/bmp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.bmp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td>No specification; however, Microsoft provides general documentation of the format at <a href="https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>Either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1</td>
+       <td>Each bit represents a single pixel, which can be either black or white.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>2, 4, and 8</td>
+       <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>BMP has no distinct grayscale format.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Several compression methods are supported, including lossy or lossless algorithms</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>Covered by the <a href="https://docs.microsoft.com/en-us/openspecs/dev_center/ms-devcentlp/1c24c7c8-28b0-4ce1-a47d-95fe1ff504bc">Microsoft Open Specification Promise</a>; while Microsoft holds patents against BMP, they have published a promise not to assert its patent rights as long as specific conditions are met. This is not the same as a license, however. BMP is included under the Windows Metafile Format (<code>.wmf</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3>
+
+<p>In 1987, the CompuServe online service provider introduced the <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by {{Glossary("HTML")}}, along with {{anch("XBM")}}.</p>
+
+<p>Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). To simulate more than 255 or 256 colors, {{interwiki("wikipedia", "dithering")}} is generally used. It is <a href="https://gif.ski/">technically possible</a> to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.</p>
+
+<p>Pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent.</p>
+
+<p>GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.</p>
+
+<p>GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.</p>
+
+<p>Another popular feature of GIF is support for {{interwiki("wikipedia", "Interlacing_(bitmaps)", "interlacing")}}, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.</p>
+
+<p>GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use {{anch("PNG")}} for lossless <em>and</em> indexed still images, and should consider using {{anch("APNG")}} for lossless animation sequences.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.gif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://www.w3.org/Graphics/GIF/spec-gif87.txt">GIF87a specification</a><br>
+    <a href="https://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF89a specification</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>65,536×65,536 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>GIF does not include a dedicated greyscale format.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td><em>n/a</em></td>
+       <td>GIF does not support true color pixels.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>8</td>
+       <td>Each color in a GIF palette is defined as 8 bits each of red, green, and blue (24 total bits per pixel).</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>GIF does not provide a dedicated greyscale format.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td><em>n/a</em></td>
+       <td>GIF does not support true color pixels.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>可逆 (LZW)</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>While the GIF format itself is open, the LZW compression algorithm was covered by patents until the early 2000s. As of July 7, 2004, all relevant patents have expired and the GIF format may be used freely</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="ICO_Microsoft_Windows_icon"><a id="ICO" name="ICO">ICO</a> (Microsoft Windows icon)</h3>
+
+<p>The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a ICO file named <code>favicon.ico</code> in a web site's root directory to specify a <strong><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_custom_icons_to_your_site">favicon</a></strong> — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.</p>
+
+<p>An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a {{anch("BMP")}} image without the file header, or a complete {{anch("PNG")}} image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.</p>
+
+<div class="blockIndicator warning">
+<p>ICO files <em>should not</em> be used in web content. Additionally, their use for favicons has subsided in favor of using a PNG file and the {{HTMLElement("link")}} element, as described in {{SectionOnPage("/ja/docs/Web/HTML/Element/link", "Providing icons for different usage contexts")}}.</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/vnd.microsoft.icon</code> (official), <code>image/x-icon</code> (used by Microsoft)</td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.ico</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>256×256 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <caption>Icons in BMP format</caption>
+     <tbody>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1</td>
+       <td>Each bit represents a single pixel, which can be either black or white.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>2, 4, and 8</td>
+       <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>BMP has no distinct grayscale format.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <table class="standard-table">
+     <caption>Icons in PNG format</caption>
+     <tbody>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1, 2, 4, 8, 16</td>
+       <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>1, 2, 4, 8</td>
+       <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8, 16</td>
+       <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>BMP-format icons nearly always use lossless compression, but lossy methods are available. PNG icons are always compressed losslessly.</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>—</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="JPEG_Joint_Photographic_Experts_Group_image"><a id="JPEG" name="JPEG">JPEG</a> (Joint Photographic Experts Group image)</h3>
+
+<p>The {{Glossary("JPEG")}} (typically pronounced "<strong>jay-peg</strong>") image format is currently the most widely used lossy compression format for still images. It's particulary useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory results.</p>
+
+<p>JPEG is actually a data format for compressed photos, rather than a file type. The JFIF (<strong>J</strong>PEG <strong>F</strong>ile <strong>I</strong>nterchange <strong>F</strong>ormat) specification describes the format of the files we think of as "JPEG" images.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jpe</code>, <code>.jif</code>, <code>.jfif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://jpeg.org/jpeg/">jpeg.org/jpeg/</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>65,535×65,535 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>JPEG has no distinct greyscale mode.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8</td>
+       <td>Each pixel is described by the red, blue, and green color components, each of which is 8 bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td><em>n/a</em></td>
+       <td>JPEG does not offer an indexed color mode.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td><em>n/a</em></td>
+       <td>JPEG does not support an alpha channel.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td><em>n/a</em></td>
+       <td>JPEG does not support an alpha channel.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Lossy; based on the {{interwiki("wikipedia", "discrete cosine transform")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>As of October 27, 2006, all United States patents have expired.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3>
+
+<p>The {{Glossary("PNG")}} (pronounced "<strong>ping</strong>") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than {{anch("GIF")}}, as well as full alpha transparency support.</p>
+
+<p>PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4–5, did not fully support it until IE 9, and had many infamous bugs for many of the intervening years, including in the once-omnipresent Internet Explorer 6. This slowed PNG adoption, but it is now commonly used, especially when precise reproduction of the source image is needed.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/png</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.png</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://www.w3.org/TR/PNG">w3.org/TR/PNG</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Feature</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Basic support</th>
+       <td>1</td>
+       <td>12</td>
+       <td>1</td>
+       <td>5</td>
+       <td>3.5.1 (Presto)<br>
+        15 (Blink)</td>
+       <td>1</td>
+      </tr>
+      <tr>
+       <th scope="row">Alpha channel</th>
+       <td>1</td>
+       <td>12</td>
+       <td>1</td>
+       <td>5</td>
+       <td>6 (Presto)<br>
+        All (Blink)</td>
+       <td>1</td>
+      </tr>
+      <tr>
+       <th scope="row">Gamma correction</th>
+       <td>no</td>
+       <td>yes</td>
+       <td>1</td>
+       <td>8</td>
+       <td>1</td>
+       <td>broken</td>
+      </tr>
+      <tr>
+       <th scope="row">Color correction</th>
+       <td>no</td>
+       <td>yes</td>
+       <td>3</td>
+       <td>9</td>
+       <td>no</td>
+       <td>no</td>
+      </tr>
+      <tr>
+       <th scope="row">Interlacing</th>
+       <td>no</td>
+       <td>?</td>
+       <td>1</td>
+       <td>broken</td>
+       <td>3.5.1</td>
+       <td>no</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>2,147,483,647×2,147,483,647 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Color mode</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1, 2, 4, 8, 16</td>
+       <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>1, 2, 4, 8</td>
+       <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td>8, 16</td>
+       <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8, 16</td>
+       <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Lossless, optionally indexed color like GIF</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="SVG_Scalable_Vector_Graphics"><a id="SVG" name="SVG">SVG</a> (Scalable Vector Graphics)</h3>
+
+<p>SVG is an <a href="/ja/docs/Glossary/XML">XML</a>-based {{interwiki("wikipedia", "vector graphics")}} format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern Web design.</p>
+
+<p>SVG files are text files containing source code that, when interpreted, draws the desired image. For instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:</p>
+
+<pre class="brush: html notranslate">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;line x1="0" y1="80" x2="100" y2="20" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>SVG can be used in web content in two ways:</p>
+
+<ol>
+ <li>You can directly write the {{HTMLElement("svg")}} element within the HTML, containing <a href="/ja/docs/Web/SVG/Element">SVG elements</a> to draw the image.</li>
+ <li>You can display an SVG image anywhere you can use any of the other image types, including with the {{HTMLElement("img")}} and {{HTMLElement("picture")}} elements, the {{cssxref("background-image")}} CSS property, and so forth.</li>
+</ol>
+
+<p>SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.svg</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://www.w3.org/TR/SVG2">w3.org/TR/SVG2</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Feature</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">SVG support</th>
+       <td>4</td>
+       <td>12</td>
+       <td>3</td>
+       <td>9</td>
+       <td>10 (Presto)<br>
+        15 (Blink)</td>
+       <td>3.2</td>
+      </tr>
+      <tr>
+       <th scope="row">SVG as image ({{HTMLElement("img")}} etc)</th>
+       <td>28</td>
+       <td>12</td>
+       <td>4</td>
+       <td>9</td>
+       <td>10 (Presto)<br>
+        15 (Blink)</td>
+       <td>9</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>Unlimited</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>Colors in SVG are specified using <a href="/ja/docs/Web/CSS/color_value">CSS color syntax</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>SVG source may be compressed during transit using <a href="/ja/docs/Web/HTTP/Compression">HTTP compression</a> techniques, or on disk as an <code>.svgz</code> file.</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="TIFF_Tagged_Image_File_Format"><a id="TIFF" name="TIFF">TIFF</a> (Tagged Image File Format)</h3>
+
+<p>{{interwiki("wikipedia", "TIFF")}} is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats. This is because of the metadata often included, as well as the fact that most TIFF images are either uncompressed or use compression algorithms that still leave fairly large files after compression.</p>
+
+<p>TIFF supports a variety of compression methods, but the most commonly used are the CCITT Group 4 (and, for older fax systems, Group 3) compression systems used for by fax software, as well as LZW and lossy JPEG compression.</p>
+
+<p>Every value in a TIFF file is specified using its <strong>tag</strong> (indicating what kind of information it is, such as the width of the image) and its <strong>type</strong> (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). This allows different data types to be used for the same properties. For example, the width of an image, <code>ImageWidth</code>, is stored using tag <code>0x0100</code>, and is a one-entry array. By specifying type 3 (<code>SHORT</code>), the value of <code>ImageWidth</code> is stored as a 16-bit value:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Type</th>
+   <th scope="col">Size</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>0x0100</code><br>
+    (<code>ImageWidth</code>)</td>
+   <td><code>0x0003</code><br>
+    (<code>SHORT</code>)</td>
+   <td><code>0x00000001</code><br>
+    (1 entry)</td>
+   <td><code>0x0280</code><br>
+    (640 pixels)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Specifying type 4 (<code>LONG</code>) stores the width as a 32-bit value:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Type</th>
+   <th scope="col">Size</th>
+   <th scope="col">Value</th>
+  </tr>
+  <tr>
+   <td><code>0x0100</code><br>
+    (<code>ImageWidth</code>)</td>
+   <td><code>0x0004</code><br>
+    (<code>LONG</code>)</td>
+   <td><code>0x00000001</code><br>
+    (1 entry)</td>
+   <td><code>0x00000280</code><br>
+    (640 pixels)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>A single TIFF file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). However, software reading TIFF files is only required to support the first image.</p>
+
+<p>TIFF supports a variety of color spaces, not just RGB. These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.</p>
+
+<p>Long ago, some browsers supported TIFF images in web content; today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content, <em>but </em>it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.tif</code>, <code>.tiff</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://www.adobe.io/open/standards/TIFF.html">adobe.io/open/standards/TIFF.html</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>No browsers integrate support for TIFF; its value is as a download format</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>4,294,967,295×4,294,967,295 pixels (theoretical)</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数 (<em>D</em>)</th>
+       <th scope="col">説明</th>
+      </tr>
+      <tr>
+       <th scope="row">Bilevel</th>
+       <td>1</td>
+       <td>A bilevel TIFF stores 8 bits in each byte, one bit per pixel. The <code>PhotometricInterpretation</code> field specifies which of 0 and 1 are black and which is white.</td>
+      </tr>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>4 and 8</td>
+       <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td>8</td>
+       <td>All true color RGB images are stored using 8-bits each of red, green, and blue.</td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td>4 and 8</td>
+       <td>Each pixel is an index into a <code>ColorMap</code> record, which defines the colors used in the image. The color map lists all of the red values, then all of the green values, then all of the blue values (rather than <code>rgb, rgb, rgb...</code>).</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td>4 and 8</td>
+       <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td>8</td>
+       <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Most TIFF files are uncompressed, but lossless PackBits and LZW compression are supported, as is lossy JPEG compression.</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>No license required (aside from any associated with libraries you might use); all known patents have expired.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebP_image"><a id="WebP" name="WebP">WebP image</a></h3>
+
+<p>WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. Lossy WebP images average 25–35% smaller than JPEG images of visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images in PNG format.</p>
+
+<p>WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Lossless WebP holds the <code>ANIM</code> chunk, which describes the animation, and the <code>ANMF</code> chunk, which represents a frame of an animation sequence. Looping is supported.</p>
+
+<p>WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format, such as with the {{HTMLElement("picture")}} element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.webp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td>
+    <p><a href="https://developers.google.com/speed/webp/docs/riff_container">RIFF Container Specification</a><br>
+     {{RFC(6386, "VP8 Data Format and Decoding Guide")}} (lossy encoding)<br>
+     <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">WebP Lossless Bitstream Specification</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">Feature</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">Lossy WebP support</th>
+       <td>17</td>
+       <td>18</td>
+       <td>65</td>
+       <td>no</td>
+       <td>11.10 (Presto)<br>
+        15 (Blink)</td>
+       <td>14</td>
+      </tr>
+      <tr>
+       <th scope="row">Lossless WebP</th>
+       <td>23<br>
+        25 on Android</td>
+       <td>18</td>
+       <td>65</td>
+       <td>no</td>
+       <td>12.10 (Presto)<br>
+        15 (Blink)</td>
+       <td>14</td>
+      </tr>
+      <tr>
+       <th scope="row">Animation</th>
+       <td>32</td>
+       <td>18</td>
+       <td>65</td>
+       <td>no</td>
+       <td>19 (Blink)</td>
+       <td>14</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>16,383×16,383 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>Lossy WebP stores the image in 8-bit Y'CbCr 4:2:0 (YUV420) format. Lossless WebP uses 8-bit ARGB color, with each component taking 8 bits for a total of 32 bits per pixel.</td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Lossless (Huffman, LZ77, or color cache codes) or lossy (VP8).</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>No license required; source code is openly available.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Despite having <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">announced support</a> for WebP in Safari 14, as of version 14.0 .webp images do not display natively on a macOS desktop, whereas Safari on iOS 14 does display .webp images properly.</p>
+</div>
+
+<h3 id="XBM_X_Window_System_Bitmap_file"><a id="XBM" name="XBM">XBM</a> (X Window System Bitmap file)</h3>
+
+<p>XBM (X Bitmap) files were the first to be supported on the Web, but are no longer used and should be avoided, as their format has potential security concerns. Modern browsers have not supported XBM files in many years, but when dealing with older content, you may find some still around.</p>
+
+<p>XBM uses a snippet of C code to represent the contents of the image as an array of bytes. Each image consists of 2 to 4 <code>#define</code> directives, providing the width and height of the bitmap (and optionally the hotspot, if the image is designed as a cursor), followed by an array of <code>unsigned char</code>, where each value contains 8 1-bit monochrome pixels.</p>
+
+<p>The image must be a multiple of 8 pixels wide. For example, the following code represents an XBM image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern:</p>
+
+<pre class="brush: cpp notranslate">#define square8_width 8
+#define square8_height 8
+static unsigned char square8_bits[] = {
+  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
+};
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">MIME type</th>
+   <td><code>image/xbm</code>, <code>image-xbitmap</code></td>
+  </tr>
+  <tr>
+   <th scope="row">File extension(s)</th>
+   <td><code>.xbm</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Browser compatibility</th>
+   <td>Firefox 1–3.5, Internet Explorer 1–5</td>
+  </tr>
+  <tr>
+   <th scope="row">Maximum dimensions</th>
+   <td>Unlimited</td>
+  </tr>
+  <tr>
+   <th scope="row">Supported color modes</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">色モード</th>
+       <th scope="col">成分あたりのビット数</th>
+       <th scope="col">説明</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">グレイスケール</th>
+       <td>1</td>
+       <td>Each byte contains eight 1-bit pixels.</td>
+      </tr>
+      <tr>
+       <th scope="row">True color</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">インデックスカラー</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きグレイスケール</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">アルファ付きトゥルーカラー</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">圧縮</th>
+   <td>Lossless</td>
+  </tr>
+  <tr>
+   <th scope="row">ライセンス</th>
+   <td>Open source</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Choosing_an_image_format">Choosing an image format</h2>
+
+<p>Picking the best image format for your needs is likely easier than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases.</p>
+
+<h3 id="Photographs">Photographs</h3>
+
+<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes {{anch("JPEG")}} and {{anch("WebP")}} good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both {{anch("Providing image fallbacks", "using a fallback")}} with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Best choice</th>
+   <th scope="col">Fallback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>WebP or JPEG</td>
+   <td>JPEG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Icons">Icons</h3>
+
+<p>For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a {{anch("Providing image fallbacks", "fallback")}}. If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).</p>
+
+<p>If the icon can be represented using vector graphics, consider {{anch("SVG")}}, since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Best choice</th>
+   <th scope="col">Fallback</th>
+  </tr>
+  <tr>
+   <td>SVG, Lossless WebP, or PNG</td>
+   <td>PNG</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Screenshots">Screenshots</h3>
+
+<p>Unless you're willing to compromise on quality, you should use a lossless format for screenshots. This is particularly important if there's any text in your screenshot, as text easily becomes fuzzy and unclear under lossy compression.</p>
+
+<p>PNG is probably your best bet, but lossless WebP is arguably going to be better compressed.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Best choice</th>
+   <th scope="col">Fallback</th>
+  </tr>
+  <tr>
+   <td>Lossless WebP or PNG;<br>
+    JPEG if compression artifacts aren't a concern</td>
+   <td>PNG or JPEG;<br>
+    GIF for screenshots with low color counts</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Diagrams_drawings_and_charts">Diagrams, drawings, and charts</h3>
+
+<p>For any image that can be represented using vector graphics, SVG is the best choice. Otherwise, you should use a lossless format like PNG. If you do choose a lossy format, such as JPEG or lossy WebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Best choice</th>
+   <th scope="col">Fallback</th>
+  </tr>
+  <tr>
+   <td>{{anch("SVG")}}</td>
+   <td>{{anch("PNG")}}</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Providing_image_fallbacks">Providing image fallbacks</h2>
+
+<p>While the standard HTML {{HTMLElement("img")}} element doesn't support compatibility fallbacks for images, the {{HTMLElement("picture")}} element does. <code>&lt;picture&gt;</code> is used as a wrapper for a number of {{HTMLElement("source")}} elements, each specifying a version of the image in a different format or under different <a href="/ja/docs/Web/CSS/@media">media conditions</a>, as well as an <code>&lt;img&gt;</code> element which defines where to display the image and the fallback to the default or "most compatible" version.</p>
+
+<p>For example, if you're displaying a diagram best displayed with SVG, but wish to offer a fallback to a PNG or GIF of the diagram, you would do something like this:</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source srcset="diagram.svg" type="image/svg+xml"&gt;
+  &lt;source srcset="diagram.png" type="image/png"&gt;
+  &lt;img src="diagram.gif" width="620" height="540"
+       alt="Diagram showing the data channels"&gt;
+&lt;/picture&gt;
+</pre>
+
+<p>You can specify as many <code>&lt;source&gt;</code>s as you wish, though typically 2 or 3 is all you need.</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Media/Formats">メディアの種類と形式のガイド</a></li>
+ <li><a href="/ja/docs/Web/Media">ウェブメディア技術</a></li>
+ <li><a href="/ja/docs/Web/Media/Formats/Video_codecs">ウェブ上で使用される動画コーデックのガイド</a></li>
+ <li>{{Glossary("HTML")}} の {{HTMLElement("img")}} および {{HTMLElement("picture")}} 要素</li>
+ <li>CSS の {{cssxref("background-image")}} プロパティ</li>
+ <li>{{domxref("Image()")}} コンストラクターと {{domxref("HTMLImageElement")}} インターフェイス</li>
+</ul>
diff --git a/files/ja/web/media/formats/index.html b/files/ja/web/media/formats/index.html
new file mode 100644
index 0000000000..5f104500dc
--- /dev/null
+++ b/files/ja/web/media/formats/index.html
@@ -0,0 +1,86 @@
+---
+title: 'メディアの種類と形式のガイド: 画像、音声、動画コンテンツ'
+slug: Web/Media/Formats
+tags:
+  - API
+  - Audio
+  - Codecs
+  - Containers
+  - File Types
+  - Files
+  - Filetypes
+  - Landing
+  - Media
+  - Types
+  - Video
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p>
+
+<p>ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。</p>
+
+<p><span class="seoSummary">このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、{{Glossary("codec", "コーデック")}}、アルゴリズムの概要を説明します。</span>また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコンテンツに適したファイル形式の提案も提供しています。</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References" name="References">リファレンス</h2>
+
+<h3 id="Images" name="Images">画像</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類と形式のガイド</a></dt>
+ <dd>主要なウェブブラウザーが対応している画像ファイルの種類とコンテンツ形式をカバーし、それぞれの種類についての基本的な情報を提供しています。利点、制限、使用例など、ウェブデザイナーや開発者が興味を持つ情報を提供します。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/Images_for_web_designers">ウェブデザイナーのための画像ファイル形式</a></dt>
+ <dd>ウェブデザイナーにとって有用な様々な画像ファイルの種類についての基本的な情報であり、各種類のベストプラクティスや使用例、特定のコンテンツの種類に適した画像ファイル形式を選択するためのガイドラインなどが含まれています。</dd>
+</dl>
+
+<h3 id="Media_file_types_and_codecs" name="Media_file_types_and_codecs">メディアファイルの種類とコーデック</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Media/Formats/Containers">メディアコンテナー (ファイルの種類)</a></dt>
+ <dd>メディアデータを含むファイルの種類のガイド。オーディオに特化したものもあれば、オーディオや映画などの複合視聴覚コンテンツに使われるものもあります。主要なウェブブラウザーが対応している各ファイル種別の概要と、ブラウザーの対応情報、対応している機能が含まれています。</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Media/Formats/Audio_codecs">ウェブ音声コーデックガイド</a></dt>
+ <dd>一般的なメディアコンテナーや主要なブラウザーで許可されているオーディオコーデックのガイド。メリット、制限、主要な仕様と機能、ユースケースが含まれています。また、与えられたコンテナーでコーデックを使用するための各ブラウザーのサポートもカバーしています。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/Video_codecs">ウェブ動画コーデックガイド</a></dt>
+ <dd>この記事では、主要なブラウザーが対応してている動画コーデックについての基本的な情報と、一般的には対応されていないが、まだ遭遇する可能性のあるいくつかの情報を提供します。また、コーデックの機能、利点、制限、ブラウザーの対応レベルと制限についても説明します。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/codecs_parameter">一般的なメディアタイプの "codecs" 引数</a></dt>
+ <dd>メディア形式を記述する MIME タイプを指定するときは、 type 文字列の一部として <code>codecs</code> 引数を使用して詳細を提供できます。このガイドでは、一般的なメディアタイプの <code>codecs</code> 引数の形式と可能な値について説明します。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/WebRTC_codecs">WebRTC で使われるコーデック</a></dt>
+ <dd><a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> はコンテナーを使用せず、 {{domxref("MediaStreamTrack")}} オブジェクトを使用して音声や動画の各トラックを表現し、エンコードされたメディア自体をピアからピアにストリームします。このガイドでは、WebRTC で一般的に使用されるコーデックについて説明します。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides" name="Guides">ガイド</h2>
+
+<h3 id="Concepts" name="Concepts">概要</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Media/Formats/Audio_concepts">デジタル音声の概要</a></dt>
+ <dd>音声がどのようにデジタル形式に変換され、コンピュータで使用するために保存されるかを紹介します。音声がどのようにサンプリングされるかについての基本的な概念、サンプルレート、音声フレーム、音声圧縮などの概念を説明しています。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/Video_concepts">デジタル動画の概要</a></dt>
+ <dd>ウェブ上で使用されるデジタルビデオの基本的な概念、例えばカラーフォーマット、クロマサブサンプリング、人間の知覚がビデオコーディングにどのように影響するかなどを解説しています。</dd>
+</dl>
+
+<h3 id="Tutorials_and_how-tos" name="Tutorials_and_how-tos">チュートリアルと how-to</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">学習: 動画と音声のコンテンツ</a></dt>
+ <dd>このチュートリアルでは、ウェブ上でのメディアの利用方法を紹介し、詳細を説明します。</dd>
+ <dt><a href="/ja/docs/Web/Media/Formats/Support_issues">ウェブコンテンツにおけるメディア対応の課題への対応</a></dt>
+ <dd>このガイドでは、メディア形式を賢く選択し、フォールバックや代替形式を提供することで、可能な限り幅広い互換性を提供しながら、品質やパフォーマンスを最大化するウェブコンテンツを構築する方法を見ていきます。</dd>
+</dl>
+
+<h2 id="Other_topics" name="Other_topics">その他のトピック</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>Media Capabilities API を使用すると、アプリやサイトが実行されている端末のエンコーディングおよびデコーディング機能を検出することができます。これにより、どの形式をいつ使用するかをリアルタイムで判断することができます。</dd>
+</dl>
+</div>
+</div>