Retina と srcset属性


インターネットを使っていて「このWebサイト遅いな」と感じることはよくあります。私はそういうサイトに出会った時は、耐えきれなくてすぐブラウザバックしてしまいます。ページロードを遅くさせる原因は色々ありますが、ありがちな原因のひとつに "画像サイズが大きい" という問題がよくあげられます。( 先月のWCANでも言われてました
私もサイト制作をする上で画像サイズには気をつけるようにしています。しかし、ここ数日「れてぃなだと画像が汚い」という声が聞こえてくるようになりました。初めて「Retina(レティナ)」という単語を聞いたときはなんの話かと思いましたが、少し調べると普段私が使っているディスプレイよりも解像度が2倍以上のディスプレイのことでした。おぉぅ...。2010年6月からAppleが出していて、結構前から登場していたみたいです。普及速度は遅いようですがじわじわと広がっています。今回は、そんなじわじわ広がりつつある Retina とその対応方法について調べたことをまとめていきます。

Retina とは

Retinaディスプレイ(英語:Retina Display)は、アップル製品のうち、100〜200ppi程度であった従来の倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」(レティナ)は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

引用元:Retinaディスプレイ | フリー百科事典『ウィキペディア(Wikipedia)』

「100〜200ppi の 2倍の解像度だよ!」と言われても、ppi がよくわらなかったので調べました。
まず、解像度は基本的に dpi(dots per inch:ドットパーインチ)という単位であわらされます。dpi は1インチあたりどれだけの "画素" つまり画像を構成する点が詰まっているかという意味です。ちなみに1インチは2.54cmです。

さて、本題の ppi(pixels per inch:ピクセルパーインチ)は dpi とほぼ一緒の意味だそうで、1インチあたりのピクセル数 を表す単位みたいです。

ということで、 Retina = Appleが出してる高解像ディスプレイ製品 と理解しました!

Retina の対応方法

Retina は他の製品よりも解像度が2倍であるため、32×32 の画像が 64×64 に引き伸ばさせて表示されるため、画像が荒くなったように見えてしまいます。ならRetinaでも画像が綺麗にみえるように2倍サイズの画像をアップロードすればいい!と思うかもしれませんが、それをやってしまうとページロードがどのデバイスでも遅くなってしまいます。

そこで使いたいのが、srcset 属性(ソースセット属性)です。srcset 属性とはHTML5から出てきた img タグにも使える属性になります。ブラウザの幅やピクセル密度に応じて異なる画像を指定できます。

srcset 属性の使い方

srcset属性(ソースセット属性)はブラウザの幅やピクセル密度を指定することができますが、それぞれで書き方が少し異なるため、使用用途別に使い方をまとめていきます。

ウィンドウサイズで画像を切り替える

<img src="path/to/img1.jpg"
    srcset="path/to/img750.jpg 750w,
                   path/to/img1024.jpg 1024w">

これで、ウィンドウ幅が750px以下なら img750.jpg、ウィンドウ幅が1024px以下またはそれ以上なら img1024.jpg が読み込まれます。

「w」とういう単位は with記述子(ウィズ記述子) と言うそうで、画像の横幅を指定します。
※ しかしサイトを調べていると「w属性」と言う人もいます。どれが正しいのかよく分からない...。

ブラウザはなかなか優秀で、画面の解像度がどれくらいあるかまで認識できるようです。そのため、マークアップする時は「〇〇w」と画像サイズを書くだけで、ブラウザが「この画面は解像度が2倍だから750×750の画像ではなく1500×1500の画像を表示させよう」という判断を勝手にしてくれます!すごい!
※前述のようにRetinaディスプレイの場合、750×750の画像をそのまま表示すると画像が2倍の1500×1500に引き伸ばされてしまいます。

ちなみに、src属性を指定するのは、srcset属性に対応していないブラウザ対策です。2018年10月時点ではIEはまだ対応していないようです。( Can I use... 調べ )

カラム対応もできる

例えば、画面幅が768px以上になるとメインカラム(画面幅3/4)とサブカラム(画面幅1/4)の2カラムになり、768px未満になると1カラムになるサイトがあったとします。srcset属性は画面幅に応じて画像表示が切り替わるよう指定していますので、2カラム以上のサイトの場合はwの幅設定を人間が計算して記述します。
というような面倒なことはしなくても大丈夫です!2カラム以上でもsize属性を使えば簡単に対応できるようになります。

<img src="path/to/img1.jpg"
     sizes="(min-width: 768px) 75vw, 100vw"
     srcset="path/to/img750.jpg 750w,
             path/to/img1024.jpg 1024w">

size属性を使うと、画面幅に対して何パーセントの大きさの画像を表示するかを指定できるようになります。

上記例では、メディアクエリも使うことで、画面幅が768px以上の時、画面の75%の幅に対応している画像が選択されます。そして画面幅が768px未満の時は画面100%の大きさに対応した画像が選択されます。

画面の解像度で画像を切り替える

<img src="path/to/img1.jpg"
    srcset="path/to/img1x.jpg 1x,
                   path/to/img2x.jpg 2x">

srcset属性で指定した画像パスの後ろに「 1x」や「 2x」をつけることで、デバイスの解像度に応じて読み込まれる画像が変わります。解像度が2倍の Retina の場合は img2x.jpg が読み込まれます。

最後に

調べてみた個人的感想なのですが<source><picture> 要素のことや、srcset属性の昔の使い方の話などが入り混じっていて結構混乱しました。。。<source><picture> 要素でもsrcset属性を使うこともできるようですが、私は慣れ親しんだimg要素で活用していきたいなと思っています。

まだ対応していないブラウザや、不安定なブラウザがあるようなので使うときは慎重にブラウザの動作チェックをしていきたいですね。

参考サイト


投稿 2018/10/15