HTML `` サイズを自在に指定・調整する完全ガイド

By /

HTML <img> サイズを自在に指定・調整する完全ガイド

Webサイトやアプリケーションにおいて、画像は視覚的な魅力を高め、情報を効果的に伝えるために不可欠な要素です。しかし、単に画像を配置するだけでは不十分です。ユーザーのデバイス、画面サイズ、ネットワーク環境は多様であり、それらに適切に対応するためには、画像のサイズを正確かつ柔軟に制御する必要があります。

この記事では、HTMLの<img>要素を用いた画像表示において、そのサイズを自在に指定・調整するためのあらゆる方法を、基礎から応用まで網羅的に解説します。HTML属性による基本的な指定から、CSSによる詳細な制御、レスポンシブデザインへの対応、パフォーマンス最適化、さらにはアクセシビリティへの配慮まで、画像を扱う上で知っておくべき知識を深掘りしていきます。約5000語の大ボリュームで、あなたの画像表示スキルを次のレベルへと引き上げる完全ガイドとなることを目指します。

1. なぜ画像のサイズ調整が重要なのか？

まず、なぜ画像のサイズ調整がそれほどまでに重要なのかを理解しましょう。

  • 視覚的な整合性: デザインにおいて、画像が意図したサイズで表示されることは非常に重要です。大きすぎるとレイアウトが崩れ、小さすぎると情報が伝わりにくくなります。適切なサイズは、サイト全体の見た目の美しさやプロフェッショナリズムに直結します。
  • ユーザー体験（UX）: ユーザーは様々なデバイス（スマートフォン、タブレット、デスクトップなど）でWebサイトを閲覧します。それぞれの画面サイズに最適化された画像サイズで表示することで、コンテンツが見やすくなり、快適なユーザー体験を提供できます。
  • パフォーマンス: Webサイトの読み込み速度は、ユーザーの離脱率や検索エンジンの評価に大きく影響します。本来表示するサイズよりもはるかに大きなサイズの画像をそのまま配信すると、無駄なデータ転送が発生し、ページの読み込みが遅くなります。適切なサイズの画像を配信することは、パフォーマンス最適化の基本です。
  • レスポンシブデザイン: 現代のWebサイトは、異なるデバイスで表示されてもレイアウトが崩れない「レスポンシブデザイン」が必須です。画像も画面サイズに応じて柔軟にサイズが変化する必要があります。
  • 帯域幅とコスト: 特にモバイルユーザーにとっては、データ通信量（帯域幅）が制限されている場合があります。不要に大きな画像をダウンロードさせることは、ユーザーの通信量を圧迫し、離脱の原因となりえます。また、Webサイト運営者側にとっても、データ転送量が増えればサーバーコストが増加する可能性があります。

これらの理由から、HTMLやCSSを使って画像のサイズを適切に指定・調整するスキルは、Web制作・開発において必須と言えます。

2. <img>要素の基本的な構造とHTML属性によるサイズ指定

HTMLで画像を埋め込む際に最も基本的な要素は<img>です。その基本的な構造と、HTML属性を使ったサイズ指定方法から始めましょう。

2.1. <img>タグの基本構造

<img>要素は、単独で閉じられる（空要素）タグです。必須の属性はsrcとaltです。

html
<img src="path/to/image.jpg" alt="画像の代替テキスト">

  • src属性: 表示したい画像ファイルのURL（絶対URLまたは相対URL）を指定します。
  • alt属性: 画像が表示されない場合（パスの誤り、ネットワークの問題、ユーザーが画像表示をオフにしている場合など）や、視覚障がいを持つユーザーがスクリーンリーダーを利用している場合に読み上げられる代替テキストを指定します。これはアクセシビリティのために非常に重要です。

2.2. width属性とheight属性

<img>要素には、画像の表示サイズを直接指定するためのwidth属性とheight属性が用意されています。

html
<img src="path/to/image.jpg" alt="風景写真" width="300" height="200">

この例では、画像の表示サイズを幅300ピクセル、高さ200ピクセルに指定しています。

指定できる単位:

HTML属性のwidthとheightで指定できる単位は、主に以下の2種類です。

  1. ピクセル (px): 単位を付けずに数値を指定した場合、デフォルトでピクセルと解釈されます。width="300"はwidth="300px"と同じ意味になります。
  2. パーセント (%): 親要素の幅/高さを基準としたパーセント値で指定します。width="50%"のように指定します。

“`html

猫の写真

犬の写真

“`

widthとheight属性指定の注意点:

  • 単位の省略: 数値のみを指定した場合、ピクセルと見なされます。明示的にpxを付けることも可能ですが、通常は省略されます。
  • パーセント指定: パーセント指定は、その画像の親要素のサイズに対する割合となります。親要素のサイズが明確でないと、意図したサイズにならない場合があります。
  • アスペクト比の維持: widthとheightの両方を指定した場合、元の画像のアスペクト比（幅と高さの比率）と指定したサイズのアスペクト比が異なると、画像が縦長や横長に歪んで表示されてしまいます。
    html
    <!-- 元画像が4:3（例: 800x600）の場合 -->
    <img src="image.jpg" alt="歪む例" width="400" height="400"> <!-- 1:1で表示しようとするため歪む -->
    これを防ぐためには、片方のみを指定し、もう片方をブラウザに自動計算させるか、両方を指定する場合は元の画像と同じアスペクト比で指定する必要があります。
    html
    <!-- アスペクト比を維持する例 -->
    <img src="image.jpg" alt="歪まない例" width="400"> <!-- heightは自動計算される -->
    <img src="image.jpg" alt="歪まない例" height="300"> <!-- widthは自動計算される -->
    <img src="image.jpg" alt="歪まない例" width="400" height="300"> <!-- 元が4:3なら歪まない -->
  • 表示サイズとファイルサイズ: HTML属性で指定するサイズは、あくまでブラウザ上での「表示サイズ」です。画像の「ファイルサイズ」自体が変わるわけではありません。したがって、大きな画像を小さなサイズで表示しても、ダウンロードされるデータ量は大きな画像のままです。パフォーマンスの観点からは、表示するサイズに近い実際の画像ファイルを用意することが望ましいです。

