Retina対応の必要性と用意すべき画像の解像度

この記事は1年以上前に投稿された記事です。情報が古い可能性があります。

Retinaディスプレイとは、アップル製品のうち100〜200dpi程度であった従来の倍の解像度、高画素密度のディスプレイを指す名称です。
最近のiPhoneやMac Book、Apple WatchなどRetinaディスプレイを採用する機種ばかりになっていて、身近なものになっています。

web制作者が気を付けなければならない、Retina対応についてまとめます。

Retinaとは

「Retina」(レティナ)は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えているということから名付けれたそうです。

2010年6月発売のiPhone4から採用され、iPad、MacBook Proなどあらゆる端末に搭載されています。

WEB制作者側としては、従来のディスプレイで表現できるぎりぎりの解像度で画像を配置していた場合、レティナディスプレイで見るとちょっともやっとした画像になってしまいます。
そこでRetinaディスプレイに対応する場合は2倍の解像度のある画像データを用意しなくてはなりません。
– 高解像度の画像を用意する
– svgデータを使う
のどちらかで対応します。
しかし、従来の画素密度ディスプレイを使用しているユーザーもたくさんいるので、出し分けをしておくと良いでしょう。

2017年もおわりかけですが、最近はApple製品だけでなく、様々なデバイスの画面が高解像度化しています。

Apple製品の高画素密度ディスプレイがRetinaと呼ばれているだけなので、その呼び名でなくとも高画素密度に対応したAndroid端末はあります。

参考

Retinaディスプレイ – Wikipedia
https://ja.wikipedia.org/wiki/Retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4

「えーと、画像は全部2倍で作ればOKなんだよね?」を卒業しよう | un-Tech
http://un-tech.jp/display-resolution/