高解像度ディスプレイへの対応？

WEB制作

2016.08.24

皆さんは高解像度PCをお使いでしょうか？もしお使いでなくても、スマートフォンは高解像度ディスプレイが定番ですね。

1 ディスプレイの構造
2 高解像度用の画像に対応させる方法
3 まとめ

ディスプレイの構造

わたしたちが普段使用している、PCやスマートフォンのディスプレイは小さな点の集まりでできています。点のことをピクセル（画素）と言い、ディスプレイのピクセルはR、G、Bの3色にいわゆる「RGB」カラーで光ることができます。

ディスプレイは、RGBの3色を組み合わせて色を表現し、映像を出力しています。ディスプレイの広さの単位には「インチ」が用いられ、縦横の長さではなく、対角線で計測します。なので、同じインチ数のディスプレイでも、アスペクト比（縦と横の長さの比率）が違えば、ディスプレイの面積は異なります。

ディスプレイ1インチ辺りのピクセルの密度をピクセル解像度と言い、ppi（pixel par inch）で表します。ppiの数値が高いほど、出力される映像は鮮明になります。

類似の単位で、dpi（dots par inch）がありますが、こちらは1インチ中のドット数のことを指します。ではドットとピクセルの違いは？という疑問が出てくるかと思います。ドットとは、ディスプレイの物理的な点のことであり、ピクセルとは、ディスプレイ上で光っている点のことです。ややこしいですね…。

この現象は、高解像度に対応させていない画像においておこりえます。やっぱりせっかくサイトを公開するのですから、画像も綺麗な状態で見せたいですよね。弊社デザイン部では現在、サイト制作において高解像度ディスプレイへの対応を意欲的に取り組んでおります。

画面解像度の物理値と論理値

話を戻して。解像度とは、本来、密度のことを表していましたが、ディスプレイの総ピクセル数のことも解像度と呼ばれています。区別をつけるために、ディスプレイの総ピクセル数は画面解像度と言います。しかし、時代は進みもっとややこしい話に…。

AppleがiPhone 4で搭載したディスプレイは326ppiの高解像度で、100dpi前後の一般的なディスプレイを大きく上回っており、人間の目ではドットを確認することができないレベルという意味で、Retina（網膜）ディスプレイと名付けられました。

Retinaディスプレイとは？

レティナディスプレイ（英語：Retina Display）は、アップル社製製品のうち、高精細ディスプレイを搭載したモデルに与えられる名称、およびディスプレイそのものを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。
引用 Wikipedia

さて、このRetinaディスプレイの登場により、Webサイト制作時に大きな課題が発生します。Retinaディスプレイが登場するまでは、基本的に画面解像度の物理的な値と論理的な値は同じでした。

物理的な値とは、その名の通りディスプレイの物理的なドット数（画面解像度が1920×1080ならば、物理的な点が縦に1920個、横に1080個並んでいる）で、論理的な値とは、ディスプレイに表示されているピクセル数（画面解像度が1920×1080ならば、1920×1080pxの画像はデスクトップの壁紙にピッタリと収まる）のことです。

画面解像度の物理値と論理値が等しい状態のことを「ドットバイドット」と言います。

ところが、iPhone4では、ディスプレイのインチ数はそのままに、物理解像度は640×960、論理解像度は320×480になりました。（ちなみに、この論理解像度のことをポイントと呼んだりします）つまり、従来のディスプレイでの1ドットのスペースの中に、大きさが縦横半分のサイズまで小さくなったドットが2×2の4つ入りました。

それを1pxとして扱うことにより、フォントや画像の輪郭をより鮮明に描写することが可能になったということです。実際にこの高解像度画像は、閲覧側としても見ていて気持ちがいいですね。

しかし、Retinaディスプレイでもないデバイスですべて高解像度画像を表示させていては、サイト自体が重たくなって、ユーザーの離脱率を高めてしまう原因になりかねません。

どこまで高解像度画像にするか

そもそもサイトの表示が重たい原因として、閲覧側に考えられるのは、

