目次

この記事の目次です。

1. 解像度や画面サイズが異なる点について
2. srcset属性とx記述子
3. srcsetの書き方

更新履歴

1. 解像度や画面サイズが異なる点について

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

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

2. srcset属性とx記述子

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

ピクセル

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

デバイスピクセルとCSSピクセル

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

x記述子

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

3. srcsetの書き方

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"
>

更新履歴

更新履歴になります。

位置:トップsrcsetの書き方