これからのホームページ制作にsrcsetでできること

HTML5で策定されたsrcset属性という、新しい属性があります。この要素はブラウザの画面幅や指定したサイズ、dpiなどに応じて、異なる画像を読み込むことができます。レスポンシブ対応のサイトを制作するときやサイトの速度対策にも貢献させることができる有用な属性なので、今回はどういった効果があるのか紹介したいと思います。

srcset属性の書き方

まずは記述について、少し特徴的なので解説しましょう。判例は以下になります。

<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w"
     sizes="(max-width: 640px) 50vw"
>

srcset属性

1行目のsrcは未対応ブラウザへのフォールバックですので、2行目のsrcsetから見ていきます。
srcset属性は画像とその画像の読み込まれる条件をセットで指定し、コンマ区切りでサイズや条件を切り分けてレスポンシブなどに対応します。上記の例であれば

• img/example-img-320.jpgの画像を320wのとき（ブラウザ幅320px以下のとき）は、読み込む
• img/example-img-640.jpgの画像を640wのとき（ブラウザ幅640px以下と以上のとき）は、読み込む

という意味になります。

size属性

例の4行目で指定しているsizes属性はsrcset属性とセットで画像の読み込み条件を変動させます。記述がなくてもsrcset属性は機能します。上記の例だと

• ブラウザ幅640pxまでは、viewportの50%のサイズとしてsrcset属性を計算する

となります。つまりブラウザ幅640pxまではimg/example-img-320.jpgが読み込まれます。

別の書き方

シンプルに以下のようにも指定できます。

<img src="img/example-img.jpg"
     srcset="img/example-img.jpg 1x,
             img/example-img@2x.jpg 2x"
>

1xが通常の表示のとき、2xがretina表示のとき、という意味です。近年のスマートフォン事情を考えるとこちらの記述のほうが使いやすい場面も多いかもしれません。

srcset属性は何が有用か

Retina対応

srcset属性はブラウザ幅を基準に画像サイズを読み分けます。これはスマートフォンとPCの単純なレスポンシブだけでなく、多段レスポンシブサイトやretinaディスプレイの場合などにも対応できます。モニターの表示解像度に合わせた適切な画像を読み込むことがsrcset属性は可能です。

画像処理のコストを削減できる

srcset属性が設定で画像を読み分けてくれるので、レスポンシブサイトで画像の表示サイズを切り替えるためにjavascriptを用意したり、大きな画像一つで対応したりすることが必要なくなります。制作コストの削減になることもあれば、サイトの通信料をコンパクトにすることにも一役買うはずです。

まとめ

レスポンシブサイト制作時に、retina対応のために倍のサイズで画像を書き出しファイルサイズが大きくなったりしていましたが、srcset属性を利用することで柔軟な対応が可能になりそうです。ブラウザ幅ごとに画像を用意するコストとバランスを取りながら良い運用をすることで、制作サイトのクオリティアップに貢献できる属性ではないでしょうか。