ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2016年8月24日

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

corresponding-to-the-high-resolution-displayoptimize-the-image

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

ディスプレイの構造

わたしたちが普段使用している、
PCやスマートフォンのディスプレイは
小さな点の集まりでできています。

点のことをピクセル(画素)と言い、
ディスプレイのピクセルはR、G、Bの3色に
いわゆる「RGB」カラーで光ることができます。

ディスプレイは、RGBの3色を組み合わせて
色を表現し、映像を出力しています。

ディスプレイの広さの単位には「インチ」が用いられ、
縦横の長さではなく、対角線で計測します。
なので、同じインチ数のディスプレイでも、
アスペクト比(縦と横の長さの比率)が違えば、
ディスプレイの面積は異なります。

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

類似の単位で、dpi(dots par inch)がありますが、
こちらは1インチ中のドット数のことを指します。
ではドットとピクセルの違いは?という疑問が出てくるかと思います。

ドットとは、ディスプレイの物理的な点のことであり、
ピクセルとは、ディスプレイ上で光っている点のことです。
ややこしいですね…。

高解像度画像について

サイトを閲覧時、下図の左のような
モヤっとした画像を見つけたことはありませんか?

retina-img

この現象は、高解像度に対応させていない画像において
おこりえます。

やっぱりせっかくサイトを公開するのですから、
画像も綺麗な状態で見せたいですよね。

弊社デザイン部では現在、サイト制作において
高解像度ディスプレイへの対応を
意欲的に取り組んでおります。

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

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

しかし、時代は進みもっとややこしい話に…。

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秒

rosegarden-0630-0731

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

rosegarden-0801-0822

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

まとめ

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

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

このエントリーをはてなブックマークに追加
メルマガ登録