HTML
画像が遅延読み込みされない
loading="lazy" が効いていない
こんな症状
loading="lazy"を付けたのに画像が最初から全部読み込まれる。条件が揃っていないときに起きるよ。
まず試す
img に width/height を付け、loading="lazy" はファーストビュー外の画像にだけ使う。
html
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="写真">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓width/height が無い
→ <img> に width/height を付ける（レイアウト計算に必要）。 - ✓ファーストビューの画像に付けた
→ 最初に見える画像は lazy が無視される。外す。 - ✓効いているか分からない
→ Networkタブでスクロール時に読み込まれるか確認する。
なぜ起きる？
loading="lazy"はビューポートから離れた画像にのみ効果があるよ。ファーストビュー内の画像には効かないんだ。また、width/height属性がないとブラウザがレイアウトを計算できず、遅延読み込みが正しく動作しないことがあるよ。
✕ エラーが起きるコード
<img src="photo.jpg" loading="lazy">
<!-- width/height がなく効かない場合がある -->✓ 直したコード
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="写真">
<!-- サイズを明示 -->✅ 直ったか確認
Networkタブで、画面外の画像がスクロール時に読み込まれればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- loading="lazy"が効かない — ファーストビューの画像に指定している
- 画像が表示されない — 画像パスが間違っている
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- required属性が効かない（フォームバリデーション） — 送信のしかたがバリデーションを通っていない
- metaタグのviewportが効かない — viewport の指定が間違っている
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説