2.3. HTML属性指定のメリット・デメリット

メリット:

  • 簡単: 属性を追加するだけで手軽にサイズを指定できます。
  • 高速: ブラウザはHTMLを解析する際にこれらの属性を読み取り、すぐに表示領域を確保できるため、レイアウトシフト（ページの読み込み中に要素の位置がずれる現象）を防ぐのに役立つことがあります。特に幅と高さの両方を指定した場合、ブラウザは画像のためのスペースを前もって確保できます。

デメリット:

  • スタイルの分離: スタイル指定がHTMLの中に混在するため、HTML構造とデザインが分離されず、コードの管理が煩雑になります。Webサイト全体で同じスタイルを適用したい場合などに非効率です。
  • 柔軟性に欠ける: CSSと比較すると、指定できる単位や詳細な制御（max-width、object-fitなど）に限界があります。特に複雑なレイアウトやレスポンシブデザインには向いていません。
  • 優先度: CSSで同じ要素に対してサイズが指定されている場合、通常はCSSの指定が優先されます。したがって、HTML属性で指定してもCSSで上書きされてしまうことがあります。

現代のWeb開発においては、画像サイズを含むスタイルに関する指定は、基本的にCSSで行うことが推奨されています。HTML属性は、特定の場面（例: エディタで挿入される場合、古いコードベース）を除き、限定的な使用にとどめるのが一般的です。ただし、後述するパフォーマンスの観点から、widthとheight属性を本来の画像サイズで記述しておくことは、レイアウトシフトを防ぐために有効な場合があります。これは指定したサイズで表示するためではなく、ブラウザにアスペクト比を伝えるためのテクニックです。

3. CSSによる画像サイズ指定の基礎

HTML属性でのサイズ指定は限定的であり、現代的なWebデザインではCSSを用いるのが主流です。CSSは、スタイルをHTML構造から分離し、より柔軟かつ詳細なサイズ制御を可能にします。

3.1. なぜCSSを使うのか？

  • 構造とデザインの分離: HTMLはコンテンツの構造、CSSはコンテンツの見栄えを担当するという役割分担を明確にすることで、コードが管理しやすくなります。
  • 再利用性: スタイルシート（.cssファイル）に記述したスタイルは、複数のHTMLページや複数の要素に適用できます。
  • 詳細な制御: HTML属性では指定できない多様な単位やプロパティ（max-width, min-width, object-fitなど）を利用できます。
  • メディアクエリ: 画面サイズなどに応じて異なるスタイルを適用するレスポンシブデザインに必須です。

3.2. CSSのセレクタ

どの要素にスタイルを適用するかを指定するためにセレクタを使用します。

“`css
/ 要素セレクタ: すべての img 要素に適用 /
img {
width: 100px;
height: auto;
}

/ クラスセレクタ: class=”responsive-image” の img 要素に適用 /
.responsive-image {
max-width: 100%;
height: auto;
}

/ IDセレクタ: id=”main-logo” の img 要素に適用 /

main-logo {

width: 200px;
}
“`

3.3. widthプロパティとheightプロパティ

CSSのwidthおよびheightプロパティは、HTML属性と同様に要素の幅と高さを指定しますが、より多くの単位と値を使用できます。

“`css
img {
width: 250px; / 固定ピクセル /
height: 150px;
}

.flexible-img {
width: 80%; / 親要素の幅に対するパーセント /
height: auto; / 高さはアスペクト比を維持して自動計算 /
}
“`

指定できる単位:

CSSでは、非常に多様な単位でサイズを指定できます。

  • 絶対単位:
    • px (ピクセル): 最も一般的。デバイスの物理的なピクセルには直接対応しないが、基準となる単位。
    • pt (ポイント): 1ポイントは1/72インチ。印刷媒体でよく使われる。
    • cm (センチメートル), mm (ミリメートル), in (インチ): 物理的な長さの単位。スクリーン表示にはあまり使われない。
    • pc (パイカ): 1パイカは12ポイント。
  • 相対単位:
    • % (パーセント): 親要素や包含ブロックに対する割合。
    • em: 親要素のフォントサイズに対する割合（例: 1.5emは親要素のフォントサイズの1.5倍）。注意点として、width/heightにおけるemは要素自身のフォントサイズではなく、親要素のフォントサイズを基準とします。
    • rem: ルート要素（<html>）のフォントサイズに対する割合。emよりも予測しやすい。
    • vw (viewport width): ビューポート（ブラウザの表示領域）の幅に対する割合（例: 50vwはビューポート幅の50%）。
    • vh (viewport height): ビューポートの高さに対する割合（例: 100vhはビューポート高さの100%）。
    • vmin: ビューポートの幅と高さのうち、小さい方に対する割合。
    • vmax: ビューポートの幅と高さのうち、大きい方に対する割合。
    • ex: 現在のフォントの’x’の高さ。
    • ch: 現在のフォントの’0’（ゼロ）の幅。

