HTML画像のサイズ指定（width/height）の正しい書き方とレイアウト崩れを防ぐポイント

2026年5月16日

基礎知識

Webサイトを閲覧している際、画像の読み込みに合わせてコンテンツがガクッと動いてしまう現象を経験したことはないでしょうか。

この現象はレイアウトシフトと呼ばれ、ユーザーにストレスを与えるだけでなく、検索エンジンの評価にも悪影響を及ぼす可能性があります。

HTMLで画像を扱う際、width属性とheight属性を正しく指定することは、現代のWebフロントエンド開発において極めて重要な基本技術です。

かつてはCSSでサイズを制御すればHTML属性は不要と言われた時期もありましたが、現在のブラウザ仕様ではその常識が大きく変化しています。

本記事では、HTMLにおける画像サイズ指定の正しい書き方と、レイアウト崩れを防ぎパフォーマンスを最適化するためのポイントを詳しく解説します。

目次 [ close ]

HTML属性による画像サイズ指定の基本

HTMLで画像を表示する<img>タグには、width（幅）属性とheight（高さ）属性が用意されています。

これらの属性には、画像のオリジナルの解像度に基づく数値を指定するのが一般的です。

属性値の書き方と単位のルール

HTML属性として記述する場合、単位（px）を付けずに数値のみを記述するのが正しいルールです。

CSSでは「px」や「%」といった単位が必須ですが、HTML属性では暗黙的にピクセル単位として扱われます。

HTML

<!-- 正しい書き方：数値のみを指定 -->
<img src="example.jpg" width="800" height="600" alt="サンプル画像">

<!-- 誤った書き方：単位を付けてしまう -->
<img src="example.jpg" width="800px" height="600px" alt="サンプル画像">

上記の正しい例のように記述することで、ブラウザは画像ファイルをダウンロードする前に、その画像が占めるべき領域を計算できるようになります。

HTML属性とCSSプロパティの優先順位

HTML属性で指定したサイズと、CSSで指定したサイズが競合する場合、CSSでの指定が優先的に適用されます。

それならばHTML属性は不要ではないかと考える方もいるかもしれませんが、両者には役割の違いがあります。

HTML属性は「画像の元々の大きさをブラウザに伝える役割」を担い、CSSは「実際の表示画面に合わせたスタイルを適用する役割」を担います。

なぜサイズ指定が必須なのか：CLS対策の重要性

現代のWeb開発において、画像のwidthとheightを指定する最大の理由は、累積レイアウトシフト（CLS）を防止するためです。

CLS（Cumulative Layout Shift）とは、Webページの読み込み中に要素が予期せず移動する度合いを測定する指標です。

レイアウトシフトが起こるメカニズム

ブラウザがHTMLを解析する際、画像タグにサイズ指定がないと、画像が完全にダウンロードされるまでその大きさが分かりません。

そのため、画像がない状態でテキストなどの後続要素を先に配置してしまいます。

その後、画像が読み込まれたタイミングで、後続のテキストが下方向に押し出されるため、レイアウトが崩れてしまうのです。

アスペクト比の事前計算

最近の主要なブラウザは、HTML属性にwidthとheightが指定されていると、その値から画像のアスペクト比（縦横比）を自動的に算出します。

ブラウザはこのアスペクト比を利用して、画像が読み込まれる前からあらかじめプレースホルダーとしての領域を確保します。

これにより、画像読み込み完了後に周囲の要素が動くことを防ぐことができるのです。

レスポンシブデザインにおける画像サイズ指定

スマートフォンやデスクトップなど、多様な画面サイズに対応するレスポンシブデザインでは、画像の幅を可変にする必要があります。

この場合でも、HTML属性でのサイズ指定は省略すべきではありません。

CSSによるフルードイメージ設定

一般的に、レスポンシブデザインでは以下のようなCSSを記述して画像を伸縮させます。

CSS

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

この指定により、画像は親要素の幅を超えない範囲で、アスペクト比を維持したまま縮小されます。

HTML属性でwidth="1200" height="800"のように固定値を指定していても、このCSSがあれば画面幅に合わせて適切に表示されます。

aspect-ratioプロパティの活用

モダンブラウザでは、CSSのaspect-ratioプロパティを使用して縦横比を明示することも可能です。

CSS

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

しかし、すべての画像に対してCSSでアスペクト比を書くのは手間がかかるため、やはりHTML属性に本来のサイズを記述しておくのが最も効率的です。

