レスポンシグRetina対応！srcsetを使っていこう！

どうも、Tommy(@SitommyBlog)です。

今回は、『srcset』について紹介していきたいと思います。

srcsetとは、HTML5から使用できるようになったもので、とても便利なのでまだ使ったことない人や知らなかった人はこの機会に是非使って下さい。

srcsetとは？！

昨今では、Retinaディスプレーを使用するユーザーが圧倒的に増えてきてます。
srcsetを使うことで、Retinaディスプレーなどの高解像度を使用しているかどうか、画面サイズが変更したかどうかなど自動で判断をしてそれぞれにあった画像を選択して表示してくれるようになります。

設定方法

設定方法は大きく２つあります。
それは、解像度で切り替えする仕様と、画面サイズで切り替えする仕様です。

もちろん、解像度の切り替えと画面サイズの切り替えを同時に設定することも可能です。

解像度で切り替えする

<img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample@2x.jpg 2x"
     alt="サンプル画像">

上記のコードで、『2x』が書かれている箇所がRetina時に対応させるものになります。

まず、画像の名前の付け方は任意ではありますがパッと見てわかりやすいように『任意の名前@2x.拡張子』とするのが一般的になります。

そして、必ず画像パスの後に『半角スペース 2x』と記述するのをお忘れなく。

画面サイズで切り替えする

<picture>
  <source media="(max-width: 450px)" srcset="img/sample-sp.jpg">
  <img src="img/sample-pc.jpg" alt="">
</picture>

上記のコードのように、画面サイズが450px以下の場合『smaple-sp.jpg』画像が表示され、451px以上の場合『sample-pc.jpg』が表示されるようになります。

これでスマホ時とPC時の画像の入れ替えが楽になります。

また、次のようにRetina対応時も自動で対応させることができます。

<picture>
  <source media="(min-width: 320px)" srcset="img/sample-sp.jpg 1x, img/sample-sp@2x.jpg 2x">
  <source media="(min-width: 640px)" srcset="img/sample-pc.jpg 1x, img/sample-pc@2x.jpg 2x">
  <img src="img/sample-pc.jpg" alt-"">
</picture>

これで、画面サイズ320px以上でRetina対応なら『sample-sp@2x.jp』を読み込んでくれるようになります。

srcsetの本領発揮はここから！

上記で書いてきたことはとても序の口に過ぎません。
srcsetのもっとも重要で本領発揮することとしては、『DPIの高さも計算される』というところです。

どういうこと？！
と感じている方もいるかと思います。
下記のコードを見て下さい。

<img src="img/sample.jpg"
     srcset="img/sample-320.jpg 320w,
             img/sample-640.jpg 640w"
     alt="サンプル画像">

上記のコードで書いている内容とは、画面サイズが320px 以上の時『sample-320.jpg』が表示され、画面サイズが640px 以上の時『sample-640.jpg』が表示されるという意味になります。

先程言った『DPIの高さも計算される』ということは、つまり、Retinaディスプレイで見た時画面サイズが320pxだったとしても640pxの画像を読み込んで表示されるということになるんです。

Retinaだと2倍の解像度なので、『320 × 2 = 640』になるということです。

また、『sizes』を組み合わせることでより柔軟に画像を選択できるようになります。

<img src="img/sample.jpg"
     sizes="(min-width: 640px) 50vw, 100vw",
     srcset="img/sample-320.jpg 320w,
             img/sample-640.jpg 640w"
     alt="サンプル画像">

こうなると、とてもややこしいですが、画面サイズが640px以上のときは画面サイズの半分の大きさの画像を読み込んでくれます。
つまり、ここだと『sample-320.jpg』が読み込まれます。

そして、639px以下の時は画面サイズに対して100%の画像が読み込まれます。

グリッドデザイン等で、重宝するだろうなっと思っています。

まとめ

正直、私自身も後半のようなコードで書いたことは少ないですが、前半で書いた画面サイズによって切り替わる手法で頻繁に使用しています。

srcsetを使えば、必要としない画像に対しては読み込まないっということなのでとてもブラウザにとっても優しいです。

もしブラウザ対応していないとしても、srcsetを読み込まず、srcで設定したものを読み込んでくれますし、『picturefill.js』を入れると対応してくれます。

是非、みなさんもsrcsetライフを送っていただければと思います。