超高解像度の時代がすぐそこにpictureとsrcsetを使いこなして最適な画像指定をしよう

先日iPhoneXの発表がありましたね。僕が何より驚いたのはその解像度。2,436×1,125ピクセルです。これまでは高解像度スマートフォン向けに実際の2倍のサイズの画像を用いてコーディングをしてきましたが、このiPhoneXでも綺麗に画像を見せるには3倍のサイズが必要になります。

またPCでも4Kディスプレイやウルトラワイドディスプレイなど高解像度モニタが普及しつつあります。

それでは高解像モニタに合わせてWebサイトの構築でも高解像度の画像を使用していけばいいのでしょうか？それは間違いです。これをするとWebサイトの通信量は大幅に増加してしまいます。モニタサイズに合わせて最適な画像を読み込むことが重要になります。

今回はそういった時に使用するpicture要素とsrcset属性を紹介します。

picture要素

picture要素はブラウザサイズに合わせて一つのimgタグで複数の画像を切り替えて読み込む際に使用します。レスポンシブデザイン等で、ブラウザサイズによってレイアウトなどが変わり、それに合わせたデザインの画像等を表示する際に最適です。

記述例

picture要素は以下のように記述します。

<picture>
  <source media="(max-width: 668px)" srcset="imageA.jpg">
  <source media="(max-width: 978px)" srcset="imageB.jpg">
  <img src="imageC.jpg" alt="画像名">
</picture>

記述の上から順番に判定され条件を満たす場合はsrcsetに設定された画像を読み込み、満たさない場合は次の行の判定がされます。

どの条件も満たさない場合は最後の行のimgタグで指定された画像を読み込みます。

上記の例ではブラウザ幅が668px以下の場合imageA.jpgが、668px以上978px以下の場合はimageB.jpgがそれ以外の場合はimageC.jpgが読み込まれます。

srcset属性

srcset属性は上記のsource要素や一般的なimg要素などで使用できます。こちらも条件に合致した時に指定した画像を表示します。

記述例

srcset属性は以下のように記述します。

<img src="imageA.jpg" srcset="imageB.jpg 2x,imageC.jpg 3x" alt="画像名">

上記の記述例ではRetinaディスプレイなどのピクセル密度が2倍のディスプレイではimageB.jpgが表示され、iPhoneXやiPhoneのプラスシリーズなどのピクセル密度が3倍のディスプレイではimageC.jpgが表示され、それ以外ではimageA.jpgが表示されます。

picture要素とsrcset属性は併用することができ下記のようにも記述できます。

<picture>
  <source media="(max-width: 668px)" srcset="imageA-1x.jpg 1x,imageA-2x.jpg 2x,imageA-3x.jpg 3x">
  <source media="(max-width: 978px)" srcset="imageB.jpg">
  <img src="imageC.jpg" alt="画像名">
</picture>

picture要素とsrcset属性は似たような用途で使用できるので使い分けに悩むこともあるかと思いますが、目安としてpicture要素はウィンドウ幅によって表示させる画像を切り替える場合に使用し、srcset属性は同じ画像で解像度が異なるものを切り替える場合に使用することをおすすめします。

参考にしてみてください。