エキスパート：実技問題（HTML作成、CSS読込と作成、画像の表示、JavaScriptの読込、レスポンシブWebデザイン対応）
あるWebページで、img要素にwidth属性とheight属性を指定せずに画像を配置したところ、画像の読み込み完了後にページ全体のレイアウトが大きくずれる現象が発生した。この問題を改善する対応として最も適切なものはどれか。
- Aimg要素にloading="lazy"属性を追加する
- Bimg要素にalt属性を追加する
- C画像をbackground-imageとしてdiv要素に指定する
- ✓img要素にwidth属性とheight属性（またはCSSのaspect-ratio）を指定し、画像の表示領域をあらかじめ確保する
解説
画像の縦横サイズを事前にブラウザへ伝えることで、読み込み前から表示領域が確保されレイアウトのずれ（レイアウトシフト）を防げる。alt属性はアクセシビリティ用でレイアウトには影響せず、loading="lazy"はむしろ表示タイミングをずらすため根本解決にならない。
根拠出題範囲：実技問題「画像の表示」