画像サイズ指定でよく使われるのは、px, %, vw, vh, em, remあたりです。

autoの値:

widthまたはheightにautoを指定すると、ブラウザが自動的にそのサイズを計算します。

  • width: auto; height: auto;: 元の画像サイズで表示しようとします（ただし、親要素に収まらない場合ははみ出す可能性があります）。
  • width: [指定した値]; height: auto;: 幅を指定し、高さはアスペクト比を維持するように自動計算されます。これが最も一般的な使い方の一つです。
  • width: auto; height: [指定した値];: 高さを指定し、幅はアスペクト比を維持するように自動計算されます。

“`css
img {
width: 300px;
height: auto; / 幅を300pxに固定し、高さは自動調整 /
}

.full-width-img {
width: 100%;
height: auto; / 親要素の幅いっぱいに広げ、高さは自動調整 /
}
“`

3.4. max-widthプロパティ

CSSで画像サイズを調整する上で、最も重要と言えるプロパティの一つがmax-widthです。このプロパティは、要素の最大幅を指定します。特にレスポンシブデザインにおいて、画像が親要素や画面からはみ出すのを防ぐために不可欠です。

css
img {
max-width: 100%; /* 画像が親要素の幅を超えないようにする */
height: auto; /* アスペクト比を維持 */
}

このスタイルを<img>要素に適用すると、画像は以下のようになります。

  • 画像の本来の幅が親要素の幅より小さい場合：本来のサイズで表示されます（max-width: 100%は最大幅の制限なので、本来の幅を超えて大きくはなりません）。
  • 画像の本来の幅が親要素の幅より大きい場合：親要素の幅いっぱいに縮小されます（max-width: 100%により、親要素の幅を超えないように制限されるため）。

そして、height: auto;を指定することで、幅が変化してもアスペクト比が維持され、画像が歪むのを防ぎます。

この「max-width: 100%; height: auto;」という組み合わせは、レスポンシブ画像を実装するための最も基本的かつ強力なテクニックです。画面サイズが小さくなっても画像が親要素やビューポートからはみ出さず、適切に縮小されます。

さらに、特定の最大サイズを指定したい場合は、パーセント以外の単位も使用できます。

css
.max-limited-img {
max-width: 600px; /* 最大幅を600pxに制限 */
width: 100%; /* 親要素の幅いっぱいに広げようとする */
height: auto; /* アスペクト比を維持 */
}

この例では、画像は親要素の幅の100%になろうとしますが、最大でも600pxまでしか大きくなりません。親要素の幅が400pxなら画像は400px幅になり、親要素の幅が800pxなら画像は600px幅になります。

3.5. min-widthプロパティ

max-widthとは逆に、要素の最小幅を指定するのがmin-widthプロパティです。

css
img {
min-width: 200px; /* 画像の最小幅を200pxに制限 */
width: 100%; /* 親要素の幅に合わせようとする */
height: auto;
}

このスタイルを適用すると、画像は親要素の幅の100%になろうとしますが、親要素の幅が200px未満になっても、画像の幅は200px未満にはなりません。これにより、画面が非常に小さくなっても画像が小さくなりすぎるのを防ぐことができますが、親要素や画面からはみ出す可能性も出てくるため、使用には注意が必要です。max-width: 100%と併用することも可能です。

4. アスペクト比の制御

画像サイズを指定する際に、アスペクト比（幅と高さの比率、例: 16:9, 4:3, 1:1）をどのように扱うかは非常に重要です。アスペクト比が維持されないと、画像が歪んで表示され、見た目が損なわれます。

4.1. アスペクト比とは

アスペクト比は、画像の幅と高さの比率を示す値です。例えば、幅1600px、高さ900pxの画像のアスペクト比は16:9（または1.777…）です。幅600px、高さ800pxの画像のアスペクト比は3:4（または0.75）です。

4.2. 画像サイズ指定とアスペクト比

前述したように、HTML属性やCSSのwidthとheightプロパティで両方を指定した場合、指定したサイズのアスペクト比と元の画像のアスペクト比が異なると画像は歪みます。

“`html

歪んだ画像
“`

アスペクト比を維持しつつサイズを調整するには、通常はwidthまたはheightのどちらか一方を指定し、もう片方をautoにしてブラウザに自動計算させます。

“`html

アスペクト比維持
“`

これはレスポンシブデザインにおける「max-width: 100%; height: auto;」の基本的な考え方でもあります。幅（max-width: 100%によって計算される実際の幅）が決まれば、高さはheight: autoによってアスペクト比に従って自動的に決まります。

4.3. CSS object-fit プロパティ

object-fitプロパティは、コンテナ（<img>要素自体）の中に、画像や動画などの置換要素（replaced element）がどのように収まるかを指定します。特に、widthとheightの両方を指定してコンテナサイズを固定しつつ、アスペクト比を崩さずに画像を収めたい場合に非常に役立ちます。

object-fitは以下の値を取ります。

  • fill (デフォルト): コンテナいっぱいに引き伸ばされます。アスペクト比は維持されないため、画像は歪む可能性があります。
  • contain: 画像のアスペクト比を維持したまま、コンテナ内に収まるようにサイズが調整されます。コンテナ内に余白ができる場合があります。
  • cover: 画像のアスペクト比を維持したまま、コンテナ全体を覆うようにサイズが調整されます。画像の一部がコンテナからはみ出して表示されなくなる（トリミングされる）場合があります。
  • scale-down: containとnoneを比較し、結果的に表示サイズが小さくなる方を採用します。
  • none: 画像の元のサイズ（またはwidth/heightが指定されていればそのサイズ）で表示され、コンテナからはみ出す部分は切り取られます。

