画像読み込み属性ビルダーとは
画像読み込み属性ビルダーは、loading、decoding、fetchpriorityを組み合わせて最適化されたimgタグを作成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Use loading='lazy' for below-the-fold images to defer loading until the user scrolls near them. Use loading='eager' or omit the attribute for above-the-fold images that should load immediately.
Limitations
- Lazy loading defers image requests but does not reduce total page weight -- images still download when scrolled into view.
- The browser reserves placeholder space for lazy images even before they load, which can affect layout if width and height attributes are missing.
- Using loading='lazy' on above-the-fold images can delay LCP and hurt user experience.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。