<img src="" srcset="" sizes="">

ブラウザ
  • Cr
  • Fx
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ(usemap属性がある場合) / フォーム関連要素 / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容

img要素srcset=""sizes="" を追加すると、レスポンシブイメージ(画像サイズの最適化)を設定することができます。

サイズの異なる複数の画像候補を用意しておくことで、ユーザーの閲覧環境に適した画像が自動的に選択・表示されるようになります。

  • この2つの属性はHTML 5.1で追加されました。

<img src="large.jpg" srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" sizes="(max-width: 1280px) 100vw, 1280px" alt="サンプル">

<img src="small.jpg" srcset="small.jpg 1x, medium.jpg 2x" alt="サンプル">

属性
必須属性
src="" 画像の指定 URL 埋め込む画像のURL
任意属性
srcset="" [5.1]画像の候補 URL 画像ファイルのURL
URL 横幅w ビューポートの幅による切り替え: 画像ファイルのURL、画像ファイルの横幅(ピクセル数)、記述子(w
URL 比率x デバイスピクセル比による切り替え: 画像ファイルのURL、比率を示す数値、記述子(x
sizes="" [5.1]ブレイクポイント、画像の表示サイズ メディアクエリ 表示サイズ(vw メディアクエリ、画像の表示サイズ(横幅)、割合で指定する場合は vw (初期値は 100vw

画像表示を最適化するレスポンシブイメージは、img要素またはpicture要素で設定することができます。それぞれの特徴は次のようになります。

img要素による設定
同じ内容の画像で、サイズ違いをセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。img要素だけで設定できるので、比較的シンプルに(?)記述することができます。
picture要素による設定
サイズ違いだけでなく、内容の異なる画像をセットしたい場合に使用します(例えば、スマホ向けにはクロップされた画像を表示させたい場合など)。picture要素による設定では、指定した条件下で強制的に画像を切り替えることができます。
  • 上記の2つを組み合わせることで、より詳細に設定することも可能です。

srcset属性sizes属性の概要は次のようになります。

srcset属性
使用される画像の選択候補を設定します。それぞれの画像候補には、画像ファイルの横幅w )またはデバイスピクセル比x )のどちらかを指定することができます。
sizes属性
画像の表示サイズ(横幅)を指定します。割合で指定する場合は % ではなく vw 単位を使います。メディアクエリを加えることで、ブレイクポイント(切り替え地点)を設定することもできます。この属性を省略した場合は 100vw(100%)が適用されます。
  • 上記2つの属性に対応していないブラウザでは、src属性で指定した画像が表示されます。
  • sizes属性を指定する場合は、srcset属性にセットされる全ての画像候補に画像ファイルの幅を指定しておく必要があります。(デバイスピクセル比を指定した場合はsizes属性は無効となります)

srcset属性の指定方法

srcset属性の値には、サイズの異なる1つ以上の画像候補をセットすることができます。2つ以上の画像をセットする場合はカンマ( , )で区切って記述します。

srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w"
srcset="image/small.jpg 1x, image/medium.jpg 2x"

上記のように、srcset属性には2つの指定方法があります。1つ目はビューポート(ブラウザの表示領域)の幅に応じて画像を切り替える指定、2つ目はデバイスのピクセル比に応じて画像を切り替える指定です。

  • 1つ目の指定方法の場合に限り、sizes属性の指定が有効になります。

それぞれの指定方法は次のようになります。

ビューポートの幅に応じて画像を切り替える指定

srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w"

上記は、サイズの異なる3つの画像を指定しています。URLの横にある数値はその画像ファイルの横幅(ピクセル数)を表していて、数値の後にはであることを示す記述子( w )が付けられています。(URLと数値は半角スペースで区切ります)

上記のように指定しておくと、例えばPCでは large.jpg 、タブレットでは medium.jpg、スマホでは small.jpg が使用されるようになります。(実際にはsizes属性とのからみがあるので細かい計算が必要です)


デバイスのピクセル比に応じて画像を切り替える指定

srcset="image/small.jpg 1x, image/medium.jpg 2x"

上記は、サイズの異なる2つの画像を指定しています。URLの横にある数値はデバイスピクセル比(詳しくは検索してください)を表していて、数値の後には比率であることを示す記述子( x )が付けられています。(URLと数値は半角スペースで区切ります)

上記のように指定しておくと、一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されるようになります。(数値には小数点以下を指定することもできます。1.5x2.5x など)

比率が指定されていない画像は 1x を指定したことになります。

srcset="image/small.jpg, image/medium.jpg 2x"
  • より高性能なディスプレイに対応する場合は、x3x4 の画像も用意しておく必要があるかもしれません。

srcset属性を指定する際にはいくつかの注意事項があります。

  • の指定と比率の指定を混在させてはならない。
  • の指定を行う場合は全ての画像候補に幅の指定が必要。
  • 同一のを複数の画像候補に指定してはならない。
  • 同一の比率を複数の画像候補に指定してはならない。

sizes属性の指定方法

sizes属性の値には、画像の表示サイズ(横幅)を指定することができます。画像の表示サイズは px 等の単位、またはビューポートの幅に対する割合(vw)で指定します。

  • 割合の指定は、親要素の幅に対するものではなく、ビューポートの幅に対するものであることに注意してください。
sizes="50vw"

上記は、ビューポートの幅に対して50%の幅を指定しています。ビューポートの幅が1000pxであれば、画像の表示幅は500pxになります。割合を示す数値の後には vw を加えておきます。

また、必要に応じてメディアクエリを指定することもできます。(ブレイクポイントを設定することができます)

sizes="(max-width: 420px) 100vw, (max-width: 800px) 70vw, 50vw"

上記は、ビューポートの幅が420pxまでは100%の幅で、800pxまでは70%の幅で、それ以上の場合は50%の幅で画像を表示する、という指定になります。複数のブレイクポイントを設定する場合は、上記のようにカンマ( , )で区切って記述します。

sizes="(max-width: 1280px) 100vw, 1280px"

上記は、ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示する、という指定になります。(幅の上限を指定して、それ以上広がらないようにしています)

  • sizes属性を指定する場合は、srcset属性の値に画像ファイルの幅を指定しておく必要があります。(デバイスピクセル比を指定している場合はこの属性の指定は無効となります)
  • sizes属性の初期値は 100vw となります。この属性を省略した場合は幅100%が適用されることになります。

srcset属性とsizes属性の関係

srcset属性(画像ファイルの幅を指定)とsizes属性は密接に関係しています。

単純な例として、次のケースを想定してみます。

srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" 
sizes="100vw"

上記の場合、画像は常にビューポートの幅に対して100%で表示されます。

そのため、ビューポートの幅が320pxまでは small.jpg、321~640pxまでは medium.jpg、641px以上は large.jpg が使用されると考えられます。

しかし、上記を次のケースに当てはめると少しややこしくなってきます。

srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" 
sizes="50vw"

今度はビューポートの幅に対して50%の幅で画像が表示されます。

ビューポートの幅が600pxの場合、画像の表示サイズは結果的に300pxになるので、使用される画像は medium.jpg ではなく small.jpg になる、ということになるでしょう。

calc() 関数による指定

sizes属性の値には、CSSのcalc()関数を使用することもできます。この関数を使用することで、計算式によって値を指定できるようになります。

例えば、サイドバーの幅(300px)を除いた残りすべてを指定する場合は、calc()関数を使って次のように記述します。

  • 100% ではなく 100vw と記述するところに注意してください。また、演算子の前後には半角のスペースが必要です。
sizes="calc(100vw - 300px)"

メディアクエリと組み合わせると次のようになります。

sizes="(min-width: 600px) calc(100vw - 300px), 100vw"

上記は、ビューポートの幅が600px以上の場合はサイドバーの幅を除いた残りすべて、それ以外の場合は100%の幅で画像を表示する、という指定です。

ブラウザの対応状況

確認できた範囲の説明となりますが、ブラウザの対応状況は次のようになっているようです。(2016年12月現在)

  • IE(11): 未対応
  • Chrome(55): 対応しています
  • Safari(5): 未対応
  • Firefox(50): 対応しています
  • Opera(12): 未対応

Chrome と Firefoxでは、挙動が少し異なります。

Firefox
ブラウザの幅を動かすと、ブレイクポイントごとに画像が切り替わります。
Chrome
より大きい画像を既に読み込んでいる場合、ブラウザの幅を狭くしてもブレイクポイントで画像が切り替わりません。(大きい画像を使用し続けます)

使用例

ビューポートの幅に応じて画像を切り替える例(1)

<p><img src="image/small.jpg" srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w" sizes="(max-width: 1280px) 100vw, 1280px" alt="サンプル"></p>

<p>ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示します。</p>

表示例

サンプル画面へ新規ウィンドウで表示

  • 対応しているブラウザでは、ブラウザの幅を動かすことで画像の切り替えを確認することができます。(Firefoxで確認すると分かりやすいです)
ビューポートの幅に応じて画像を切り替える例(2)

<p><img src="image/small.jpg" srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w" sizes="(max-width: 420px) 100vw, (max-width: 800px) 70vw, 50vw" alt="サンプル"></p>

<p>2つのブレイクポイントを設定し、画像の表示幅が3段階で変化するようにしています。</p>

表示例

サンプル画面へ新規ウィンドウで表示

デバイスピクセル比に応じて画像を切り替える例

<p><img src="image/small.jpg" srcset="image/small.jpg 1x, image/medium.jpg 2x" alt="サンプル"></p>

<p>一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されます。</p>

表示例

サンプル画面へ新規ウィンドウで表示

calc()関数を使用して値を指定した例

<p><img src="image/small.jpg" srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w" sizes="(min-width: 600px) calc(100vw - 300px), 100vw" alt="サンプル"></p>

<p>表示領域の幅が600px以上ある場合はサイドバー用の余白(300px)が入り、それ以外の場合は幅100%で画像が表示されます。</p>

表示例

サンプル画面へ新規ウィンドウで表示