「画像をいつデコードするか?」という画像のデコード(画面への表示に適したビットマップという形式に画像を変換する処理のこと)のタイミングを指定する。ブラウザによっては画像のデコードが完了するまで、他のコンテンツの表示を保留する場合がある(=同期処理)。
decoding属性の属性値に「async」を指定することで、デコードの完了を待たずに他のコンテンツを表示させることができる(=非同期処理)。同期的は「sync」、デフォルトは「auto(自動。ブラウザによる)」
<img src="images/logo-dummy-cafe.svg" width="200" height="160" alt="Dummy Cafe" decoding="async">
decoding=”async”の使い方
- ファーストビューに表示される画像:decoding=”async”
- ファーストビュー以下の画像:decoding=”async”とloading=”lazy”の併記。もしくはloading=lazyのみ付与。
※画像サイズが大きく、遅延読み込み時に画像表示が遅れる場合は、loading=lazyを削除し、事前にデコード処理を終わらせる。
※Chromeの場合は併記するとloading=”lazy”の方が優先される。