ユーザーエクスペリエンスの一部として、ブラウザがWebページをどのように描画し、特に大量の画像またはビデオを含むページがどのように読み込まれるかは重要です。特に、画像の読み込みとデコードはWebパフォーマンスに大きな影響を与えます。この問題を解決するために、HTML5は<img>タグに新たな属性であるdecodingを導入しました。

 

何が問題なのか

画像の読み込みは、ネットワークからのダウンロードとブラウザによる画像のデコード、2つの主要な工程に分かれます。通常、これらの工程は同期的に行われ、デコードが完了するまでページの描画がブロックされることがあります。これは、特に大きな画像を読み込んでいるときや、多数の画像を含むページを読み込んでいるときに、ユーザーエクスペリエンスを著しく損なう可能性があります。

 

解決策: decoding属性

これに対応するために、<img>タグにはdecoding属性が導入されました。この属性は3つの値を取ることができます：

 

• "sync": 画像は同期的にデコードされます。これがデフォルトの挙動です。
• "async": 画像は非同期的にデコードされます。これにより、画像のデコードがページの描画をブロックすることはありません。
• "auto": ブラウザは画像のデコード方法を決定します。これがデフォルトの値です。

したがって、ページの描画をブロックすることなく、画像のデコードを最適化するためには、<img>タグにdecoding="async"属性を追加することを検討するべきです。

<img src="image.jpg" decoding="async" alt="Description">

注意点

この属性が広く使われているわけではないので、対応していないブラウザがまだ存在します。また、この属性は<img>タグに対してのみ有効で、他のメディア要素（<video>や<iframe>）や、<svg>や<picture>のような他の画像関連のタグに対しては直接効果を発揮しません