画像読み込み属性ビルダーとは
モダンなimgタグは、複数のパフォーマンス属性を組み合わせて使用することで効果を発揮します。loadingは遅延読み込みを制御し、decodingは画像のデコード方法を制御し、fetchpriorityは重要度を伝えます。これらを適切に組み合わせて使用することは、個別に設定するよりも効果的です。
クイックアンサー
ファーストビュー外の画像にはloading='lazy'を使用して、ユーザーが近くまでスクロールするまで読み込みを遅延します。即座に読み込むべきファーストビュー上の画像にはloading='eager'を使用するか、属性を省略してください。
Last updated: 2026-05-25
制限事項
- 遅延読み込みは画像リクエストを遅延しますが、総ページ容量は削減しません。画像はスクロールして表示されるときにダウンロードされます。
- ブラウザは遅延画像が読み込まれる前でもプレースホルダー領域を確保するため、width属性とheight属性がないとレイアウトに影響を与える可能性があります。
- ファーストビュー上の画像にloading='lazy'を使用すると、LCPが遅延し、ユーザー体験を損なう可能性があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 画像がページ上のどこに表示されるかに一致する画像ユースケースを選択します。
- ツールがそのユースケースに推奨される属性の組み合わせを設定します。
- 画像のパス、サイズ、altテキストを入力します。
- 完成したimgタグをページにコピーします。
主な用途
- loading='eager'、decoding='sync'、fetchpriority='high'を使用したヒーローimgを構築する。
- loading='lazy'とdecoding='async'を使用した遅延読み込み記事画像を作成する。
- 適切なloading属性とdecoding属性でサムネイルギャラリーを最適化する。