decoding 属性画像デコードのヒントを提供

decoding 属性は、ユーザエージェントに画像デコードのヒントを提供します。

画像を同期的にデコードするよう指定すると、ユーザエージェントは読み込んだ順番で画像をデコードしていくため、続くコンテンツの表示がそれを待つ間、遅れる可能性があります。非同期的にデコードするよう指定することで、対応するブラウザではこの問題を回避できます。

例えば文書内で補足的に使われていたり、本文とあまり関係がない画像など、それ程重要ではない画像に指定して、Webページが表示される体感速度を向上させることが可能です。

decoding 属性に指定できる値

属性値 概要
sync 他のコンテンツと画像を同期的にデコードします。
async 他のコンテンツと画像を非同期的にデコードします。
auto デフォルト値。デコード方式を指定しません。

参考

現時点ではまだ Google Chrome の独自実装ですが、loading 属性という属性が画像(img 要素)や iframe 要素の遅延読み込みに使用できる属性が提案されています。decoding 属性は、ユーザエージェントに取得した画像をデコードするタイミングを指示しますが、loading 属性は画像の取得タイミング自体を指定します。

decoding 属性の仕様

この属性を使用できる要素

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