PageSpeed Insightsで「画像要素でwidthとheightが明示的に指定されていない」の項目についてこのページでは解説していきます。

画像の表示領域が事前確保されず、読み込み後にレイアウトがズレてCLS悪化の原因になります。

本記事では、該当画像の特定手順から、ケース別の改善方法、改善後の検証までをわかりやすく解説します。

「画像要素でwidthとheightが明示的に指定されていない」とは？

「画像要素でwidthとheightが明示的に指定されていない」とは、PageSpeed Insightsの診断項目で、<img>（または画像表示に関わる要素）に width と height 属性が書かれておらず、ブラウザが画像読み込み前に表示領域（アスペクト比）を確保できない状態を指します。

その結果、画像が読み込まれたタイミングで周囲の要素が押し下げられ、レイアウトがガクッと動く（レイアウトシフト）原因になります。

PageSpeed InsightsでURLを分析すると「パフォーマンスの問題を診断する＞インサイト」の箇所に表示されます。

上記画像の赤枠の部分でwidthとheightが指定されていない対象の画像が表示されます。

画像要素で幅と高さを明示的に設定すると、レイアウト シフトを減らして、CLS を改善できます。

PageSpeed Insightsでは上記のような指摘の記載があります。

width/heightが必要な理由

width/heightが必要な理由を解説していきます。

画像は「ダウンロード完了まで寸法が確定しない」

WebページはHTMLとCSSを先に解釈してレイアウト（配置）を決めますが、画像は別リクエストで取得されるため、読み込みが完了するまで実サイズが確定しないことがあります。

もしimg要素にwidth/heightが無いと、ブラウザは初期描画時に画像の占有スペースを正確に確保できず、仮の高さ（または0）で配置します。

後から画像が表示された瞬間に必要な高さが増え、下のテキストやボタンが押し下げられてレイアウトがガクッと動きます。

これがレイアウトシフトで、CLS悪化の典型原因です。

width/heightがあると、ブラウザが先にアスペクト比を計算して領域確保できる

imgにwidth/heightを明示すると、ブラウザは画像データを受け取る前から「縦横比（アスペクト比）」を計算でき、その比率に基づいて必要な表示領域を先に予約できます。

すると画像の読み込み中でもレイアウトが安定し、表示完了時に周囲の要素が押し出されにくくなります。

モダンブラウザではwidth/heightを手がかりに既定のアスペクト比を設定できるため、レイアウトシフト防止に直結します。

レスポンシブ表示でも、属性で比率を渡しつつCSSでmax-width:100%; height:auto;のように可変化すれば、崩さずCLSを改善できます。

指定がない場合の悪影響

特にUXなどユーザー操作の部分での影響や、CLSなどの数値への悪影響があります。

レイアウトシフトによるUXの低下

レイアウトシフトが起きると、ユーザーが「今まさに押そうとしている」ボタンやリンクの位置が、画像や広告の読み込み完了と同時にズレます。

その結果、本来は閉じるつもりのないバナーを押したり、購入や申込みの直前で別リンクを踏んだりと、誤タップや操作ミスが発生します。

それだけではなく、読んでいた文章がズレて読みにくい状況が発生するなどユーザーにとってはストレスに感じます。

こうなると、サイトの離脱率があがったり、サイトへの信頼がなくなる原因にもなります。

CLS数値の悪化

CLSは「予期しないレイアウトのズレ」がどれだけ起きたかを数値化する指標で、ズレが起きるほどスコアは悪化します。

画像にwidth/heightが無い、広告枠の高さが未確定、後からコンテンツを挿入するといった要因は、描画後に要素を押し下げやすく、CLSを押し上げる典型です。

widthとheightが未指定になっている箇所の確認方法

対象となる画像や動画を確認する方法の1つとして、PageSpeed Insightsでも簡単に確認が取れます。

上記画像の赤枠部分に未指定のファイルが出てくるので、対象となるファイルはここで確認しましょう。

また、DevToolsでソースの位置まで詳しく確認ができます。

DevToolsを開き＞パフォーマンス（上記画像の赤枠部分）を開くと下記のような画面になります。

Cumulative Layout Shift (CLS)のシフト回数（上記画像の黄色枠部分）をクリックすると、画像青枠の部分にレイアウトシフトになっている部分が一覧で表示されます。

