srcsetとは―HTML5のimgタグの属性、x1、x2の書き方など。

技術情報

srcsetはHTML5で追加されたimgタグなどで設定できる属性です。同じイメージに対して複数のサイズを定義し、ブラウザが適切なイメージソースを選択できるようにします。x1、x2などsrcsetの書き方について解説していきます。

1. srcsetとは

srcsetは、imgタグなどの属性で、複数のイメージソースを指定する属性です。 srcsetを使用すると、ブラウザ側により条件ごとに該当する画像を自動で振り分けて表示することが可能です。

srcset属性の「srcset」の読み方は「ソースセット」です。一般的にsrcというとsourceの略で、英語のドキュメントなどを見ると「srcset attribute (pronounced “source set”)」という感じで説明されています。

インターネットで閲覧する利用者の画面は同じではありません。大型のデスクトップのモニターや手のひらサイズのスマホまでさまざまな画面を使っています。

そして、画面はサイズだけでなく、解像度も異なります。 4K HDモニターやAppleのRetinaディスプレイは、より小さいスペースに今まで以上に多くのピクセルを詰め込んでいます。これらの画面でイメージを見やすくするには、今までの画面用のイメージを2倍、4倍と大きくする必要があります。

srcset属性は、HTML5で追加になったimgタグなどに指定できる属性です。 srcset属性を使用すると、デバイスピクセル比を条件に同じイメージの異なるサイズのバージョンのリストを定義し、各バージョンのサイズをブラウザが選択して表示できるようになります。

ピクセルは、画素ともいい、ディスプレイは小さな点の集まりでできていて、その1つ1つの点のことをいいます。ピクセルの大きさはディスプレイのインチ数と画面解像度で大きさが決まります。

Retinaディスプレイなどは、たとえば、物理的な2px×2pxを論理的な1pxとして表示します。物理的な2px×2pxの方を「デバイスピクセル」、論理的な1pxの方を「CSSピクセル」といいます。

x記述子は、デバイスピクセル比を指定する記述子です。デバイスピクセルとCSSピクセルが同じ場合はx1、デバイスピクセルがCSSピクセルの2倍（縦2倍 x 横2倍）の場合はx2、3倍はx3、4倍はx4というように表されます。

srcsetの書き方について解説していきます。

まずはじめに、同じイメージの異なるサイズのバージョンをいくつか作成する必要があります。標準サイズのイメージ、2倍のサイズ (2x) 、3倍のサイズ (3x) 、4倍のサイズ (4x) というように準備します。

sample-1x.jpg
sample-2x.jpg
sample-3x.jpg
sample-4x.jpg

各バージョンのファイルは、大きなイメージから作成していくと作りやすいですね。
最大またはオリジナル：sample-4x.jpg
75%に縮小：sample-3x.jpg
50%に縮小：sample-2x.jpg
25%に縮小：sample-1x.jpg

srcset属性を使用すると、イメージファイルのURLのリストとサイズが指定できます。また、src属性に「デフォルト」のイメージを記述して、srcsetをサポートしていないブラウザ用の画像を指定します。

<img
 srcset="
  ＜URL＞ x1,
  ＜URL＞ x2,
  ＜URL＞ x3,
  ＜URL＞ x4
 "
 src="デフォルトURL"
>

更新履歴になります。