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

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



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

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



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

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

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

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



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

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

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



■注意点

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

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



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

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

・トリミングする
　写真でイメージ画像を表示する場合、撮った写真をそのまま使うのではなく
　不要な箇所はトリミングしましょう。
　ファイルサイズが小さくなるのはもちろん、
　画像のもっているイメージを強めることもできます。
　
・解像度を下げる
　Photoshopなどの画像編集ソフトを使って、解像度を75〜90%に落として保存する。
　最近のデジカメやスマホは高性能なため、多少解像度を下げて保存しても
　見栄えはほとんど変わりません。

・出来るだけファイルの小さくない保存形式を使う
　JPEG：景色／人／食べ物の写真など、色表現が複雑な画像
　PNG：図形／イラスト／サイトキャプチャなどの、いろ表現た単調な画像
　SVG：アイコン画像※
　　　　
　※SVG形式はベクトル形式の画像のため拡大、縮小しても劣化しません。
　　そのためRetinaディスプレイ用に２倍サイズの画像を用意する必要もありません。
ーーーーーー


■まとめ

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