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

記事公開日:2016.08.24

最終更新日:2017.10.18

530 PV

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

ディスプレイの構造

わたしたちが普段使用している、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ディスプレイでもないデバイスですべて高解像度画像を表示させていては、サイト自体が重たくなって、ユーザーの離脱率を高めてしまう原因になりかねません。

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

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

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

などです。

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

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

などが挙げられるでしょうか。

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

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

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

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

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

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

変更箇所が多い場合は少し対応が面倒になります。向いている設計としては、どれを高解像度、通常解像度で読み込ませるか確定している場合です。

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

Retina.jsというライブラリーを使う場合でご紹介します。まず、「Retina.js」のファイルをダウンロードします。retina.jsのダウンロード

あとは、解凍したjsファイルを任意のフォルダにうつして読み込むだけです。タグはの直前に記述してください。

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

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

また、どれを高解像度用に読み込むか決まっていない時も簡単に変更できるので後々の修正がやりやすいです。

軽量化を意識してサイトを作る場合はこの方法がオススメです。

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

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

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

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

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

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

2倍画像使用時のサイト速度:12.24秒

等倍画像に戻した後のサイト速度:4.14秒

一概にすべてRetina対応させればいいというお話でもないということがお分かりいただけたでしょうか。今回のサイトでは、ロゴや小さなアイコンなどの、画像がもやもやしては困るところのみRetina対応させましたが画像を多用するサイトでは、部分的な対応をおすすめします。

まとめ

LTEが順次拡大しているとはいえ、スマホの通信量はまだまだ気にかけられていますのでできるだけ軽い表示が望まれます。制作再度としては綺麗な画像で提供したいところですが、そのために読み込みに時間がかかってユーザーにストレスを与えてしまってはせっかくの綺麗な画像も意味がありません。

すべてにおいて高解像度用の画像を用意するのはあまり得策ではありません。要所要所で用い、できるだけユーザーに負担をかけない表示速度で提供できるよう、心がけましょう。

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事