インターネット速度
ブラウザの環境
コンピュータ自体の速度が遅い
（プロセッサまたはメモリが狭い）

などです。

ホームページ作成者側に考えれる原因としては、

サイト上の画像を最適化していない
容量が非常に大きいファイルが読み込まれている
コンテンツが非常に多い
フォントを多用している

などが挙げられるでしょうか。もちろん上記以外にも多くの原因が考えられますが、訪問者のパソコンやモバイルのプロセッサになるべく負担をかけないように、コンテンツを最適化することが重要です。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。

無料会員登録する

Twitterで
確認にする

Facebookで
確認にする

高解像度用の画像に対応させる方法

方法としては、3つほど考えられますが、それぞれメリットデメリットがあります。構築時に何を優先させるか意識して対策しましょう。読み込ませる画像の大きさを半分にする。

メリット：簡単
デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい）
JavaScriptライブラリを使う（今回はRetina.js）
メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい）
デメリット：読み込む画像の数が増えるので、通信量が増える。
Media Queriesを使って高解像度用のディスプレイを判定。
メリット：画面サイズにあった画像を読みこませることができる。
デメリット：毎度高解像度用の画像を設定するのが面倒。

1.読み込ませる画像の大きさを半分にする。

2倍の大きさの画像をwidth、heightで、もしくはCSSで表示サイズを半分に指定するという方法で表示させます。この方法は比較的簡単に使える方法なので重宝しますが、高解像度用の画像と通常サイズの画像を変更するときはHTMLも触って変更しないといけないので、変更箇所が多い場合は少し対応が面倒になります。

向いている設計としては、どれを高解像度、通常解像度で読み込ませるか確定している場合です。

2.JavaScriptライブラリを使う（今回はRetina.js）。

Retina.jsというライブラリーを使う場合でご紹介します。まず、「Retina.js」のファイルをダウンロードします。retina.jsのダウンロード。あとは、解凍したjsファイルを任意のフォルダにうつして読み込むだけです。タグはの直前に記述してください。

<script type="text/javascript" src="retina.js"></script>

これだけで、例えば画像タグがあった場合に、example@2x.pngというRetinaディスプレイ用の画像が存在するかどうかチェックして、存在すれば表示してくれるようになります。

なので、通常サイズの画像と高解像度用の画像と2パターン読み込む事になるので、retinaディスプレイのような端末には負担が増えてしまいます。向いている設計としては、通常サイズの画像を基本として読み込み、高解像度用の画像は選定して読み込む場合です。

また、どれを高解像度用に読み込むか決まっていない時も簡単に変更できるので後々の修正がやりやすいです。軽量化を意識してサイトを作る場合はこの方法がオススメです。

3.Media Queriesを使って高解像度用のディスプレイを判定。

Media Queriesでretina化判定して読み込む画像を切り分ける事ができるので下記のように記載します。

#bg_test1 {
background: no-repeat;
background-image: url(../img/sample.jpg);
width: 320px;
height: 250px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#bg_test1 {
background-image: url(../img/sample@2x.jpg);
background-size: 320px 250px;
}
}

きちんと通常サイズの画像と高解像度用の画像を切り分ける事で通信量を抑えることができます。しかし、背景で画像を読み込む際に毎度書くのは面倒ですね…

向いている設計としては、通常サイズの画像を基本として読み込み、高解像度用の画像は選定して読み込む場合です。ですので2番のJSを使うタイプの仕様と相性が良いので、軽量化を意識してサイトを作る場合は2がおすすめです。

ここまでRetina画像の素晴らしさをお伝えしてきましたが、最近手がけたWordPressリニューアル案件で、見栄え重視で綺麗な写真をビッグサイズで多用したが故に、サイトの表示速度が落ちてしまい、結果離脱率を高めかねない事態に陥ったため、急遽対策を施しました。

今回のサイトでは、1.読み込ませる画像の大きさを半分にする。で高解像度画像を読み込ませていましたが、残念ながらこの手法ではサイトが重たくなりすぎたため、原点回帰し、すべて等倍画像で表示させるようにしたところ、それにより、以下のように速度が劇的に早くなりました。