srcset属性の使い方

通常、HTMLで画像を表示させるときはimg要素を使って1つの画像を表示させます。レスポンシブWebデザインを用いたWebサイト構築をする場合、この画像表示に関して少し問題が生じます。それは、高解像度ディスプレイを搭載したスマートフォンなどのデバイスです。
例えば、320×480(px)サイズの画像を掲載した場合、2倍の解像度を持ったディスプレイでは640×960(px)で描画されます。これにより、通常の解像度を持ったディスプレイではきれいに表示されますが、高解像度のディスプレイでは少しぼやけた感じで表示されてしまいます。
この現象を防ぐには、640×960(px)以上の画像を用意して掲載する必要があります。そうすれば、高解像度でもきれいに表示されます。
しかし、やたらと高解像度の画像を読み込ませても無駄に通信量が増えて読み込みが遅くなってしまうこともあります。そこで使うのがHTML5で追加されたsrcset属性です。これを使うことで、1枚の描画領域に複数の画像を用意して適当な画像を選択して表示させることができます。

srcset属性の記述方法

以下のようにsrcset属性を記述することで、画像を読み込むことができます。

<img src="sample.jpg" alt="" srcset="sample-1500.jpg 1500w, sample-1024x.jpg 1024w, sample-768x.jpg 768w, sample-600x.jpg 600w, sample-400x.jpg 400w" sizes="100vw" />

ファイル名と条件を半角空白で区切って指定し、必要な分だけカンマ区切りで記述していきます。上記の例では、横幅が1500px以下なら「sample-1500.jpg」、1024px以下なら「sample-1024x.jpg」、768px以下なら「sample-768x.jpg」、600px以下なら「sample-600x.jpg」、400px以下なら「sample-400x.jpg」を表示させるという指定になります。
srcset属性に対応していないブラウザの場合は、そのままsrc属性の「sample.jpg」が読み込まれます。
「sizes="100vw"」としているのは、srcset属性で指定した横幅の条件を判断する際の基準となる横幅を指定しています。ちなみに「vw」という単位は「Viewport Width」のことです。

srcset属性は横幅以外にも表示環境に応じて画像を選択することができます。例えば、ブラウザの横幅が320pxだった場合は「sample-400x.jpg」が表示されますが、同じ320pxの横幅でも2倍の高解像度を搭載したディスプレイなら「sample-768.jpg」が選択されて表示されます。

このように、srcset属性を使えばディスプレイのサイズや解像度に適したサイズの画像を表示させることができます。

その他の記事
【CSS】画像のオーバーレイアニメーション
URLや英数字の長文を途中で改行させる方法
device-widthについて
CSSのflexを使ったフレキシブルレイアウト
【CSS】背景のみ透過させて表示する方法

TOP