ここのいずれかの部分をクリックすると、下記画像のようにソースの位置まで確認することができます。

より詳しく確認する場合は、DevToolsがおすすめです。

「画像要素でwidthとheightが明示的に指定されていない」の改善方法

「画像要素でwidthとheightが明示的に指定されていない」の改善は、要するに “画像が読み込まれる前に表示領域（アスペクト比）を予約する” ことです。

Googleでも、画像/動画には width と height を付ける、またはCSSの aspect-ratio 等で必要スペースを確保することが推奨されています。

<img> に “元画像の” width と height を入れる

<img>にwidth/height（元画像の寸法）を付けるのが、もっとも確実な改善策です。

画像が読み込まれる前でもブラウザが縦横比（アスペクト比）を推定でき、ページ内に必要な表示領域を先に確保できるため、読み込み後にテキストやボタンが押し下げられるレイアウトシフト（CLS悪化）を防げます。

ビフォー

<img src="/images/puppy.jpg" alt="..." />

アフター

<img src="/images/puppy.jpg" width="640" height="360" alt="..." />

レスポンシブでもOKにするCSS

レスポンシブ対応では、<img>に元画像のwidth/heightを付けたうえで、CSSで表示サイズを可変にするのが定石です。

例えば max-width:100%; height:auto; を指定すると、画面幅に合わせて画像は縮みつつ、縦横比は維持されます。

属性でアスペクト比の手がかりを渡しておけば、読み込み前から必要な高さが確保されるため、画像表示時に下の文章やボタンが押し下げられるレイアウトシフトを防げます。

CSSの記述例です。

img {
  max-width: 100%;
  height: auto;
}

web.devでも、レスポンシブ対応で width/height を省略してCSSだけにすると、領域確保ができずレイアウトがずれる、と説明されているためこの方法がおすすめです。

HTMLに書けない時はCSS aspect-ratioで枠を予約

どうしてもHTMLに手を入れられない場合は、CSSのaspect-ratioで“画像枠”を先に予約して、読み込み後に押し下げが起きない状態を作ります。

例えば aspect-ratio: 16 / 9; width: 100%; のように比率を指定すると、画像が来る前でも高さが計算され、レイアウトシフト（CLS悪化）を抑えられます。

比率と実画像が違うとトリミングが必要になるため、object-fit: cover; なども併用すると安全です。

.hero img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

この方法もweb.devで代替案として明確に提示されています。

<picture>を使っている場合は<source>側も確認する

<picture>を使っている場合、落とし穴は「<img>だけ直したつもりでも、<source>側の指定不足でレイアウトが不安定なまま」になりやすい点です。

web.devでも、picture内のsourceに対してもwidth/heightを設定できる（主要ブラウザが対応）とされており、アートディレクション（SPとPCで別画像・別比率）をしているページほど要注意です。

sourceとimgの両方で寸法（比率）を揃えて、読み込み前に枠を確保するのが安全策です。

下記のように、source と img の両方で寸法を持たせると安定しやすいです。

<picture>
  <source media="(max-width: 799px)" srcset="sp.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="pc.jpg" width="800" height="400" />
  <img src="pc.jpg" width="800" height="400" alt="..." />
</picture>

【番外編】実装パターンごとの直し方や注意点

CSS背景画像（background-image）でCLSが出る場合

背景画像は<img>のようにwidth/height属性で領域予約できないため、読み込み後に要素の高さが確定してコンテンツが押し下がるとCLSが悪化します。

対策は「背景を載せる要素（コンテナ）の高さ・比率を先に固定」すること。

aspect-ratioやmin-heightで枠を確保し、background-size: cover;等で表示を整えるとレイアウトシフトを抑えられます。

aspect-ratioで比率固定したソース例

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-image: url(/img/hero.jpg);
  background-size: cover;
  background-position: center;
}

min-heightで最低限の高さを予約したソース例

.hero {
  min-height: 320px; /* モバイルの最小保証など */
  background: url(/img/hero.jpg) center/cover no-repeat;
}

遅延読み込み（lazy-load）でズレる場合

この場合、lazy-load自体が悪いのではなく、「読み込み前に“空き枠”がない」状態で、画像が表示された瞬間にDOMの高さが増えることで、下の要素が動きレイアウトシフトになります。

