srcset属性の使い方。画像の表示を高画質ディスプレイに対応させる方法

エンジニアの山岡です。

最近のパソコンやスマホの画面はすごくキレイですよね。
まるで写真でも見ているかのような画像。
画面の向こう側には本物の景色が広がっているんじゃないかとさえ思えてしまう様な美しさ。

さて今回は、Retinaディスプレイに代表されるような高画質ディスプレイに対して、ウェブサイトでは高画質な画像表示をどの様に実装するのか見ていきたいと思います。

CONTENTS

今回使う画像はコチラ

srcsetを使うために画像を２つ用意します。

Retinaディスプレイが登場するまでは、imgタグはこの様に記述していました。
今でも高画質ディスプレイに対応しない場合、これでOKです。

<img src="photo001.jpg" 
width="500" height="350" 
alt="">

さて、これだけだと高画質ディスプレイでは画像がぼやけて見えてしまいます。下のDEMOでは、山の輪郭がハッキリしません。（分かりづらかったらゴメンなさい。）

そこで、便利なsrcset属性の出番です！

srcset属性を設定すると、デバイスの解像度によって最適な画像を表示してくれます。
複数の画像を用意する必要があるため制作側の手間は増えるものの、必要な画像だけダウンロードされるので、ユーザー側に無駄な通信は発生しません。
賢い！

<img src="photo001.jpg" 
srcset="photo001.jpg 1x, photo001@2x.jpg 2x" 
width="500" height="350" 
alt="">

いかがでしょうか。
大自然に降り立ったかのような絶景が目の前に広がっていたはず！
スマホで見ている方は、拡大してみると違いがよく分かると思います。

これでもう、

「作ってもらったホームページなんだけど、なんか画質悪いみたいなんだよね」

的なクレームは発生しません！
iPhoneのRetinaディスプレイだろうと、Androidの高精細ディスプレイだろうとドンと来いです。

高画質ディスプレイ時代を生きる我々にとって、srcset属性はまさに鬼に金棒!!

まず、画像を２つ用意します。

srcset属性は、低い解像度の画像から順に記述していきます。

ファイル名の後ろは半角スペース１つ分空けて解像度（1x、2x、3x、...）を記述します。
解像度は、ドットバイドットなら1x、Retinaディスプレイなら2xです。
3x以上を私は使ったことがありませんので、ここでは2xまでとします。

用意する画像の寸法は、サンプル画像が縦500×横350pxですので、1xは縦500×横350px。2xは2倍して、縦1000×横700pxとなります。

ちなみに画像のファイル名の末尾についている「@2x」とは「2倍の解像度だよ」という意味の接尾語です。
3倍解像度の場合は「@3x」、4倍は「@4x」です。

<img src="photo001.jpg" 
srcset="photo001.jpg 1x, photo001@2x.jpg 2x" 
width="500" height="350" 
alt="">

※ここで注意する必要があるのが、srcset属性を追加しても、src属性は消さないということ。
InternetExplorer~~（問題児）~~がsrcset属性に対応していないからです。

いかがだったでしょうか。従来のimgタグに一手間加えるだけで、簡単に高画質ディスプレイに対応できました。画像を複数枚作成する手間も、慣れてしまえば苦になりません。

Adobe XD等のデザインツールを使ってデザインすれば、画像を書き出す際に一括で複数の解像度で書き出すことができます。

またWordPressなどのCMSでは、自動で高解像度に対応した処理をしてくれるものもあるので、知らないうちにsrcset属性の恩恵を受けているかもしれませんよ。

今回のようにsrcset属性だけで実装する方法以外にも、sizes属性を使う方法や、1x、2xの代わりにvwを使う方法もありますが、srcset属性だけで実装する方法が一番シンプルで可読性が高く、メンテナンスしやすいのでオススメです。