使用例:

コンテナサイズを300px x 200pxに固定し、その中に画像を収めたい場合。

“`html

正方形の画像

“`

object-fit: cover;は、例えばサムネイルリストなどで、全て同じサイズのコンテナ内に画像の一部を切り取って表示したい場合などに非常に便利です。object-fit: contain;は、画像全体を必ず表示させたいが、コンテナサイズが固定されている場合などに使えます。

また、object-positionプロパティを使用すると、object-fitで調整された画像のどの部分を中心に表示するかを制御できます。

css
.object-fit-example {
object-fit: cover;
object-position: center top; /* 画像の上端を中心に表示 */
/* object-position: 50% 50%; (デフォルト) */ /* 中央を中心に表示 */
/* object-position: 0 0; */ /* 左上を中心に表示 */
}

4.4. CSS aspect-ratio プロパティ

aspect-ratioプロパティは比較的新しいCSSプロパティで、要素の望ましいアスペクト比を直接指定できます。これにより、幅や高さが動的に変化する場合でも、常に指定したアスペクト比を維持することができます。

“`css
.aspect-ratio-box {
width: 100%; / 幅は親要素に合わせる /
aspect-ratio: 16 / 9; / アスペクト比を16:9に固定 /
/ aspect-ratio: 4 / 3; /
/ aspect-ratio: 1 / 1; /
/ aspect-ratio: 1.5; (幅に対する高さの比率、1.5は3/2と同じ意味) /
}

.aspect-ratio-box img {
display: block; / 不要な隙間を防ぐ /
width: 100%;
height: 100%;
object-fit: cover; / または contain, fill など /
}
“`

この例では、.aspect-ratio-boxというコンテナ要素を作成し、そのアスペクト比を16 / 9に指定しています。コンテナの幅が変化すると、高さは自動的に16:9のアスペクト比を維持するように調整されます。そして、その中の<img>要素をwidth: 100%; height: 100%; object-fit: cover;とすることで、コンテナ全体を画像で覆うように表示できます。

aspect-ratioプロパティの大きな利点は、特に画像の遅延読み込み（Lazy Loading）を行う際に、画像が読み込まれる前にそのための領域を正確なアスペクト比で確保できる点です。これにより、画像が表示されたときのレイアウトシフトを効果的に防ぐことができます。従来のPadding Hackなどを用いることなく、直感的にアスペクト比を指定できるため、現代的なWeb開発において推奨される手法です。

5. レスポンシブデザインにおける画像サイズ調整

レスポンシブデザインでは、単一の画像が様々な画面サイズや解像度に対応する必要があります。これには、CSSメディアクエリ、そしてHTMLのsrcset属性や<picture>要素が重要な役割を果たします。

5.1. レスポンシブデザインの基本

レスポンシブデザインの目標は、あらゆるデバイスでコンテンツが見やすく、使いやすいように表示することです。画像に関しては、以下の点を考慮する必要があります。

  • 画面サイズに応じて適切なサイズで表示されること（小さすぎず、大きすぎず）。
  • 高解像度ディスプレイ（Retinaディスプレイなど）で鮮明に表示されること。
  • 帯域幅が制限された環境（モバイル回線など）では、より小さいサイズの画像が読み込まれること。

5.2. CSSメディアクエリ (@media)

メディアクエリを使用すると、ビューポートの幅、高さ、解像度など、さまざまな条件に基づいてスタイルを適用できます。画像サイズを画面サイズに応じて変更する基本的な方法です。

“`css
/ デフォルトスタイル (モバイルファースト) /
img {
max-width: 100%;
height: auto;
}

/ 画面幅が600px以上の場合に適用 /
@media (min-width: 600px) {
img {
width: 500px; / PC表示では最大幅を500pxに制限 /
/ max-width: 100%; は維持されるので、600px未満の親要素では親要素幅に /
/ height: auto; は変わらず維持 /
}
}

/ 画面幅が900px以上の場合に適用 /
@media (min-width: 900px) {
img {
width: 700px; / さらに広い画面では最大幅を700pxに /
}
}
“`

この例では、モバイルではmax-width: 100%で親要素いっぱいに表示しつつ、画面幅が広がるにつれて画像の最大表示幅を制限しています。これにより、広い画面で画像が不必要に大きくなりすぎるのを防ぎます。

メディアクエリは画像サイズだけでなく、object-fitやobject-positionといった他のプロパティも画面サイズによって変更したい場合に有用です。

“`css
.gallery-item img {
width: 100%;
height: 200px; / モバイルでは高さ固定 /
object-fit: cover;
}

@media (min-width: 768px) {
.gallery-item img {
height: 300px; / タブレット以上では高さを変更 /
object-position: center; / 位置も調整 /
}
}
“`

5.3. srcset属性と<picture>要素

メディアクエリによるCSSでのサイズ調整は表示サイズを制御しますが、読み込む画像ファイル自体は常に同じです。これは、高解像度ディスプレイや狭帯域幅環境では効率的ではありません。そこで登場するのが、ブラウザに最適な画像ファイルを選択させるHTMLの機能です。

srcset属性:

srcset属性は、複数の解像度や幅の画像ファイル候補をブラウザに提供します。ブラウザは、ユーザーのデバイスのディスプレイのピクセル密度や、画像の表示サイズに基づいて、最適な画像を選択して読み込みます。

srcset属性には、画像ファイルのパスと、その画像がどのような特性を持つかを示す記述子（descriptor）のリストを指定します。

