画像の自動サイズ調整によって引き起こされるレイアウトシフトを修正する

画像の自動サイズ調整によって引き起こされるレイアウトシフトを修正する

たった1行のコードでCumulative Layout Shiftのスコアを台無しにする、よくあるCSSパターンがあります。私はこれを多くのサイトで見てきましたが、画像にwidthとheightを明示的に設定していてもレイアウトシフトを引き起こします。aspect-ratio CSSプロパティを設定しても修正できません。

この記事では、width: autoのCSSの問題に焦点を当てています。すべての画像とメディアのレイアウトシフトの原因（動画、iframe、アートディレクション、レスポンシブ画像、遅延読み込み、プレースホルダー）の完全なガイドについては、画像とメディアがレイアウトシフトを引き起こす仕組みを参照してください。

最終レビュー: 2026年3月 Arjen Karel

問題点

問題を引き起こすCSSは以下の通りです。これはレスポンシブ画像によく使用されます：

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

width: autoの宣言が問題です。これは、ブラウザがHTMLのwidth属性とheight属性から計算する幅を上書きします。つまり、ブラウザは画像を読み込む前に画像のスペースを確保できなくなります。画像はファイルがダウンロードされてデコードされるまで0x0ピクセルでレンダリングされ、その後フルサイズにスナップします。これがレイアウトシフトです。

なぜ発生するのか

2019年以降、モダンブラウザはHTMLのwidth属性とheight属性を内部のaspect-ratioプレゼンテーションヒントにマッピングしています。このヒントはCSSの詳細度がゼロです。いかなる作成者のCSSルールもこれに勝り、単純なimg { width: auto; }でさえも上書きされます。CSSでwidth: autoが設定されると、ブラウザはアスペクト比から予約済みの高さを計算するために必要な情報を失います。画像が読み込まれるまで、両方の寸法が不明になります。

これが、CSSでaspect-ratioを設定しても問題が解決しない理由です。width: autoを設定すると、ブラウザは読み込まれていない画像の幅を0として解決します。幅0から計算されたアスペクト比は、依然として高さ0を生成します。スペースの予約は、ブラウザが処理できる既知の寸法が少なくとも1つある場合にのみ機能します。

また、これは初回訪問者にのみレイアウトシフトを引き起こすため、気付きにくい問題です。すでにブラウザのキャッシュに画像がある場合、固有の寸法がすぐに利用可能になり、シフトは発生しません。開発者であるあなたは、おそらくこれを見ることはないでしょう。

発見方法

Lighthouseはウォームキャッシュを備えた高速なマシンで実行されるため、ラボテストでこれらの問題を捉えることはほぼ不可能です。これを検出する方法はReal User Monitoringを使用することです。RUMは、実際のデバイスを使用する実際の訪問者のCore Web Vitalsを追跡し、低速な接続での初回訪問時にのみ発生するシフトを含む、実際のCLSスコアを報告します。

2025 Web Almanacは、モバイルページの62%にまだサイズが指定されていない画像が少なくとも1つ存在すると報告しています。これらの多くはまさにこのCSSパターンによって引き起こされています。開発者はHTMLでwidthとheightを設定しましたが、グローバルなCSSルールがそれらをautoで上書きしています。

修正方法

width: autoを削除します。height: autoとmax-width: 100%は維持します。これはレイアウトシフトを引き起こさないレスポンシブ画像のための、web.devが推奨するパターンです：

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

このCSSを使用すると、ブラウザはHTMLのwidth属性を使用して画像の幅を決定し（max-widthによってコンテナの100%に制限されます）、height: autoはアスペクト比から正しい高さを計算します。画像が読み込まれる前にスペースが予約されます。レイアウトシフトは発生しません。

<img>タグにwidth属性とheight属性の両方が含まれていることを確認してください：

<img src="hero.jpg" width="800" height="450" alt="Description">

ぜひやってみてください：サイト上の任意の画像を右クリックし、「要素を検査」を選択して、計算済みスタイルでwidth: autoを確認してください。もし表示されていれば、何をすべきかはもうお分かりですね。

ヒント: その他の画像最適化技術については、Core Web Vitalsのために画像を最適化する方法と遅いヒーロー画像を修正する方法を参照してください。