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. 「画像サイズ切替」のみ対応の場合 : 「srcset」属性と「sizes」属性を指定した「img」要素を記述する。
2. 「アートディレクション」に対応の場合 : 「picture」要素と「source」要素を使用して記述する。

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

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

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

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

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

※ ブラウザが仕様に応じて最適化を判断するので、必ず意図した環境で意図したサイズの画像を選択させることはできない。(選択肢を提示できるというだけ。)

「img」要素に下記の属性を記述して設定する。

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

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

※ ブラウザが、画像描画する時点でのウィンドウサイズやディスプレイ解像度などを考慮して、記述内容を元に最適と判断したソースを使用する。(ブラウザごとに仕様が異なるので、同じデバイス環境でも選択される画像が異なる場合がある。)

1. 「srcset属性」の記述方法

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

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

[ HTMLの記述例 ]

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

• ウィンドウ横幅160px以下は「img/foo-s.png」、161px ~ 320px以下は「img/foo-m.png」、それよりも大きい横幅では「img/foo-l.png」が表示される。(Retinaなので、2倍サイズの画像が選択されている。)
• 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">

2. 「sizes属性」の記述方法

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

• 「メディア条件」+「半角スペース」+「画像描画領域の横幅」の形式で記述。
• 複数設定する場合はカンマ「,」で区切って続けて記述。
• 「メディア条件」とは、その指定が適用される表示環境の条件のこと。(通常は「ウィンドウ横幅」を指定。)
• 「メディア条件」に「ウィンドウ横幅」を指定する場合、「(max-width: 数値px)」(この値以下が対象)、または「(min-width: 数値px)」(この値以上が対象)で記述。(「max-height」、「min-height」で高さでの指定も可能。)
• 「画像描画領域の横幅」には、「px」や「vw」などの単位で数値を指定。(長さの単位と「calc()」など一部のCSS関数が有効。WHATWGの公式ドキュメント。)
• 「メディア条件」が無い「画像描画領域の横幅」は、条件無しの既定値扱いとなる。(デフォルトの値となるので、リストの最後に「メディア条件」無しの値の記述は必須。)

[ HTMLの記述例 ]

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

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

※ 「srcset」属性が無い、または「srcset」属性に「幅記述子」での値が無い場合、「sizes」属性の記述は無効になる。

<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」要素を使用して複数の画像ファイルを記述する方法。(「アートディレクション」に対応する方法。)

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

• 指定した「メディア条件」の設定によって、必ず意図したソースが使用される。
•  ブラウザは、記述されている「source」要素の順に、現在の表示環境が指定条件に合うかどうか評価する。
• 最初にtrueと評価した「source」要素のソースをサイト上の「img」要素の領域に表示する。
•  条件がfalseと判定された場合に次の「source」要素が評価され、trueとなる「source」要素が無ければ「img」要素に設定されている画像が使用される。

1. 記述方法

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

2. 記述例

[ 基本的な記述方法の例 ]

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>