記述子には以下の2種類があります。

  1. 密度記述子 (x): ディスプレイのピクセル密度（例: 1x, 2x, 3x）。2xは標準的な解像度（1x）の2倍のピクセル密度を持つディスプレイ向けであることを示します。

    html
    <img src="image-standard.jpg"
    srcset="image-highres.jpg 2x,
    image-retina.jpg 3x"
    alt="風景">
    この例では、標準ディスプレイではimage-standard.jpg（srcで指定）、2倍のピクセル密度を持つディスプレイではimage-highres.jpg、3倍のディスプレイではimage-retina.jpgが読み込まれる可能性があります。src属性は、srcsetをサポートしない古いブラウザのためのフォールバックです。

  2. 幅記述子 (w): 画像ファイルの実際の幅（ピクセル数）を示します。この記述子を使う場合、ブラウザが画像の表示サイズを考慮して最適な画像を選択できるよう、sizes属性も併せて指定する必要があります。

    html
    <img src="image-large.jpg"
    srcset="image-small.jpg 480w, /* 実際の幅 480px */
    image-medium.jpg 800w, /* 実際の幅 800px */
    image-large.jpg 1200w" /* 実際の幅 1200px */
    sizes="(max-width: 600px) 480px, /* ビューポート幅が600px以下なら、画像は480px幅で表示されると想定 */
    (max-width: 900px) 800px, /* ビューポート幅が900px以下なら、画像は800px幅で表示されると想定 */
    1200px" /* それ以外（ビューポート幅900px超）なら、画像は1200px幅で表示されると想定 */
    alt="様々なサイズの画像">

    • srcset: 画像ファイルの候補と、それぞれの実際の幅を[URL] [幅]wの形式でカンマ区切りで指定します。
    • sizes: メディア条件（メディアクエリのようなもの）と、その条件が一致した場合に画像が表示される幅の候補をカンマ区切りで指定します。最後の値はデフォルト（条件に一致しない場合）です。表示される幅はCSSのwidthやmax-widthによって決まる幅と関連します。

    ブラウザは、sizes属性を見て「この画像は現在のビューポートサイズで約〇〇px幅で表示されるだろう」と予測し、srcset属性の候補の中から、その表示幅に最も適した（表示幅に対してピクセル密度が1x以上になる最も小さい）幅の画像を選択します。

    w記述子とsizes属性の組み合わせは、レスポンシブデザインにおいて最も強力な画像最適化手法の一つです。デバイスの画面サイズや解像度、さらにはネットワーク状況を考慮して、最小限のデータ量で最高の品質の画像を表示できます。

<picture>要素:

<picture>要素は、srcset属性よりもさらに柔軟な画像選択を可能にします。特に、アートディレクション（画面サイズによって画像をトリミングしたり、全く異なる構図の画像を表示したりすること）や、異なる画像フォーマット（WebP, AVIFなど）に対応したい場合に利用します。

<picture>要素は、一つ以上の<source>要素と、最後にフォールバックとしての<img>要素を含みます。ブラウザは<source>要素を上から順に評価し、最初に条件に合うものを見つけたらその画像を読み込みます。どの<source>要素にも一致しない場合や、<picture>要素をサポートしないブラウザでは、<img>要素の画像が読み込まれます。

“`html


風景 “`

  • <source>要素:
    • srcset: 画像ファイルの候補を指定します（<img>のsrcsetと同様にw記述子やx記述子を使用可能）。
    • media: メディアクエリを指定します。このメディアクエリがtrueの場合に、この<source>要素の画像が候補になります。アートディレクションで特定の画面サイズに対して異なる画像を表示したい場合に利用します。
    • type: 画像フォーマットのMIMEタイプを指定します（例: image/webp, image/avif, image/jpeg, image/png）。ブラウザがそのフォーマットをサポートしているかどうかの判断に使われます。新しいフォーマット（WebP, AVIF）を優先的に読み込ませつつ、非対応ブラウザのためにJPEGなどをフォールバックとして用意する際に便利です。
    • sizes: srcsetでw記述子を使う場合に必須です（<img>のsizesと同様）。

<picture>要素を使うことで、「特定の画面サイズで異なる画像を使い分ける（アートディレクション）」や「新しい画像フォーマットをサポートするブラウザにはそのフォーマットの画像を、サポートしないブラウザには互換性のあるフォーマットの画像を配信する」といった高度なレスポンシブ画像戦略が可能になります。

6. パフォーマンスと画像サイズ

画像のサイズ調整は、Webサイトのパフォーマンスに直結する重要な要素です。不適切な画像サイズは、ページの読み込み速度を著しく低下させ、ユーザー体験を損なう可能性があります。

6.1. 大きな画像をそのまま使うことのデメリット

たとえCSSで小さく表示しても、元の画像ファイルが非常に大きい場合、以下のようなデメリットがあります。

  • ダウンロード時間の増加: ファイルサイズが大きいほど、ダウンロードにかかる時間が長くなります。これは特にモバイル環境や低速なネットワーク環境で顕著です。
  • 帯域幅の無駄: 必要以上のデータをユーザーにダウンロードさせることになります。
  • ブラウザの処理負荷: ブラウザは大きな画像をダウンロードした後、指定された表示サイズに合わせて縮小処理を行う必要があります。これはCPUリソースを消費し、ページのレンダリング速度に影響を与える可能性があります。
  • ファーストビュー表示遅延: 重要なコンテンツである画像が表示されるまでの時間が長くなり、ユーザーを待たせてしまいます。

