画像の読み込みで文章がずれる原因と直し方｜CLS対策のコード例

1. 画像が遅い問題と、場所が動く問題を分ける

画像の容量を小さくすることと、表示位置を安定させることは別の対策です。軽い画像でも表示用の場所がなければ文章が動くことがあり、大きい画像でも場所が確保されていれば動きは抑えられます。まず、「画像が出るまで長い」のか「表示された瞬間に周囲がずれる」のかを見分けて書き留めます。

Googleのweb.devでは、画像の寸法が指定されていないことをレイアウトずれの代表的な原因の一つとして説明しています。ただし、広告、フォント、後から追加する部品も原因になり得ます。この記事は画像周辺の確認に絞った手順で、ページ全体の速度や検索順位の改善を保証するものではありません。

2. 実際の画像比率に合わせて幅と高さを書く

通常の画像では、widthとheightを使って縦横比を示し、表示時の幅はCSSで調整できます。次は1200×675ピクセルの画像を使うコード例です。ファイル名・説明文・寸法は、自分の画像に置き換えます。

<img src="article-image.jpg"
     alt="設定手順の全体像"
     width="1200" height="675"
     style="max-width:100%;height:auto">

数字は画面上で必ず1200ピクセルに広げる指示ではありません。上の例では親要素の幅に収め、比率を維持します。元画像が正方形なのに16:9の寸法を書くなど、実物と違う比率を指定すると見た目が変わるため、先に画像ファイルの寸法を確認します。

同じ場所で違う大きさの画像を配る場合は、各画像の比率も照合します。PCとスマホで意図的に切り抜き方を変える設計では、単に数字をコピーせず、それぞれの表示枠の比率を設計してください。参考: web.devのCLS改善ガイド、レスポンシブ画像の説明。確認日: 2026年9月10日。

3. カード画像と本文画像を分けて確認する

スマホでは表を横にスクロールできます。

一覧の高さをそろえるためのトリミングと、説明図を全文見せる表示は同じルールにしない方が判断しやすくなります。共通CSSを変えるときは、少なくともこの4場面の代表画像を一つずつ選んで確認します。

4. キャッシュがある状態だけで合格にしない

1. 修正前のURL、画面幅、ずれる箇所を記録する。
2. 対象画像の実寸とHTML・CSSの比率を照合する。
3. 一箇所を修正し、ページを読み直す。
4. 開発者ツール等でキャッシュや回線条件を変え、読み込み途中も確認する。
5. スマホ・PCで、文字が切れないか、横へはみ出さないかを調べる。

記録例は「記事上部の図／幅390px／画像表示時に目次が下がる／寸法指定後に再確認」のように、発生条件と変更点を分けます。目視だけでCLSの数値を推定せず、必要なら計測ツールで確認します。これは検証の記入例で、当サイトの改善実測値ではありません。

5. 直らない場合は、動いた要素の前を調べる

動いているのが文章でも、原因は文章以外にあるかもしれません。その直前に広告枠、埋め込み、通知バーが追加されていないかを確認します。ページ全体へ固定高さを付けて隠すのではなく、増える部品に必要な場所を確保するか、表示方法を見直します。

また、画像をすべて遅延読み込みにすれば解決するわけではありません。画面の最初に必要な画像と、下へ進んだときに必要な画像を区別します。まず1記事で確認し、代表的な画像で問題がないことを確かめてから共通設定へ広げましょう。容量や読み込み全体は表示速度改善の基本、画面幅ごとの確認はスマホ表示の点検へ進めます。

6. 同じ画像で、表示前後の高さを比べた結果

2026年9月29日、当サイトのイラスト画像（1672×941ピクセル）を使い、画像の返送を20秒遅らせるローカルページを作成しました。Chrome上で幅320 CSSピクセルに表示し、画像の読み込み完了前と後で画像枠の高さと直後の文章の位置を読み取りました。画像自体はAI生成の説明用イラストで、測定したのはその内容ではなく表示領域です。

同じ画像・幅・本文を使い、寸法指定だけを3通りに変えました。下表の値は小数第2位に丸めています。丸め前の観測値と確認条件（JSON）も参照できます。

表は横にスクロールできます。

HTMLに寸法属性がないだけで、必ずずれるとは判断できません。2行目のようにCSS側で比率を確保していれば、画像の到着前から場所を作れます。このサイトの既存3記事でも寸法属性がありませんでしたが、共通CSSには16:9の比率指定がありました。今回はHTMLにも元画像の寸法を補いました。これを「本番で180pxのずれが直った」という実績にはしていません。

1672×941の比率は16:9とわずかに異なります。幅320pxでは、元画像の比率に沿った高さは320 × 941 ÷ 1672 ≒ 180.09pxです。一覧用の切り抜きで16:9へそろえるなら180pxですが、文字のある説明図を切り抜くと情報を欠く可能性があります。元の比率を保持するか、枠に合わせて切り抜くかを用途に応じて選びます。

7. 自分の画像で再現するときの手順と限界

1. 画像ファイルの実寸を確認し、幅と高さを記録する。
2. 同じ画像を使う3つの枠を作り、寸法なし、CSSの比率指定、HTMLの寸法指定を比較する。
3. 各枠の表示幅をそろえ、画像のキャッシュを使わない条件や通信を遅くした条件で開く。
4. 画像の読み込みが未完了の時点で枠の高さと直後の文章の位置を記録する。
5. 完了後に同じ位置を記録し、枠の高さと文章位置がどれだけ変わったか計算する。

<img src="your-image.jpg" alt="画像で伝える内容"
     width="1672" height="941"
     style="display:block;width:100%;height:auto">

このコードは元画像の比率を保つ場合です。数値とパスは自分の画像に置き換えてください。別のCSSがaspect-ratioや固定高を指定している場合、表示はその設定にも影響されます。HTMLだけ見て終えず、ブラウザで適用されているスタイルも照合します。

今回記録した文章位置の移動量はCLSスコアではありません。CLSは表示領域や影響範囲などを使う指標で、ピクセルの移動量をそのままスコアへ読み替えられません。広告・フォント・実際の利用者の閲覧条件、SafariやFirefoxでの挙動は今回の測定対象外です。指標の説明はweb.devのCLS改善ガイドを参照してください。資料確認日：2026-09-29。