特にファーストビュー付近・本文途中のカード型レイアウト・広告/埋め込みと混在する箇所で目立ちます。

対策は、imgのwidth/heightで比率を確定するか、CSSのaspect-ratio/min-heightで先に枠を予約し、スクロール中の“ガクッ”を防ぐことです。

上記で説明している内容で対策が可能です。

外部埋め込み（SNS、iframe内の画像、広告枠内の画像）

外部埋め込み（SNS投稿、iframe、広告）は表示タイミングや最終サイズが読み込み後に決まるため、先に枠を確保していないと下の本文やCTAが押し下げられてCLSが悪化します。

対策は「入る前提の固定枠」を用意し、広告が返らない場合も枠を潰さずプレースホルダーを表示してズレを防ぐことです。

iframe/埋め込みは「最終サイズ前提の枠」を先に作る

iframe/外部埋め込みは読み込み後に高さが決まるため、初期表示で枠がないと表示瞬間に下の要素を押し下げてCLSが悪化します。

対策は「最終サイズ前提の枠」を先に作ること。

コンテナにmin-heightやCSSのaspect-ratioで領域を予約し、iframeが来てもサイズ変動しない設計にします。

min-heightやCSSのaspect-ratioは、上記で説明している内容を参考に対策してください。

広告が返らない（No-fill）でも枠を消さない

広告は配信結果（埋まる・埋まらない、サイズ違い）を受け取るまで最終表示が確定しません。

ここで「広告が無い＝枠を消す」をやると、DOMの高さが急に縮み、本文・CTA・ナビなどが上に移動して“予期せぬズレ”としてCLSに計上されやすくなります。

web.devでも「広告が返らない場合はプレースホルダー表示などで予約スペースを折りたたまない」ことが推奨されています。

やることはシンプルで、以下の2点セットです。

1. 広告枠コンテナに min-height や固定サイズ（想定サイズ）で“予約枠”を作る
2. No-fillでもその枠は残し、スケルトン/空枠/代替枠で埋めて「潰さない」

こちらを実行して対策してみてください。

改修が終わったら計測・検証で確認

改修が終わったら、計測→原因再特定→再計測まで回して「本当にズレが消えたか」を確認します。

「widthとheightが未指定になっている箇所の確認方法」の箇所で説明している方法を参考に、正しく改善できているか確認をしましょう。

改善ができていれば作業は完了です。

よくある誤解・落とし穴

Q. CSSで width:100%; height:auto; を指定してるのに警告が出るのはなぜ？

CSSでwidth:100%; height:auto;を指定しても警告が出るのは、それが「表示後の伸縮ルール」であって、初期描画時に“必要な高さ（枠）”を確定させる情報になりにくいためです。

Lighthouseの指摘は主に、HTML側にwidth/heightが無くブラウザが画像のアスペクト比を事前計算できない状態を問題視します。

対策は<img width height>（元寸法）か、CSSのaspect-ratio等で枠予約を与えることです。

Q. width/heightを入れると“固定サイズ表示”にならない？

固定サイズ表示にはなりません。

width/heightは「表示サイズを固定する指定」ではなく、主に画像の縦横比（アスペクト比）＝読み込み前に確保すべき枠をブラウザに伝えるために使われます。

表示はCSSでいくらでも可変にでき、web.devもwidth/heightを付けた上でwidth:100%（またはmax-width:100%）; height:auto;でレスポンシブにする例を示しています。

Q. SVGも対象？

はい、SVGも対象になり得ます。

特に<img src="logo.svg">のようにSVGを画像として読み込む場合、width/height（または比率）が無いと、PSIで「画像要素には明示的な幅と高さがありません」として指摘されることがあります。

実際にSVGで警告が出る事例が報告されています。

対策は、<img>側にwidth/heightを付けて比率を確定するか、CSSのaspect-ratio等で枠を予約してレイアウトシフトを防ぐことです。

Q. すべての画像に必要？

“すべての画像に必須”というより、ユーザーのレイアウトを押し下げ得る画像は原則すべてに必要です。

web.devも「画像（と動画）には常にwidth/height属性を付ける」ことを基本方針として挙げています。

ただし例外的に、<img>ではなくCSSの背景画像などHTML属性が付けられないケースは、aspect-ratioやmin-heightで枠予約をします。

また広告・iframe埋め込みは別枠でサイズ予約が必要です。