imgタグを入力するとlazy loading、pictureタグ、srcsetを自動生成します
imgタグを貼り付けるか直接入力してください。複数入力可能。（Ctrl+Enterで生成）
loading="lazy"属性で遅延読み込み
decoding="async"属性で非同期デコード
fetchpriority="low"属性を追加
レスポンシブ画像用pictureタグで囲む
pictureタグ内にWebP source追加
様々な画面サイズ用srcset生成
Lazy Loading（遅延読み込み）はウェブページのパフォーマンスを向上させる重要な技術です。画面に表示される画像のみを先に読み込み、スクロール時に画像を順次読み込むことで初期読み込み速度を大幅に改善します。
Largest Contentful Paint時間を短縮してCore Web Vitalsスコアを向上させます。
必要な画像のみを読み込んでデータ使用量を削減します。
srcsetでデバイス別に最適な画像を提供します。
ページ速度改善により検索順位にプラスの影響を与えます。
loading="lazy"属性を追加するだけで基本的なLazy Loadingが動作します。さらにsrcset、pictureタグを使用するとより効果的です。
| オプション | 説明 | 効果 |
|---|---|---|
| loading="lazy" | ブラウザネイティブ遅延読み込み | すべての最新ブラウザ対応 |
| decoding="async" | 画像デコード非同期処理 | メインスレッドブロック防止 |
| fetchpriority | 読み込み優先順位設定 | LCP画像優先読み込み |
| srcset | 画面サイズ別画像提供 | レスポンシブ画像最適化 |
ページ上部の重要な画像（Hero画像など）にはlazy loadingを適用しないでください。むしろLCPを悪化させる可能性があります。