画像タグに width と height を指定する理由と効果

画像タグに width と height を指定する理由

ウェブページを作る際に最も頻繁に使われるタグの一つが <img> です。しかし、画像を挿入する際に src のみを指定し、サイズ情報を省略するケースはまだよく見られます。

こうするとページ読み込み中にレイアウトが揺れたり、ユーザー体験やパフォーマンス指標に悪影響を与える可能性があります。今回の投稿では <img> タグに width と height を明示することがなぜ重要なのか、そして実際にどのようなメリットがあるのかを技術的観点から見ていきます。

1. レンダリング性能とページ読み込み速度

1-1. レイアウト安定性（Stable Layout）確保

ブラウザは HTML をパースしながらできるだけ早く画面をレンダリングします。このとき画像のサイズが分からないと、ブラウザはその要素が占める スペースを事前に計算できません。

その結果、画像がロードされる瞬間に既存コンテンツを押し出し、ユーザーが意図しない レイアウトシフト（Layout Shift） が発生します。

<img src="photo.jpg">

上記のようなケースでは、画像がロードされる前は高さがない要素として扱われ、画像がロードされた後に初めて実際の高さが反映されて画面が再配置されます。

1-2. Cumulative Layout Shift (CLS) 減少

CLS は Google Core Web Vitals の一つで、ページ読み込み中に発生する予期せぬレイアウト移動を数値化した指標です。

画像に width と height を指定すると、ブラウザは画像がロードされる前にも 正確なアスペクト比（aspect ratio） を計算して必要なスペースを事前に確保できます。

CLS の基準

CLS ≤ 0.1 : 良好

CLS ≥ 0.25 : 改善が必要

画像サイズを明示することは CLS を減らす最もシンプルで効果的な方法の一つです。

1-3. ネットワーク帯域幅に対する正確な理解

ここで一つ 誤解しやすい点 があります。

width と height を指定しても ダウンロードされる画像ファイルの容量が減るわけではありません。

ブラウザは依然としてオリジナル画像をそのままダウンロードします。
width / height 属性は レイアウト計算のための情報 です。

実際のネットワーク帯域幅の節約は次のような方法で行われます。

srcset / sizes の使用
サーバー側画像リサイズ
<picture> 要素の活用

ただし、画像サイズを明示すると レンダリングプロセスが安定化 され、ユーザーが感じる読み込み性能と視覚的完成度が大幅に向上します。

2. アクセシビリティ（Accessibility）面での利点

2-1. 予測可能な読み取りフロー

アクセシビリティの核心は alt 属性ですが、レイアウトの安定性も補助的な役割を果たします。

画像サイズが明確であればページ構造が予測可能になり、スクリーンリーダー使用時にもコンテンツフローが突然変わらず、ユーザー体験がより安定します。

width と height 自体がアクセシビリティの必須要素ではありませんが、 レイアウト安定性はアクセシビリティを間接的に向上 させます。

2-2. モバイル環境でのレイアウト予測性

モバイル環境では画面サイズが限定的であるため、小さなレイアウト変化もユーザーに大きく認識されます。

画像サイズが明示されていないと、

ロード中にコンテンツが押し出されたり
拡大/縮小時に要素間の隙間が急に変わる問題が発生する可能性があります。

画像の基本比率を明確にするとこうした不安定性を減らせます。

3. SEO（検索エンジン最適化）観点

CLSとSEO最適化の関係画像

検索エンジンはページの 読み込み性能とユーザー体験 を重要視します。

CLS が低いページ
初期レンダリングが安定したページ

こうした特性は検索エンジンに 質の高いページ として認識される可能性を高めます。

また、明確な画像構造は検索エンジンがページをより効率的に理解し、画像検索結果でもプラスの影響を与えることがあります。

4. 実際のコード例

4-1. サイズ未指定（問題例）

<img src="https://example.com/photo.jpg" alt="Beautiful scenery">

4-2. サイズ指定（推奨例）

<img
  src="https://example.com/photo.jpg"
  alt="Beautiful scenery"
  width="800"
  height="600">

注意事項

width と height は HTML 属性基準で ピクセル単位の値 を使用します。

レスポンシブレイアウトでは以下の CSS を併用するのが一般的です。

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

5. 実践ティップまとめ

状況	推奨方法
静的画像	`width` と `height` を明示
レスポンシブ画像	`width`/`height` + `max-width: 100%; height: auto;`
動的画像	サーバーでメタデータベースに基づきサイズを挿入
SVG	`viewBox` で比率を定義、必要に応じて `width`/`height` を追加

6. 結論

レイアウト安定性確保 → CLS 減少 → ユーザー体験向上
レンダリング予測可能性向上 → 実感性能改善
SEO にポジティブなシグナル提供

width と height を明示することは単なるコードスタイルの問題ではなく、 ウェブパフォーマンスと UX を同時に改善する基本原則です。

画像を追加する際にこの二つの属性を習慣的に入れるだけで、ウェブページの完成度は目に見えて変わります。

フロントエンドエンジニアの方に役立つ以下の投稿もぜひご覧ください！