refirio.org

画像の遅延読み込み

■loading="lazy" 画像遅延読み込みは、現時点では loading が使える。 2022年から使ってゆくHTML 〜loading 属性〜 ++ Gaji-Laboブログ https://www.gaji.jp/blog/2022/03/23/9358/ loading 属性と lazysizes の使い方（画像の遅延読み込み） https://www.webdesignleaves.com/pr/plugins/lazysizes.html 具体的には のようにしていたところを のようにするだけ。 手元で試したところ、実際に遅延読み込みされることも確認できた。 注意点としては ・ファーストビューに表示される画像には指定しない。 ・画面の結構下の方の画像で無いと遅延読み込み対象にはならないみたい。 つまり「画面の少し外」くらいなら最初に読み込まれる。 くらいか。 ■decoding="async" ※未検証。 「decoding="async"」という指定もあるらしい。 loading とは、ブラウザがどのように画像を読み込む（ダウンロード）かを示す属性で、 decoding とは、ダウンロードした画像をどのようにデコードするかを示すらしい。 画像の遅延読み込みで表示高速化！loading=”lazy”とdecoding=”async” | ウェブスペ https://webspe.net/lazy-loading/ decoding="async" について詳しく調べてみる https://zenn.dev/ixkaito/articles/deep-dive-into-decoding