6.2. 適切な画像サイズの選択

パフォーマンスを考慮した画像サイズ調整には、以下のステップが考えられます。

  1. デザイン上の最大表示サイズを把握する: その画像がWebサイト上で最大でどのくらいのサイズで表示されるかを把握します（例えば、コンテンツ領域の幅いっぱい、サイドバー内、サムネイルなど）。
  2. その表示サイズに合わせて画像ファイルを作成する: 画像編集ソフトなどを使用し、ステップ1で把握した最大表示サイズに近い寸法の画像ファイルを書き出します。例えば、最大表示サイズが800px幅なら、画像ファイルの幅も800px程度にする、といった具合です。高解像度ディスプレイ向けに2倍サイズ（1600px幅）も用意しておくと、後述のsrcsetで活用できます。
  3. 画像最適化ツールを利用する: 作成した画像ファイルを、JPEG Mini, TinyPNG, Squooshなどの画像最適化ツールに通し、画質を維持しつつファイルサイズを圧縮します（Lossy/Lossless圧縮）。
  4. srcset/<picture>要素を活用する: 異なる表示サイズや解像度、または異なるフォーマット（WebP, AVIFなど）の画像を複数用意し、srcset属性や<picture>要素を使ってブラウザに最適なものを選択させます。

6.3. 次世代画像フォーマット

WebPやAVIFのような新しい画像フォーマットは、従来のJPEGやPNGと比較して、同等またはそれ以上の画質でファイルサイズを大幅に削減できる可能性があります。

  • WebP: Googleが開発したフォーマットで、JPEGやPNGよりも高い圧縮率を持ち、透過やアニメーションもサポートします。多くのモダンブラウザでサポートされています。
  • AVIF: AV1動画コーデックをベースにした新しいフォーマットで、WebP以上の圧縮率を持つとされています。サポートブラウザは増えてきていますが、まだ全ての主要ブラウザで完全にサポートされているわけではありません。

これらのフォーマットを使用する場合、<picture>要素と<source type="...">を組み合わせて、サポートしているブラウザには新しいフォーマットを、サポートしていないブラウザにはJPEGやPNGなどの代替フォーマットを配信するのが一般的な手法です。

html
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="代替テキスト">
</picture>

6.4. 遅延読み込み (Lazy Loading)

Webページの表示速度を改善する手法の一つに、画像の遅延読み込み（Lazy Loading）があります。これは、画面上の見えている範囲（ビューポート）やその近くにある画像のみを、ページの読み込み時に即座にダウンロードし、スクロールして画像が表示範囲に入ってきそうになったら初めてダウンロードを開始するという仕組みです。これにより、初期表示に必要なデータ量を減らし、ページの応答性を向上させることができます。

  • loading属性: HTMLの<img>要素には、遅延読み込みをブラウザに指示するためのloading属性があります。

    html
    <img src="image.jpg" alt="遅延読み込みされる画像" loading="lazy">

    • loading="lazy": ブラウザのビューポートから一定距離にある場合に画像を読み込みます。
    • loading="eager": 画像を即座に読み込みます（デフォルトの動作）。
    • loading="auto": ブラウザに最適な動作を任せます。

    loading="lazy"属性は非常に簡単に遅延読み込みを実装できますが、すべてのブラウザでサポートされているわけではありません。しかし、主要なモダンブラウザ（Chrome, Firefox, Edge, Operaなど）では広くサポートが進んでいます。

  • JavaScriptライブラリ: より古いブラウザを含む幅広い環境で遅延読み込みを実装したい場合は、JavaScriptライブラリ（例: Layzr.js, Lozad.js, unveil.jsなど）を利用する方法もあります。これらのライブラリは、通常、画像のsrc属性を別の属性（例: data-src）に保持しておき、画像がビューポートに入ったかを監視して、入ったらsrc属性に値をセットするという仕組みで動作します。

遅延読み込みを実装する際に、前述のCSS aspect-ratioプロパティで画像のための領域を事前に確保しておくと、画像が読み込まれて表示されたときにレイアウトがずれる（レイアウトシフト）のを防ぐことができます。

“`html


遅延読み込み画像

“`
このようにコンテナ側でアスペクト比を固定することで、画像の読み込み遅延によるレイアウトシフトを防ぎ、よりスムーズなユーザー体験を提供できます。

7. よくある問題とその解決策

画像サイズ指定に関連してよく発生する問題と、その解決策をまとめます。

7.1. 画像が親要素からはみ出す

これは、特にレスポンシブデザインにおいて、画像の本来のサイズが親要素よりも大きい場合に起こりやすい問題です。

解決策: max-width: 100%; height: auto;を適用する。

css
img {
max-width: 100%; /* 親要素の幅の100%を最大幅とする */
height: auto; /* 幅に合わせて高さも自動調整し、アスペクト比を維持 */
display: block; /* (任意) imgはインライン要素なので、下に数ピクセルの余白が入りやすい。これを防ぐためにdisplay: block; を適用することが多い */
}

このスタイルを適用すれば、画像は親要素の幅を決して超えなくなり、レスポンシブに対応できます。

7.2. アスペクト比が崩れる

widthとheightを両方指定し、その比率が元の画像のアスペクト比と異なる場合に発生します。

解決策:
* widthまたはheightの片方をautoにする。
* object-fitプロパティを使用する（コンテナサイズを固定しつつ、画像を収めたい場合）。
* 親要素やコンテナにaspect-ratioプロパティを適用し、その中に画像をwidth: 100%; height: 100%; object-fit: cover;などで配置する。

