2019年03月12日

デザイン探索

「ディスプレイ」と「解像度」_3(「レティナディスプレイ」とその対応)

皆さんこんにちは。
アシスタントクリエイターの村本です。

今回はRetinaディスプレイ(レティナディスプレイ)への対応についてです。

前回の記事はこちら

液晶ディスプレイに関する基礎知識(「ディスプレイ」と「解像度」)

解像度について(「ディスプレイ」と「解像度」_2)

■そもそもRetinaディスプレイとは?

ひとことで言うと、通常のディスプレイの2倍の解像度を持った高解像度ディスプレイのことです。
Macや、iPhoneのディスプレイがこれにあたります。

■Web制作においてどんな影響があるの?

通常のディスプレイが1pxで表現するところを、
Retinaディスプレイは(縦・横2倍の)4pxで表現します。

そのため、グラデーションや影など、曖昧な色で表現している部分がぼやけてしまうのです。
写真を使って訴求することを目的としているのに、画像がぼやけてしまっては台無しです…。

Macや、iPhoneによるサイト利用者は非常に多いため、
Retinaディスプレイへの対応が必要になってきます。

■Retinaディスプレイへの対応方法

いくつか対応方法はありますが、一番基本的なものは次の通りです。
①表示したい画像サイズの2倍で画像を作成(書き出し)しておく
②html,cssで縮小表示する

例:800×500pxで画像を表示したい場合
・1600×1000pxで画像を書き出す(img_text.jpg)
・html,cssで画像のサイズを指定して表示 

<img src="img_test.jpg style=“width:800px; height:500px;">

■注意点

上記の方法で、Retinaディスプレイへの対応はできるのですが、
Webサイト自体が重くなる(表示が遅くなる)恐れがあるため注意が必要です。

表示の遅いサイトは、SEOとしても良くないですし、ユーザの離脱にも繋がります。
サイズの大きい画像は、単純にファイルサイズも大きくなってしまうため、
画像掲載前に確認して、ファイルサイズを小さくする必要がありますね。

■画像のファイルサイズを小さくする

・画像をリサイズする
 100×100pxの画像を表示したい場合に、500×500pxの画像サイズは不要です。
 Retinaディスプレイへ対応するとしても200×200pxにリサイズしましょう。

・トリミングする
 写真でイメージ画像を表示する場合、撮った写真をそのまま使うのではなく
 不要な箇所はトリミングしましょう。
 ファイルサイズが小さくなるのはもちろん、
 画像のもっているイメージを強めることもできます。

・解像度を下げる
 Photoshopなどの画像編集ソフトを使って、解像度を75?90%に落として保存する。
 最近のデジカメやスマホは高性能なため、多少解像度を下げて保存しても
 見栄えはほとんど変わりません。

・出来るだけファイルの小さくない保存形式を使う
 JPEG:景色/人/食べ物の写真など、色表現が複雑な画像
 PNG:図形/イラスト/サイトキャプチャなどの、いろ表現た単調な画像
 SVG:アイコン画像※

 ※SVG形式はベクトル形式の画像のため拡大、縮小しても劣化しません。
  そのためRetinaディスプレイ用に2倍サイズの画像を用意する必要もありません。
ーーーーーー

■まとめ

画像は、読む必要がなく、一瞬で情報を伝えることのできる優秀な表現です。
デザイナーとしてデザインや導線設計と同じくらい意識して、
作成、実装(表示)できるように努めていきたいです!