画像サイズ指定に関連する便利な属性とテクニック

単にサイズを指定するだけでなく、関連する属性を組み合わせることでさらにパフォーマンスを高めることができます。

loading=”lazy”による遅延読み込み

遅延読み込み（Lazy Loading）を利用する際、サイズ指定は必須条件といえます。

サイズ指定がない状態で遅延読み込みを行うと、画像が現れるたびにページがガクガクと動き、ユーザー体験が著しく低下します。

HTML

<img src="photo.webp" width="800" height="450" alt="風景" loading="lazy">

このように記述することで、スクロールして画像が近づくまで読み込みを遅らせつつ、レイアウトの安定性も確保できます。

srcset属性とsizes属性の使い分け

高解像度のディスプレイや異なる画面サイズに対して最適な画像を提供するには、srcset属性を使用します。

属性名	役割
`src`	基本となる画像のパスを指定する
`width/height`	画像の本来のアスペクト比をブラウザに伝える
`srcset`	解像度や幅が異なる複数の画像候補をリストアップする
`sizes`	各画面幅において画像がどの程度の大きさで表示されるかを指示する

これらを組み合わせることで、スマホには小さな画像を、Retinaディスプレイには高精細な画像をといった具合に、最適なリソースを出し分けることができます。

画像表示を最適化するためのCSSテクニック

画像サイズを指定した上で、さらに意図通りの表示を実現するためのCSSプロパティを紹介します。

object-fitでトリミングを制御する

特定の枠内に画像を収めたいとき、アスペクト比が異なる画像が混ざると表示が崩れることがあります。

object-fit: cover;を使用すると、指定したサイズに合わせて画像を中央で切り抜き、枠いっぱいに表示させることができます。

CSS

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

この設定により、元画像の比率に関わらず、レイアウトの統一感を保つことが可能になります。

fetchpriority属性での読み込み優先度調整

2026年現在のモダンな最適化手法として、ファーストビューの画像にfetchpriority属性を付与することが推奨されています。

特に最大のコンテンツ描画（LCP）となる画像には、fetchpriority="high"を指定して、ブラウザに最優先で読み込むよう指示します。

HTML

<img src="hero-banner.jpg" width="1200" height="600" alt="メインビジュアル" fetchpriority="high">

この際も、正確なサイズ指定があることで、読み込み開始から表示完了までのプロセスがスムーズになります。

よくある間違いと注意点

正しい知識を持っていても、ついついやってしまいがちなミスがいくつか存在します。

インラインスタイルでのサイズ指定との混同

<img style="width: 500px;">のようにスタイルで指定することと、width="500"という属性は別物です。

インラインスタイルは見た目の制御には有効ですが、ブラウザによるアスペクト比の事前計算を最適化する上では、HTML属性の方が適しています。

実ファイルと異なる数値を指定する

画像ファイルそのもののピクセル数と、HTML属性で指定する数値が大きく乖離していると、ブラウザによる計算に矛盾が生じます。

常に「画像の元々のサイズ」をベースに数値を記述するのがベストプラクティスです。

もし表示上の大きさを変えたいのであれば、HTML属性は元のサイズのままにし、CSSで表示サイズを上書きしてください。

画像最適化のためのチェックリスト

これから記事やWebページを作成する際は、以下の項目を確認するようにしましょう。

すべての<img>タグにwidthとheight属性が付与されているか
属性値に「px」などの単位が含まれていないか
alt属性で適切な代替テキストが設定されているか
ファーストビュー以外の画像にはloading="lazy"が付与されているか
CSSでmax-width: 100%; height: auto;が設定されているか

これらの項目を遵守するだけで、Webサイトのコアウェブバイタル（Core Web Vitals）のスコアは劇的に改善されるはずです。

まとめ

HTMLにおける画像のサイズ指定は、単なる「大きさの決定」以上の意味を持っています。

width属性とheight属性を正しく記述することは、ブラウザに画像のアスペクト比を伝え、レイアウトシフト（CLS）を未然に防ぐための強力な手段です。

レスポンシブデザインが主流となった現代でも、この基本原則は変わりません。

むしろ、デバイスが多様化したからこそ、ブラウザが事前にレンダリング領域を確保するためのヒントを与える重要性は高まっています。

「画像には必ずサイズ属性を書く」という習慣を徹底し、ユーザーにとって快適で安定したWebサイトを提供していきましょう。

正しいマークアップの実践が、最終的にはサイトの信頼性とSEO評価の向上につながります。