レスポンシブの画像切り替えができるsrcset属性
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。
今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサイトで使用される画像について、PC画面ではバランスの良い見た目だったのに、スマホ画面では画像で注目したい対象物が思ったより小さく表示されているように見えることがあります。 本記事ではこのような場面で活躍する、srcset属性の使用方法についてのご紹介になります。
srcset属性とは
srcset属性とは、img要素等で用いられる、複数のイメージソースを指定するために使用する属性です。
src属性の場合は一つだけの画像を指定していましたが、それをリストにされており、ブラウザ側により記述された条件ごとに該当する画像を自動で振り分けて表示されます。 この場合読み込まれる画像は該当する画像のみで、無駄なリソース読み込みを発生させません。
この振り分けの処理をJavaScriptでレスポンシブ対応する場合は、JavaScriptが実行されるタイミングよりブラウザのもつ画像を先読みする機能が先に動作するため、余分なリソース読み込みが発生し負担となります。 同じコンテンツをPCとスマートフォンで切り替えているレスポンシブでは、どうしてもスマートフォンで見たときの動作が遅くなりがちです。特に大きな画像は遅延の原因になるので、画像リソースの読み込みを省略できるこの方法はかなり有効です。このようなときはできるだけsrcset属性での切り替えをお勧めします。
現在ところ、IEでは動作しない機能ですが、JSライブラリを導入することで使用することが可能になります。詳細は後述します。
srcset属性の書き方
前提として、対象ページのhtmlに以下のビューポートを指定している必要があります。
<meta name="viewport" content="width=device-width">出力画像選別のロジックについては、以下の2通りの書き方ができます。
デバイスピクセル比による画像指定(x)
<img srcset="symm-top-small.jpg 1x,
symm-top-medium.jpg 2x,
symm-top-large.jpg 3x" >srcset属性に画像とデバイスピクセル比(単位がx)のセットを複数記述します。 こちらの指定方法では、その端末の画面のデバイスピクセル比を参照し、一般的なディスプレイでは1xで指定した画像、デバイスピクセル比の高いディスプレイではその度合いに応じて2x、3xで指定した画像の読み込みをします。
ビューポートの幅による画像指定(w)
<img srcset="symm-top-small.jpg 400w,
symm-top-medium.jpg 600w,
symm-top-large.jpg 1024w"
sizes="100vw" >srcset属性に画像と実ピクセルでの表示サイズ(単位がw)を複数記述します。 こちらの指定方法では、このimg要素のサイズを参照し、その数字以上で一番近いもので指定されている画像の読み込みがされます。 また、こちらで指定する場合、sizesという属性を使用する必要があります。 上記の例ではこのimg要素が100vw（画面幅）の領域内で表示されることを明示しています。
参考：レスポンシブ対応のフォントサイズで使用できる単位 ですので、例えばCSSピクセル(解像度をデバイスピクセル比で割った値)の幅が414pxの端末でこのimg要素を読み込むと、デバイス幅のそのままでimg要素の幅が決定されますので、symm-top-medium.jpgが読み込まれます。 このsizes属性も複数条件を記述することができます。 メディアクエリと同じようにmax-width や min-widthを使用することで条件分岐するようになります。 用途としては、スマートフォンの幅では画像の周りに余白を入れたいが、PC表示の場合は幅いっぱいまで表示するときのデザインの場合に適切な画像読み込みをさせることができます。 複数指定したときの例は以下です。 以下の場合は幅が414pxの端末だと80vwが適用されますので、img要素は331pxとなり、symm-top-small.jpgの画像が読み込まれます。
<img srcset="symm-top-small.jpg 400w,
symm-top-medium.jpg 600w,
symm-top-large.jpg 1024w"
sizes="(max-width: 767px) 80vw, 100vw" >IEでもsrcset属性を動作させるには
IEは最新版のIE11でもsrcset属性に対応していません。2019年9月時点でIE11の国内シェアは11.61%なので、場合によってはIEも考慮してレスポンシブサイトを構築する必要があるかもしれません。 IEでsrcset属性を使用したい場合には、JSライブラリ「picturefill.js」を利用することで対応が可能です。
2019年11月時点での安定版は「3.0.2」となっています。 headタグ内に2行追加することで動作します。
<head>
<script>document.createElement( "picture" );</script>
<script src="picturefill.js" async></script>
</head>srcset属性以外の画像切り替え方法
srcset属性以外で画像を切り替える方法についてもご紹介します。
Media Queryを使用する
基本中の基本ですね。切り替えたい画像をすべて配置し、CSSのMedia Queryで画面幅に応じて表示、非表示を切り替えます。
レスポンシブでは基本的に各画面幅用のMedia QueryでCSSを書くので、そこに追加するだけ、という意味でお手軽な方法ではあります。
記述例は以下になります。
HTML
<img class="img-pc" src="symm-top-large.jpg">
<img class="img-tab" src="symm-top-medium.jpg">
<img class="img-sp" src="symm-top-small.jpg">CSS
.img-sp {
display: block;
}
.img-pc
.img-tab {
display: none;
}
@media only screen and (min-width: 960px) {
.img-pc {
display: block;
}
.img-tab,
.img-sp {
display: none;
}
}
@media only screen and (min-width: 481px) {
.img-tab {
display: block;
}
.img-pc,
.img-sp {
display: none;
}
}この方法では切り替える画像をすべて読み込んだうえで表示切替を行うので、スマートフォンで見たときなどに読み込みに時間がかかってしまいます。
サイトの読み込み時間が長くなるのは、検索順位にも、直帰率にも悪影響です。
昔からある方法ではありますが、せっかくレスポンシブでモバイルフレンドリーなサイトを作るのであれば、避けたほうがいい手法です。
picture要素を使用する
※IEで動作させるには、記事内で紹介した「picturefill.js」が必要です！
picture要素は、HTML5.1で追加されたタグで、sourceタグとimgタグを子要素に持つことで機能します。
複数の画像リソースの中から、ブラウザの状況に応じて画像を切り替えしてくれます。 記述例は以下になります。
<picture>
<source media="(min-width: 960px)" srcset="symm-top-large.jpg">
<source media="(min-width: 481px)" srcset="symm-top-medium.jpg">
<img src="symm-top-small.jpg">
</picture>sourceタグのmedia属性に切り替え条件となる画面幅を記述し、srcset属性に画像のパスを記述します。
media属性にマッチしなかった場合には、imgタグの画像が読み込まれます。CSSのMedia Queryと同じようなイメージです。
また、sourceタグのsrcset属性は本記事で紹介したものと同じものなので、以下のように細かく出し分けを行うこともできます。
<picture>
<source media="(min-width: 960px)"
srcset="symm-top-large.jpg,
symm-top-large_2x.jpg 2x,
symm-top-large_3x.jpg 3x" />
<source media="(min-width: 481px)" srcset="
symm-top-medium.jpg,
symm-top-medium.jpg 2x,
symm-top-medium.jpg 3x" />
<img srcset="symm-top-small.jpg,
symm-top-small.jpg 2x,
symm-top-small.jpg 3x" />
</picture>この例では、画面幅とデバイスピクセル比に応じて画像切り替えを行っています。
まとめ
今回の記事ではsrcset属性の用途と記述方法についてご紹介いたしました。 これからのモバイルファーストを意識したサイト制作の際、各端末で適切な画像の切り替えをして見栄え良いサイトにするのに必須の属性ですので、記述方法については強く覚えておくべきでしょう。
シンメトリックでは、srcset属性なしでも画像の切り替えができ、レスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、是非ご検討ください。