“`css
/ 例1: 片方を auto に /
img.maintain-ratio {
width: 300px;
height: auto; / これでOK /
}

/ 例2: object-fit を使用 /
.container-fixed-size {
width: 200px;
height: 200px;
}
.container-fixed-size img {
width: 100%;
height: 100%;
object-fit: cover; / または contain /
}

/ 例3: aspect-ratio を使用 /
.container-ratio {
width: 100%;
aspect-ratio: 16 / 9;
}
.container-ratio img {
width: 100%;
height: 100%;
object-fit: cover;
}
“`

7.3. 画像の上にテキストを重ねる

画像の上にキャプションや他の要素を重ねて配置したい場合があります。これは画像サイズ自体を指定する問題とは異なりますが、レイアウトと関連するため、ここで触れておきます。

解決策: CSSの Positioning (position: absolute;), Flexbox, Grid または background-image プロパティを使用します。

  • Positioning: 親要素をposition: relative;にし、重ねたい要素をposition: absolute;で配置します。

    html
    <div style="position: relative; display: inline-block;">
    <img src="image.jpg" alt="重ねる画像" style="display: block; width: 100%;">
    <div style="position: absolute; bottom: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px;">
    キャプション
    </div>
    </div>

  • Flexbox/Grid: 親要素をFlexboxまたはGridコンテナにし、place-items: center;などで画像を中央に配置し、重ねたい要素も同じ位置に配置します。

  • background-image: 画像を<img>要素ではなく、親要素のbackground-imageとして設定します。テキストなどのコンテンツはその要素の中に直接記述します。

    html
    <div style="background-image: url('image.jpg'); background-size: cover; background-position: center; color: white; padding: 20px;">
    <h2>タイトル</h2>
    <p>画像の上に表示されるテキストです。</p>
    </div>
    この方法は画像サイズ指定よりも背景画像の制御になりますが、テキストなどを重ねたい場合には非常にシンプルで有効な手法です。background-sizeプロパティで画像の表示サイズ（cover, contain, %, pxなど）を調整できます。

7.4. 画像のセンタリング

親要素の中で画像を水平方向または垂直方向に中央揃えしたい場合があります。

解決策:

  • インライン/インラインブロック要素の場合: 親要素にtext-align: center;を適用します（<img>要素はデフォルトでdisplay: inline-block;に近い振る舞いをします）。

    html
    <div style="text-align: center;">
    <img src="image.jpg" alt="センタリング画像" style="width: 300px; height: auto;">
    </div>

  • ブロック要素の場合: display: block;を適用し、左右のマージンをautoにします。

    css
    img.centered-block {
    display: block; /* ブロック要素にする */
    margin-left: auto; /* 左マージンを自動調整 */
    margin-right: auto; /* 右マージンを自動調整 */
    width: 300px; /* または max-width: ... */
    height: auto;
    }

  • Flexbox/Grid: 親要素をFlexboxまたはGridコンテナにし、justify-content: center; (主軸方向、デフォルトは水平) や align-items: center; (交差軸方向、デフォルトは垂直) を使用します。

    css
    .flex-container {
    display: flex;
    justify-content: center; /* 水平方向の中央 */
    align-items: center; /* 垂直方向の中央 */
    /* height: ...; /* 垂直中央揃えには親の高さが必要 */
    }
    .flex-container img {
    /* 必要に応じてサイズ指定 */
    width: 300px;
    height: auto;
    }

これらの方法を組み合わせることで、さまざまな状況で画像を正確に配置できます。

7.5. Retinaディスプレイ対応

高解像度ディスプレイで画像がぼやけて見えるのを防ぎたい。

解決策: srcset属性に密度記述子 (x) を使用して、高解像度向けの画像ファイル候補を提供する。

html
<img src="image-1x.jpg"
srcset="image-2x.jpg 2x,
image-3x.jpg 3x"
alt="高解像度対応画像">
これにより、高解像度ディスプレイを使用しているユーザーには、より詳細なピクセル情報を持つ画像ファイルが配信され、画像が鮮明に表示されます。

8. 実践的なテクニック集

これまでに説明したCSSプロパティやHTML属性を組み合わせることで、様々なレイアウトや表示要件に対応できます。いくつかの実践的なテクニックを紹介します。

8.1. サムネイルリストの作成

グリッド状に並んだサムネイル画像を作成し、クリックすると元の画像にリンクする場合などによく使われるレイアウトです。全てのサムネイルのコンテナサイズを固定し、画像はトリミングして表示することが多いです。

“`html


画像1

画像2

``
この例では、GridまたはFlexboxでサムネイルを配置し、.thumbnail要素で固定サイズ（ここではPadding Hackやaspect-ratioで正方形）のコンテナを作成しています。その中の要素にwidth: 100%; height: 100%; object-fit: cover;`を適用することで、様々なアスペクト比の画像でも、コンテナサイズに合わせてトリミング表示し、統一感のあるサムネイルリストを実現しています。

8.2. 背景画像としての使用

画像を要素の背景として使用する場合、CSSのbackground-imageプロパティを使用します。この場合、画像そのものではなく、その画像を背景に持つ要素のサイズを調整することになります。

“`html

ウェルカム

素晴らしい風景画像が背景です。

``background-sizeプロパティは、背景画像のサイズ調整においてobject-fitに相当する役割を果たします。coverはコンテナを覆うように、containはコンテナに収まるように画像を拡大縮小します。背景画像を使うメリットは、その上にコンテンツを重ねるのが容易である点ですが、SEOやアクセシビリティの観点では、コンテンツの一部である重要な画像は`要素としてマークアップする方が望ましいことが多いです。

