HTMLだけでレスポンシブ対応させる画像要素の記述方法。

HTMLに画像の要素を記述するとき、レスポンシブ対応やブラウザ互換性のために、サイズ違いの画像や拡張子違いの画像など複数のリソースをpicture要素とsource要素を使って設定する記述の方法。忘れるのでメモ。

source要素

「source」要素を使用すると、「picture」要素、「audio」要素、「video」要素内で、表示環境に対応するために複数のファイルリソースを設定することができる。

ブラウザは、「source」要素に記述されている適用条件が(ウィンドウサイズやデバイス仕様など)現在の表示環境と合致するソースを選択して使用する。

※ source要素のMozillaの公式ドキュメント。

source要素の記述方法の概要

• 開始タグ「<source>」は必須。
• 終了タグ「</source>」は記述してはいけない。
• メディア要素(「picture」、「audio」、「video」)内で、「img」要素や「track」要素など他の要素よりも前に記述する。
• 「audio」要素と「video」要素内の「source」要素には「src」属性が必須。
• 「picture」要素内の「source」要素には「srcset」属性を使用する。(「picture」要素内にある「source」要素の「src」属性は無視される。)
• 「picture」要素内の「source」要素のみ、「srcset」属性、「sizes」属性、「media」属性が設定できる。

※ 「source」要素は空要素なので、内包できる要素も終了タグも無い。(「</source>」はHTMLの中で決して使われない。)

レスポンシブ対応の画像の記述方法

レスポンシブ対応の画像切替

レスポンシブ対応の一般的な画像切替の設定方法は下記のどちらか。

1. 画像サイズの切替 : 環境に合わせて「画像サイズを最適化」するために、画像の内容は同じで「大きさ」や「解像度」などデータ容量が異なる複数の画像ファイルを設定してレスポンシブに切り替える方法。(不必要なサイズの画像をダウンロードしないのが目的。)
2. アートディレクション : 環境に合わせて「見栄えを最適化」するために、「縦横比」や「内容」が異なる複数の画像ファイルを設定してレスポンシブに切り替える方法。(スマホでは縦長、PCでは横長にするなど、デザイン上の対応が目的。)

[ 設定方法 ]

1. 「画像サイズの切替」のみ対応の場合 : 「img」要素に「srcset」属性と「sizes」属性を記述して設定する。
2. 「アートディレクション」にも対応の場合 : 「picture」要素と「source」要素を使用して記述する。

※ クロスブラウザ対応のために拡張子が異なる複数の画像を設定する場合も「picture」要素と「source」要素を使用して記述する。

※ レスポンシブ画像についてのMozillaの公式ドキュメント。

「画像サイズの切替」のみ対応

「img」要素だけでレスポンシブ対応する方法。(「画像サイズの切替」のみに対応する方法。)

※ 画像の内容が同一でデータサイズが異なる複数の画像ファイルから、レスポンシブに最適なサイズの画像を選択させるために設定する。

「img」要素に必要な属性値を記述して設定する。

1. 「srcset」属性 : 「画像ファイルのパス」と「その画像のサイズ」(または画素密度)を記述。
2. 「sizes」属性 : サイト上での「画像描画領域の横幅」を記述。
3. 「src」属性 : 既定値となる「画像ファイルのパス」を記述。

※ この記述方法は、ブラウザが最適なソースを選べるように複数の選択肢を提示しているだけなので、意図した環境に意図した画像ファイルを選択させるようにはできない。(ブラウザごとに決められている仕様によって、選択肢から最適なソースが判断される。)

※ ブラウザが、表示する時点でのウィンドウサイズやディスプレイ解像度などを考慮して、記述内容を元に最適と判断したソースをサイト表示に使用する。(ブラウザごとに仕様が異なる。)

srcset属性の記述方法

「srcset」属性で、ブラウザに「画像ファイルのパス」と「その画像のサイズ」(または画素密度)を提示する。

• 「画像ファイルのパス」+「半角スペース」+「画像の横幅」の形式で1つの画像ファイルを記述。
• 複数の画像ファイルを設定する場合はカンマ「,」で区切って続けて記述。
• 「画像の横幅」は、ピクセルでの数値で単位は「w」(幅記述子)を使う。(サイト表示上ではなくデータとして本来の横幅。)
• 「画像の横幅」ではなく「画素密度」で提示したい場合、正の浮動小数点数の数値と単位「x」(画素密度記述子)で記述。
• 具体的に数値を指定しなかった場合の既定値は、画像サイズでは「無限大」、画素密度では「1x」。
• 「幅記述子」(または「画素密度記述子」)を同じにして複数記述してはいけない。
• デフォルト設定用の「画像ファイルのパス」を「src」属性に記述。(必須。)

[ HTMLの記述例 ]

「幅記述子」を使った下記の記述例の場合の挙動。(RetinaのMacBook Proのブラウザで確認。)

