HTML sizes属性の使い方を完全解説！srcsetと一緒に理解するレスポンシブ画像の基本
生徒
「HTMLで画像を表示するときにsizes属性って見かけたんですが、これは何をするものなんですか？」
先生
「sizes属性は、画面の大きさに応じてどの画像サイズを使うかをブラウザに伝えるためのHTML属性です。特にsrcset属性と一緒に使うことで、スマートフォンやパソコンに最適な画像を表示できます。」
生徒
「画像は一つだけ用意すればいいと思っていました。どうしてサイズを分ける必要があるんですか？」
先生
「とても大きな画像をスマートフォンに表示すると、読み込みが遅くなります。逆に小さすぎる画像を大きな画面で表示すると、画質がぼやけます。sizes属性とsrcset属性を使うと、画面に合った画像が自動で選ばれるようになります。」
生徒
「なるほど。画面サイズに合わせて画像を最適化できるということですね。」
先生
「その通りです。それではHTML画像タグのsizes属性とsrcset属性の仕組みを順番に見ていきましょう。」
1. HTMLのsizes属性とは何か
HTMLのsizes属性とは、ブラウザに対して「この画像は画面の中でどれくらいの幅で表示されるのか」を伝えるための属性です。主にHTMLのimgタグで使用され、srcset属性と組み合わせて使います。
Webサイトはスマートフォン、タブレット、ノートパソコン、デスクトップパソコンなど、さまざまな画面サイズで閲覧されます。そのため、同じ画像でも環境によって最適なサイズが変わります。sizes属性はその表示サイズを指定する役割があります。
簡単に説明すると、srcsetは「複数の画像を用意する」、sizesは「画面の大きさに応じた表示サイズを伝える」という関係になります。この二つを組み合わせることで、レスポンシブ画像という仕組みが完成します。
レスポンシブとは、画面サイズに応じてレイアウトや画像サイズが自動的に変化するWebデザインのことです。現在のWeb制作ではとても重要な技術であり、ページの表示速度やユーザー体験、SEO対策にも大きく影響します。
2. srcset属性との関係
HTMLのsrcset属性は、同じ画像の異なるサイズを複数指定できる属性です。ブラウザはその情報を見て、適切な画像を選択します。
ただし、srcsetだけでは「どのサイズの画像を使うべきか」を正しく判断できないことがあります。そこでsizes属性が必要になります。sizes属性を指定すると、ブラウザは表示領域の幅を理解し、最適な画像を選びやすくなります。
例えば、スマートフォンでは画面幅のほぼ全体に画像を表示し、パソコンでは半分の幅に表示するというケースがあります。このようなときにsizes属性を使います。
Webサイトの表示速度はSEO評価にも影響します。大きすぎる画像を読み込まないようにすることで、ページの表示速度を改善できるため、検索エンジン対策としても重要です。
3. sizes属性の基本的な書き方
sizes属性は、画面の幅と画像の表示サイズをセットで指定します。画面幅にはメディアクエリという仕組みを使います。これはCSSでもよく使われる条件指定の方法です。
例えば「画面幅が600ピクセル以下なら画像を100パーセント表示する」「それ以上なら50パーセント表示する」といった設定ができます。
次の例では、画面サイズによって画像の表示幅を変える基本的なHTMLコードを紹介します。
<img
src="/img/sample150-100.jpg"
srcset="/img/sample150-100.jpg 150w,
/img/sample120-120.jpg 120w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="レスポンシブ画像のサンプル">
ここで使われているvwという単位は、画面幅に対する割合を表します。100vwは画面の横幅すべて、50vwは画面の半分という意味になります。
4. 画面サイズごとに画像を切り替える例
次はもう少し分かりやすい例として、スマートフォンとパソコンで画像サイズを変えるHTMLコードを紹介します。
スマートフォンでは画面いっぱいに画像を表示し、パソコンでは少し小さめに表示する設定です。
<img
src="/img/sample150-100.png"
srcset="/img/sample150-100.png 150w,
/img/sample120-120.jpg 120w"
sizes="(max-width: 768px) 100vw, 40vw"
alt="画面サイズによって画像を最適化する例">
このように設定すると、スマートフォンでは大きめの画像が使われ、パソコンでは表示サイズに合った画像が選ばれます。
画像の読み込み量が減るため、Webページの表示速度が改善されるというメリットもあります。
5. pictureタグとsizes属性
HTMLではpictureタグを使って、さらに柔軟な画像表示を行うこともできます。pictureタグは複数の画像条件を指定できるHTMLタグで、レスポンシブ画像の設計によく使われます。
pictureタグの中でsourceタグを使い、srcsetやsizesを指定することで、より細かく画像を切り替えることができます。
<picture>
<source
srcset="/img/sample150-100.jpg 150w,
/img/sample120-120.jpg 120w"
sizes="(max-width: 600px) 100vw, 50vw">
<img src="/img/sample150-100.jpg" alt="pictureタグの画像例">
</picture>
pictureタグは、画面サイズだけでなく画像形式の切り替えにも使われます。例えば軽量な画像形式を優先するなど、パフォーマンス改善にも役立ちます。
6. sizes属性が重要な理由
sizes属性が重要な理由は、ブラウザが最適な画像を選ぶための判断材料になるからです。srcsetだけでは画像サイズの候補しか分かりませんが、sizesがあることで表示幅を理解できます。
もしsizesを指定しない場合、ブラウザは画像を画面幅いっぱいに表示すると仮定してしまうことがあります。その結果、本来より大きな画像が読み込まれ、ページの表示速度が遅くなる可能性があります。
Webサイトの表示速度はユーザー体験だけでなくSEO評価にも影響します。検索エンジンはページの表示速度をランキング要素の一つとして考慮しているため、画像の最適化は非常に重要です。
そのため、HTMLのimgタグでレスポンシブ画像を作る場合は、srcsetとsizesをセットで使うことが推奨されています。
7. 初心者が覚えておきたいポイント
HTMLのsizes属性は最初は少し難しく感じるかもしれませんが、考え方はとてもシンプルです。まず複数サイズの画像をsrcsetで用意し、その画像が画面の中でどれくらいの幅で表示されるかをsizesで指定します。
スマートフォンでは大きく表示し、パソコンでは少し小さく表示するなど、実際のレイアウトに合わせて設定すると理解しやすくなります。
画像の最適化はWeb制作において非常に重要なポイントです。特にモバイルユーザーが多い現在では、軽いページを作ることがユーザー満足度の向上につながります。
HTMLのimgタグ、srcset属性、sizes属性、そしてpictureタグを組み合わせることで、どの画面サイズでも見やすく高速に表示されるWebページを作ることができます。
まとめ
HTMLのsizes属性は、レスポンシブ画像を正しく表示するためにとても重要な役割を持っています。Webサイトではスマートフォン、タブレット、ノートパソコン、デスクトップパソコンなど、さまざまな画面サイズでページが表示されます。そのため、一つの画像だけを用意して表示すると、画面サイズによっては画像が大きすぎたり、小さすぎたりする問題が起こります。
そこで活躍するのがHTMLのimgタグで使用できるsrcset属性とsizes属性です。srcset属性では複数の画像サイズを用意することができ、sizes属性では画面サイズごとに画像がどのくらいの幅で表示されるのかをブラウザに伝えることができます。ブラウザはこの情報をもとに、最も適した画像ファイルを自動で選択して表示します。
例えばスマートフォンでは画面の横幅いっぱいに画像を表示し、パソコンでは画面の半分の幅で画像を表示するというようなケースがあります。このようなときにsizes属性を指定しておくことで、スマートフォンでは大きめの画像を使用し、パソコンでは必要以上に大きな画像を読み込まないようにすることができます。
画像のサイズを最適化することは、Webページの表示速度の改善にもつながります。表示速度が速いページはユーザーが快適に閲覧できるだけでなく、検索結果でも評価されやすくなる傾向があります。画像はWebページの中でも特にデータ容量が大きくなりやすいため、srcset属性とsizes属性を活用して適切な画像を読み込む設計がとても重要になります。
また、pictureタグを使うことで、より柔軟な画像の表示制御を行うこともできます。pictureタグの中にsourceタグを配置し、その中でsrcset属性やsizes属性を指定すると、画面サイズや条件によって読み込む画像をさらに細かく切り替えることが可能になります。これにより、スマートフォンでは軽量な画像を表示し、パソコンでは高画質の画像を表示するといった設計もできます。
HTMLのレスポンシブ画像を理解するためには、次の三つのポイントを覚えておくと分かりやすくなります。
一つ目は、srcset属性は複数サイズの画像を用意するための仕組みであるということです。二つ目は、sizes属性は画像が画面の中でどれくらいの幅で表示されるかをブラウザに伝える役割を持つということです。三つ目は、pictureタグを使うと画像の切り替え条件をさらに細かく設定できるということです。
この三つを組み合わせることで、どのデバイスでも見やすく、読み込みの速い画像表示を実現することができます。レスポンシブデザインのWeb制作ではとても重要な知識になるため、imgタグ、srcset属性、sizes属性、pictureタグの関係をしっかり理解しておくことが大切です。
初心者のうちはsizes属性の書き方が少し難しく感じるかもしれません。しかし実際の考え方はとてもシンプルです。まずsrcset属性で複数の画像サイズを用意します。そしてsizes属性で画面サイズごとの表示幅を指定します。そうすることでブラウザが最適な画像を自動的に選択してくれます。
Web制作ではページの表示速度、画像の画質、ユーザーの閲覧環境をすべて考えながら設計することが重要です。画像最適化の基本として、HTMLのsizes属性とsrcset属性を正しく使えるようになると、より実践的なレスポンシブWebデザインを作ることができるようになります。
レスポンシブ画像のサンプルプログラム
<img
src="/img/sample150-100.jpg"
srcset="/img/sample150-100.jpg 150w,
/img/sample120-120.jpg 120w"
sizes="(max-width: 768px) 100vw, 50vw"
class="img-fluid"
alt="レスポンシブ画像の例">
このHTMLコードでは、srcset属性で複数の画像サイズを指定しています。そしてsizes属性では、画面幅が一定以下の場合は画面幅いっぱいに画像を表示し、それ以上の画面では半分の幅で表示するように設定しています。ブラウザはこの情報を読み取り、画面サイズと表示幅を考慮して最も適した画像ファイルを選びます。
このようなレスポンシブ画像の設計は、スマートフォン利用者が多い現代のWebサイトではとても重要です。画像の容量を必要以上に大きくしないことで、通信量を減らし、ページの表示速度を改善することができます。
生徒
先生、今回の学習でHTMLのsizes属性の役割がよく分かりました。srcset属性だけではなく、sizes属性と組み合わせることでレスポンシブ画像が正しく表示されるという仕組みだったんですね。
先生
その通りです。srcset属性は画像の候補を用意する仕組みで、sizes属性は画像の表示幅をブラウザに伝える仕組みです。この二つがそろうことでブラウザは最適な画像を選択できます。
生徒
もしsizes属性を書かなかった場合はどうなりますか。
先生
その場合ブラウザは画像を画面いっぱいに表示すると想定してしまうことがあります。すると必要以上に大きな画像が読み込まれてしまい、ページの表示速度が遅くなる可能性があります。
生徒
なるほど。だから画像最適化のためにはsrcset属性とsizes属性をセットで使うことが大切なんですね。
先生
その理解で大丈夫です。さらにpictureタグを使えば画像形式や条件によって画像を切り替えることもできます。レスポンシブWebデザインでは画像の最適化はとても重要な技術なので、今回の内容をしっかり覚えておきましょう。
生徒
はい。imgタグ、srcset属性、sizes属性、pictureタグの関係を理解できたので、これからレスポンシブ画像を意識してHTMLを書くようにしてみます。
先生
とても良い姿勢です。画像表示を最適化できるようになると、Webページの品質が大きく向上します。これからもHTMLの基本構造とレスポンシブデザインを意識しながら学習を進めていきましょう。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
