画像のlazy loadingとwidth・height：表示ずれを減らすHTMLの基本

画像が出た瞬間に本文が下へずれると、ちょっと読みづらいよね。読み込みを遅らせる設定と、表示する場所の確保をセットで考えてみよう。

図：画像の寸法指定と読み込みタイミングは、それぞれ別の役割。

一覧の画像は寸法も書く

<img
  src="/images/article-cover.png"
  alt="A4の印刷サイズと解像度の解説"
  width="1200"
  height="630"
  loading="lazy"
>

widthとheightには元画像の縦横比に合う値を書くよ。CSSで幅を変えても、画像の比率を先に伝えられる。

.article-image {
  display: block;
  width: 100%;
  height: auto;
}

クラスを使うなら、HTML側にもclass="article-image"を付けてね。寸法を指定しただけで、あらゆるレイアウトのずれがなくなるわけではないよ。

最初に見える主役画像は別に考える

画面を開いたときにすぐ見える大きな画像までlazyにすると、表示を待たせる場合があるよ。記事の主役画像なら、通常の読み込みにして、必要に応じてfetchpriority="high"を検討しよう。

highは重要度のヒントで、すべての画像へ付けるものではないよ。実際に主役となる画像を見極めることが大切。

altは役割から決めよう

記事の内容を伝える画像なら、意味がわかる短い代替テキストを付ける。周囲の文章と同じ情報を繰り返すだけの装飾なら、空のaltが適切な場合もあるよ。ファイル名をそのまま入れるより、読者に何を伝える画像かで判断しよう。

実際の確認手順

1. 開発者ツールで通信を遅くしてページを開く。
2. 画像が出る前にも、その場所が確保されているか見る。
3. 一覧をスクロールし、画像が読み込まれるか確認する。
4. スマホ幅で比率や文字の回り込みを確認する。

このコードは実装例だよ。各端末や通信速度での改善量は測定していないので、自分のページでも表示と計測を確認してね。