今では常識!imgタグの「srcset」で高解像度ディスプレイRetinaに対応しよう!

今回は、imgタグやpictureタグで使える「srcset」について紹介していきます!
「srcset」を使うとユーザーが使っているデバイスによって画像を出し分けできます。
サイトの速度改善にも使えるので積極的に取り入れましょう!!

まずは基本的な書き方

<!-- imgタグの場合 -->
<img src="/img/image.jpg"
         srcset="/img/image.jpg 1x,
                      /img/image@2x 2x">

<!-- pictureの場合 -->
<picture><source srcset="/img/image.jpg 1x,
                                           /img/image@2x.jpg 2x">
</picture>

srcsetとは?

みなさんは、imgタグやpictureタグで使える「srcset」を知っていますか?

srcsetとは、ユーザーが使っているデバイスの解像度や画面幅に応じて画像を出し分けしてくれる機能です!
一言で説明されても(ん?)って感じなので、少しずつ解説していきますね!

srcsetはHTML5.1で登場した、比較的新しい属性になります!
なので、いつも僕たちの進化を止めているIE11(通称:ブラウザの悪魔)では使うことができません・・・。
ブラウザの対応状況(Can I Use)

しかし!

近年では、IE11非対応のサービスも増えてきているため「srcset」を使う機会はグッと増えてきています。

この記事では「srcset」の書き方・使い方を紹介していきます。

srcsetの書き方をマスターしよう

では、さっそくsrcsetを書いてみましょう!
srcsetには「デバイスの解像度で出し分ける方法」と「viewportで出し分ける方法」があります。

よく使うのは前者になります。
高解像度のデバイスになると、その分大きな画像を用意する必要があります。
高解像度のデバイスで等倍以下の画像を使ってしまうと画像がぼやける現象が起きます。

だけど、ユーザによっては解像度が高くないデバイスで見ている場合もありますよね。
そのデバイスで高解像度用の画像を表示しても通信量を圧迫して表示速度が遅くなるだけで、大してメリットがありません。

srcsetで出し分けることで、通信量を圧迫しないでページを表示できます。

後者は、pictureタグやCSSのメディアクエリで何とかなるので、あえて使う必要はない気がします。
viewportで出し分ける方法は別記事で紹介したいと思います!

デバイスの解像度で出し分ける書き方

<!-- imgタグの場合 -->
<img src="{等倍の画像パス}"
         srcset="{等倍の画像パス} 1x,
                      {2倍の画像パス} 2x">

<!-- pictureの場合 -->
<picture><source srcset="{等倍の画像パス} 1x,
                                           {2倍の画像パス} 2x">
</picture>

まずは、テンプレート!
使うときは、{…}の部分を変えてください。
形は冒頭で紹介したコードと同じです。

もちろんキモとなるのはsrcset属性。

srcset="{等倍の画像パス} 1x, {2倍の画像パス} 2x"

ダブルクォートの中に「画像のパス」「1x」もしくは「2x」と書きます。
複数の画像を指定する場合は、カンマ( , )で区切ってあげます。

「1x」は等倍、「2x」は2倍の解像度を表しています。

ちなみに、2倍の場合は「@2x」、3倍の場合は「@3x」を画像名に付けてあげます。
必須ではないけど、マナーとして覚えておきましょう!

  • 等倍の場合:image.jpg
  • 2倍の場合:image@2x.jpg
  • 3倍の場合:image@3x.jpg

srcsetを使うと何が幸せなの?

srcsetを使うことで、次のような幸せを掴むことができます!

srcsetを使ったメリット

  • 画面の解像度に応じて画像を出し分けできる
  • ページの表示速度が速くなる
  • 高解像度ディスプレイでもキレイに映る

来てくれたユーザが幸せになれそう・・・。

開発側にとっても表示速度が早くなるとSEOで高評価を取れるので幸せになれます!

みなさんもぜひsrcsetを使ってユーザーを幸せにしてあげましょう!!
最後までありがとうございました!!