HTML imgのwidth・height属性は必要？CLS対策を完全解説
生徒
「HTMLで画像を表示するとき、width属性とheight属性って必ず書かないといけないんですか？」
先生
「必須ではありませんが、書いておくことを強くおすすめします。特にCLS対策という観点からとても重要なんですよ。」
生徒
「CLS対策って何ですか？難しそうですね...」
先生
「CLSは、ページを見ているときに画像が突然表示されて、読んでいた場所がズレてしまう現象を防ぐための対策です。ユーザー体験とSEOの両方に影響するので、詳しく説明していきますね！」
1. imgタグのwidth属性とheight属性とは？
HTMLのimgタグで画像を表示する際、width属性とheight属性を使うことで、画像の横幅と高さを指定できます。width属性は画像の横幅、height属性は画像の縦の高さを表し、単位はピクセルで指定します。ピクセルとは、画面を構成する小さな点のことで、デジタル画像の最小単位です。
これらの属性は省略することもできますが、指定しておくことでブラウザが画像の表示領域を事前に確保できるようになります。つまり、画像が読み込まれる前から「ここにこのサイズの画像が入る」という情報をブラウザに伝えることができるのです。
<!-- width属性とheight属性を指定した例 -->
<img src="/img/sample150-100.jpg" alt="サンプル画像" width="150" height="100">
上記の例では、横幅150ピクセル、高さ100ピクセルの画像を表示しています。この指定により、ブラウザは画像の読み込みが完了する前から、適切なスペースを確保してページをレイアウトできます。
2. CLSとは？ユーザー体験を損なう原因
CLSは「Cumulative Layout Shift」の略で、日本語では「累積レイアウトシフト」と呼ばれます。これは、Webページを閲覧している最中に、コンテンツが予期せず移動してしまう現象のことです。例えば、記事を読んでいる途中で画像が突然読み込まれ、読んでいた文章が下にズレてしまった経験はありませんか？
このような予期しないレイアウトの変動は、ユーザーにとって非常にストレスになります。間違ったリンクをクリックしてしまったり、読んでいた場所を見失ったりする原因となります。GoogleはCLSをCore Web Vitalsという重要な指標の一つとして、SEO評価に含めています。
CLSが発生する主な原因は、画像のサイズが指定されていないことです。ブラウザは画像が読み込まれるまでそのサイズを知らないため、最初は高さゼロとしてレイアウトを作成します。その後、画像が読み込まれると、突然そのスペースが必要になり、他のコンテンツが押し下げられてしまうのです。
3. width属性とheight属性でCLS対策をする方法
CLS対策の最も基本的で効果的な方法は、すべての画像にwidth属性とheight属性を指定することです。これにより、ブラウザは画像が読み込まれる前から正確なサイズを知ることができ、適切なスペースを確保してレイアウトを作成します。
<!-- CLS対策をした画像の記述例 -->
<img src="/img/sample120-120.jpg" alt="正方形のサンプル画像" width="120" height="120">
<!-- 複数の画像を配置する場合 -->
<div>
<img src="/img/sample150-100.jpg" alt="横長の画像" width="150" height="100">
<img src="/img/sample150-100.png" alt="別の横長画像" width="150" height="100">
</div>
重要なポイントは、width属性とheight属性に指定する値は、実際の画像ファイルのサイズと同じアスペクト比（縦横比）にすることです。アスペクト比とは、画像の横幅と高さの比率のことで、例えば150×100の画像なら3対2の比率になります。
アスペクト比が異なる値を指定してしまうと、画像が歪んで表示されてしまいます。例えば、実際は150×100の画像に対してwidth="200" height="200"と指定すると、正方形に引き伸ばされて不自然な見た目になってしまいます。
4. CSSとの組み合わせでレスポンシブ対応する
スマートフォンやタブレットなど、さまざまな画面サイズに対応するレスポンシブデザインでは、画像のサイズを固定してしまうと不便です。そこで、HTML属性でアスペクト比を維持しながら、CSSで実際の表示サイズを調整する方法が推奨されています。
具体的には、HTMLのwidth属性とheight属性で元の画像サイズを指定し、CSSで「max-width: 100%」と「height: auto」を設定します。この組み合わせにより、画面サイズに応じて画像が自動的に縮小され、かつアスペクト比も維持されます。
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="/img/sample150-100.jpg" alt="レスポンシブ対応の画像" width="150" height="100">
このコードでは、画像の最大幅を親要素の100%までとし、高さは自動調整されます。スマートフォンのような小さな画面でも、画像が画面からはみ出すことなく、適切なサイズで表示されます。しかも、HTML属性で指定したサイズ情報により、CLS対策も万全です。
5. pictureタグでもwidth属性とheight属性は必要
HTMLには、画面サイズや解像度に応じて異なる画像を表示できるpictureタグがあります。pictureタグを使用する場合でも、内部のimgタグにwidth属性とheight属性を指定することが重要です。
pictureタグは、複数のsource要素と最後にimg要素を配置する構造になっています。どの画像が選択されても、基本的なアスペクト比は同じであることが前提となるため、imgタグにwidth属性とheight属性を指定すれば、すべての画像でCLS対策ができます。
<picture>
<source media="(min-width: 768px)" srcset="/img/sample150-100.jpg">
<source media="(max-width: 767px)" srcset="/img/sample120-120.jpg">
<img src="/img/sample150-100.png" alt="デバイスに応じた画像表示" width="150" height="100">
</picture>
この例では、画面幅768ピクセル以上の場合とそれ以下の場合で異なる画像を表示していますが、imgタグに指定したwidth属性とheight属性により、どちらの画像が表示される場合でもCLSを防ぐことができます。
6. 画像サイズの調べ方と指定方法
width属性とheight属性を正しく指定するには、実際の画像ファイルのサイズを知る必要があります。Windowsパソコンの場合、画像ファイルを右クリックして「プロパティ」を選択し、「詳細」タブを開くと、幅と高さが表示されます。Macの場合は、画像ファイルを右クリックして「情報を見る」を選択すると、サイズ情報を確認できます。
また、画像編集ソフトやオンラインツールを使用しても確認できます。PhotoshopやGIMPなどの画像編集ソフトで画像を開くと、画像サイズが表示されます。オンラインであれば、画像をアップロードするだけでサイズを教えてくれる無料ツールもたくさんあります。
画像サイズを確認したら、その値をそのままwidth属性とheight属性に指定します。例えば、画像サイズが800×600ピクセルであれば、width="800" height="600"と記述します。CSSで実際の表示サイズを調整する場合でも、この元のサイズを指定しておくことで、正確なアスペクト比が維持されます。
7. SEO効果とCore Web Vitals
GoogleはCore Web Vitalsという指標を使って、Webサイトのユーザー体験を評価し、検索順位に反映させています。Core Web Vitalsは、LCP（最大コンテンツの描画時間）、FID（初回入力遅延）、CLS（累積レイアウトシフト）の3つの指標で構成されています。
このうちCLSは、ページのレイアウトの安定性を測る指標です。CLSのスコアが悪いと、Googleからの評価が下がり、検索結果の順位が下がる可能性があります。逆に、すべての画像にwidth属性とheight属性を指定してCLS対策を行えば、スコアが改善され、SEO効果が期待できます。
CLS対策は、難しいプログラミング知識が不要で、HTMLの属性を追加するだけで実現できる簡単なSEO対策です。画像を追加するたびに必ずwidth属性とheight属性を記述する習慣をつければ、自然とSEOに強いWebサイトを作ることができます。
Google Search Consoleという無料ツールを使えば、自分のWebサイトのCore Web Vitalsのスコアを確認できます。定期的にチェックして、改善が必要な部分を見つけましょう。特にCLSの問題が報告された場合は、画像のサイズ指定を見直すことから始めるとよいでしょう。
8. 動的に生成される画像の場合の対処法
CMSやブログシステムを使っている場合、画像が自動的に挿入されることがあります。このような動的に生成される画像でも、width属性とheight属性を設定することは可能です。多くのCMSでは、画像をアップロードする際に自動的にサイズ情報を取得し、HTMLに反映してくれる機能があります。
WordPressを例にすると、メディアライブラリに画像をアップロードすると、自動的にサイズ情報が記録されます。投稿に画像を挿入すると、width属性とheight属性が自動的に追加されます。ただし、テーマやプラグインによっては、この機能が正しく動作しない場合もあるため、実際のHTMLを確認することをおすすめします。
自作のWebアプリケーションで画像を動的に表示する場合は、サーバーサイドで画像サイズを取得し、HTMLに出力する処理を実装します。PHPであればgetimagesize関数、JavaScriptであればImage オブジェクトを使って画像サイズを取得できます。
9. よくある間違いと注意点
width属性とheight属性を使用する際、初心者がやってしまいがちな間違いがあります。まず、CSSで画像サイズを指定しているから、HTML属性は不要だと考えてしまうケースです。しかし、CSSはHTMLが読み込まれた後に適用されるため、CSSだけではCLS対策として不十分です。
また、すべての画像に同じサイズを指定してしまう間違いもあります。実際の画像サイズと異なる値を指定すると、画像が歪んで表示されたり、意図しない余白が発生したりします。必ず画像ファイルの実際のサイズを確認してから、width属性とheight属性を指定しましょう。
さらに、古いブラウザでは、width属性とheight属性に単位を付けて「width="150px"」のように書いてしまうと正しく動作しないことがあります。HTML属性では単位を省略し、数値だけを記述するのが正しい書き方です。ピクセル単位であることは暗黙的に理解されます。
10. 実践チェックリストで確認しよう
width属性とheight属性を使ったCLS対策が正しく実装されているか、以下のチェックリストで確認しましょう。すべての項目をクリアすることで、ユーザー体験を向上させ、SEO効果も期待できるWebサイトになります。
CLS対策チェックリスト
- すべてのimgタグにwidth属性とheight属性を指定している
- 指定した値は実際の画像サイズと同じアスペクト比になっている
- width属性とheight属性に単位を付けず数値だけを記述している
- CSSで「max-width: 100%; height: auto;」を設定している
- pictureタグを使用している場合も、imgタグにサイズ指定をしている
- 動的に生成される画像でもサイズ情報が出力されている
- Google Search ConsoleでCLSスコアを定期的に確認している
これらのチェック項目を意識して画像を配置することで、ユーザーにとって快適なWebサイトを作ることができます。CLS対策は一度実装すれば継続的に効果が得られるため、新しい画像を追加するたびに必ずwidth属性とheight属性を指定する習慣を身につけましょう。
画像のサイズ指定は、見た目には分かりにくい部分ですが、ユーザー体験とSEOの両方に大きく影響します。今日から、すべての画像にwidth属性とheight属性を記述して、レイアウトシフトのない快適なWebサイトを目指しましょう。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