8.3. 画像キャプションの付け方

画像にキャプションを付けて、それが画像と一体のものであることを示したい場合は、<figure>要素と<figcaption>要素を使用することがセマンティクス上適切です。これにより、画像とそのキャプションがセットとして認識されます。サイズ調整は、<figure>要素またはその中の<img>要素に対して行います。

“`html

美しい夕焼けの風景
図1: 浜辺から見た美しい夕焼け。

``

要素自体はデフォルトでブロック要素なので、幅を指定しない場合は親要素の幅いっぱいに広がります。その中の要素にmax-width: 100%; height: auto;を適用することで、

`要素のサイズに合わせて画像も適切に表示されます。

8.4. CSSフィルターによる見た目の調整

画像自体のサイズ調整ではありませんが、CSSのfilterプロパティを使うと、画像に様々な視覚効果を適用できます。これは、画像を単に表示するだけでなく、デザインの一部として調整したい場合に便利です。

“`css
img.grayscale {
filter: grayscale(100%); / グレースケールに変換 /
}

img.blur {
filter: blur(5px); / ぼかし効果 /
}

img.brightness {
filter: brightness(1.5); / 明るさを1.5倍に /
}

img.shadow {
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); / ドロップシャドウ /
}
“`
これらのフィルターは、画像ファイルのサイズや形式を変更することなく、表示上の見た目だけを変化させます。ホバー時のみフィルターを適用する、といったインタラクティブな表現も可能です。

9. アクセシビリティに関する考慮事項

画像サイズや表示方法は、アクセシビリティにも影響を与えます。

  • alt属性: 画像が表示されない場合や、スクリーンリーダーを使用するユーザーのために必須です。画像の内容を簡潔かつ正確に記述します。装飾的な画像でコンテンツに情報的な意味を持たない場合は、alt=""のように空の文字列を指定することで、スクリーンリーダーに読み上げさせないようにします。
  • 画像サイズと視認性: 小さすぎる画像は、視力の低いユーザーにとって内容を把握しづらい場合があります。また、拡大表示した際に著しく劣化するような小さな画像を無理に引き伸ばして表示するのも避けるべきです。
  • パフォーマンス: 前述したように、大きな画像による読み込み遅延は、特に帯域幅が制限された環境のユーザーや、注意力が持続しにくいユーザーにとって、大きな障壁となります。適切な画像サイズと最適化、遅延読み込みは、アクセシビリティの向上にも繋がります。
  • テキストの代替としての画像: テキスト情報を画像化して表示する場合（例: ロゴ、図表内のテキストなど）、視覚的にしか情報が伝わらず、テキストを選択・コピーしたり、スクリーンリーダーで読み上げたりすることができません。可能な限り、テキストは実際のテキストとしてマークアップし、必要であればCSSで装飾するようにしましょう。テキストを画像化する場合は、alt属性にそのテキスト内容を正確に含める必要があります。

10. まとめ

HTMLの<img>要素のサイズ指定・調整は、見た目の美しさ、ユーザー体験、パフォーマンス、レスポンシブ対応、アクセシビリティといったWebサイトの重要な側面に深く関わる技術です。

  • HTML属性 (width, height): 手軽ですが、スタイルの管理や柔軟性に欠けます。サイズ指定は基本的にCSSで行い、HTML属性はブラウザの領域確保のために本来の画像サイズを記述する用途に留めるのが現代的です。
  • CSS (width, height, max-width, min-width): スタイルの分離、多様な単位、詳細な制御が可能であり、サイズ指定の中心となる方法です。特にmax-width: 100%; height: auto;はレスポンシブ画像の基本です。
  • アスペクト比制御 (object-fit, aspect-ratio): object-fitはコンテナに画像を収める際の振る舞いを、aspect-ratioは要素自体のアスペクト比を固定します。画像が歪むのを防ぎ、レイアウトシフト対策にも有効です。
  • レスポンシブ対応 (@media, srcset, <picture>): メディアクエリで表示サイズを、srcsetや<picture>で読み込む画像ファイルをデバイスや画面サイズに応じて最適化します。パフォーマンスとユーザー体験の両立に不可欠です。
  • パフォーマンス: 表示サイズに合わせた画像ファイルの準備、最適化、次世代フォーマットの利用、遅延読み込みなどを組み合わせることで、読み込み速度を大幅に改善できます。
  • 実践テクニック: サムネイルリストや背景画像、キャプションなど、具体的なレイアウト要件に合わせて、これらの技術を組み合わせて使用します。
  • アクセシビリティ: alt属性の適切な使用、画像の視認性への配慮、パフォーマンス改善は、より多くのユーザーがコンテンツにアクセスできるようにするために重要です。

画像のサイズ調整は、単に見た目を整えるだけでなく、Webサイト全体の品質を高めるための総合的な取り組みです。これらの知識を習得し、実際の開発で積極的に活用することで、より魅力的でパフォーマンスの高いWebサイトを構築できるでしょう。常に新しいCSSプロパティやHTML属性の情報を追いかけ、変化するWeb標準に対応していくことも重要です。このガイドが、あなたの画像表示に関するスキル向上の一助となれば幸いです。

11. 参考資料/学習リソース

  • MDN Web Docs (<img>, width, height, max-width, object-fit, aspect-ratio, srcset, <picture>, loading)
  • W3C Specifications (HTML, CSS)
  • Web.dev (画像最適化、レスポンシブ画像に関する記事)

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール