<img src="" decoding="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / フォーム関連要素 / インタラクティブ・コンテンツ（usemap属性がある場合） / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
img要素に decoding="" を追加すると、画像のデコード方式を指定することができます。
この機能を使うことで、画像の読み込みを待たずに文書全体を素早く表示できるようになります。（非同期を指定した場合）
- ここで言うデコードとは、画像のデータを、画面表示に適したビットマップ形式（WindowsのBMPに限定したものではない）に変換する処理のことです。
<img src="example.jpg" alt="サンプル" decoding="async">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
画像の指定 | URL | 埋め込む画像ファイルのURL |
| 任意属性 | |||
decoding="" |
 画像のデコード方式 |
sync |
他のコンテンツと同期的にデコード |
async |
他のコンテンツと非同期的にデコード | ||
auto |
デコード方式を指定しない（既定値） | ||
値の詳細は次のようになります。
sync- この画像を、他のコンテンツと同期的にデコードします。画像と他のコンテンツを同時に表示させることができますが、画像のデコードに時間がかかった場合は他のコンテンツの表示も遅れます。
async- この画像を、他のコンテンツと非同期的にデコードします。画像のデコードに時間がかかった場合でも、文書全体が素早く表示されます。（画像がワンテンポ遅れて表示される感じになります）
auto（既定値）- デコード方式を指定せずに、ブラウザ側の判断に任せます。
次の例では、非同期のデコードを指定しています。
- 画像が読み込まれる際にレイアウトが動いてしまうことを避けるため、同時に画像の表示サイズも指定しています。
<img src="example.jpg" alt="サンプル" decoding="async" width="300" height="150">
使用例
- 以下の例では、画像サイズが小さいこともあり、違いがほとんど分かりませんでした…。画像サイズや通信環境によっては、属性指定の効果が出てくると思います。
<h1>同期的なデコードを指定</h1>
<p>その他のコンテンツ</p>
<p><img src="sync.jpg" alt="syncのサンプル" decoding="sync" width="400" height="250"></p>
<p>その他のコンテンツ</p>
...
- 表示例
<h1>非同期的なデコードを指定</h1>
<p>その他のコンテンツ</p>
<p><img src="async.jpg" alt="asyncのサンプル" decoding="async" width="400" height="250"></p>
<p>その他のコンテンツ</p>
...
- 表示例