• ウィンドウ横幅160px以下は「img/foo-s.png」、161px ~ 320px以下は「img/foo-m.png」、それよりも大きい横幅では「img/foo-l.png」が表示される。
• Firefox(102.0)ではウィンドウ横幅のリサイズに応じて画像が変更されるが、Chrome(バージョン: 104.0.5112.79)では「img/foo-l.png」が一度でも読み込まれた場合、320px以下にリサイズしても「img/foo-m.png」に変更されない。
• ここでは「sizes」属性を指定していないので、「画像描画領域の横幅」ではなく、「ウィンドウの横幅」の数値に対しての最適なソースを判断して選択されている。(「sizes」属性は後述。)

<img srcset="img/foo-s.png 320w,
             img/foo-m.png 640w,
             img/foo-l.png 1280w"
     src="img/foo-default.png" alt="foo">

「画素密度記述子」を使って記述する例。

<img srcset="img/foo-1.png,
             img/foo-1_5.png 1.5x,
             img/foo-2.png 2x"
     src="img/foo-default.png" alt="foo">

sizes属性の記述方法

「sizes」属性で、ブラウザに「メディア条件」(適用させる条件)と「そのときに画像が描画される領域の横幅」を提示する。

• 「メディア条件」+「半角スペース」+「画像描画領域の横幅」の形式で記述。
• 複数設定する場合はカンマ「,」で区切って続けて記述。
• 「メディア条件」とは、適用させる表示環境の条件の記述。(通常はウィンドウ横幅を指定。)
• 「メディア条件」にウィンドウ横幅を指定する場合、最大値指定なら「(max-width: 数値px)」、最小値指定なら「(min-width: 数値px)」で記述。
• 「画像描画領域の横幅」には、「px」か「vw」のどちらかの単位で数値を指定。
• 「メディア条件」を省略した場合はすべての条件に該当することになるので、既定値の「画像描画領域の横幅」となる。

[ HTMLの記述例 ]

• 下記の記述だと、ウィンドウ横幅320px以下のときは「画像描画領域の横幅」が「100px」、321px ~ 640px以下のときは「500px」、それ以外では「1000px」であることを明示している。

※ 「メディア条件」(ウィンドウ横幅)に応じて設定されているそれぞれの「画像描画領域の横幅」のときに最適なソースが、「srcset」属性の内容を元にブラウザによって判断されて選択される。

<img srcset="img/foo-s.png 200w,
             img/foo-m.png 1000w,
             img/foo-l.png 2000w"
     sizes="(max-width: 320px) 100px,
            (max-width: 640px) 500px,
            1000px"
     src="img/foo-default.png" alt="foo">

「アートディレクション」にも対応

「picture」要素内に、「source」要素を使用して複数の画像ファイルを記述する方法。(「アートディレクション」に対応する方法。)

※ ウィンドウ横幅など、表示環境に応じて表示させる画像を意図的に切り替えたい場合に設定する。

※ 指定した「メディア条件」の設定によって、必ず意図したソースが使用される。

記述方法

• 「picture」要素内には、0個以上の「source」要素と1個の「img」要素が必要。
• デフォルト設定用の「画像ファイルのパス」を「img」要素の「src」属性に記述。
• 「source」要素は「img」要素よりも先に記述。(記述順に条件判定される。)
• 「source」要素には「src」属性ではなく「srcset」属性を記述する。(「picture」要素内にある「source」要素の「src」属性は無視される。)
• ひとつの「source」要素の「srcset」属性に、「幅記述子」(または「画素密度記述子」)を使用して、カンマ「,」区切りで複数の画像ファイルの設定もできる。
• 「source」要素の「media」属性に「メディア条件」を設定して、そのソースが適用される条件を記述。
• 「source」要素には「sizes」属性や「type」属性など、必要があれば他の属性も設定できる。

※ ブラウザは、「source」要素の記述順に、現在の表示環境が指定条件に合うかどうか評価し、最初にtrueと評価した「source」要素のソースをサイト上の「img」要素の領域に表示する。

※ 条件がfalseと判定された場合は次の「source」要素が評価され、trueとなる「source」要素が無ければ「img」要素に設定されている画像が使用される。

記述例

基本的な記述方法の例。

1. 「source」要素の「srcset」属性に「画像ファイルのパス」を記述。
2. 「source」要素の「media」属性にウィンドウ横幅で「メディア条件」を記述。
3. 「img」要素の「src」属性にデフォルト設定用の「画像ファイルのパス」を記述。

※ 下記の記述で、「ウィンドウサイズが1200px以上」なら「foo-l.png」、「ウィンドウサイズが600px以上1200px未満」なら「foo-m.png」、それ以外は「foo-s.png」の画像が表示される。

<picture>
  <source srcset="img/foo-l.png" media="(min-width: 1200px)">
  <source srcset="img/foo-m.png" media="(min-width: 600px)">
  <img src="img/foo-s.png" alt="foo">
</picture>

複数の画像フォーマットを設定する場合の例。

• 「type」属性にリソースの「MIMEタイプ」を記述。
• 「type」属性が指定されていない場合は、サーバーからメディア形式を取得して確認される。
• 必要があれば、「media」属性など他の属性も設定できる。

※ ブラウザは記述内容の中で対応している形式のソースを選択して使用する。

<picture>
  <source type="image/webp" srcset="img/foo.webp">
  <source type="image/svg+xml" srcset="img/foo.svg">
  <img src="img/foo-s.png" alt="foo">
</picture>