などの疑問や悩みを解決してまいります。
Web関係のお仕事をされているデザイナーやコーダーは知っておいた方がいい内容です。
それでは解説していきます。
Retinaディスプレイとは
RetinaディスプレイとはApple製品で使用されている高解像度のディスプレイのことです。
通常の解像度の倍の解像度を持っているので、同じ画像表示でもきれいに表示されます。
利用ユーザーからすると画像が綺麗に見えるわけですのでとてもいいことなのですが、制作者からすると利用デバイスによっては解像度が変わってしまうので、Retinaディスプレイの対応もしておかないと逆に画質が悪くなって表示させてしまうこともあります。
Retinaディスプレイの注意点
前述の通りRetinaディスプレイは通常のディスプレイよりも高解像度で表示するためきれいに画像を表示することができますが、デメリットもあります。
画像がぼやけてしまう
Retinaディスプレイではないデバイスで表示されている画像は通常の等倍でサイズで表示されますが、Retinaディスプレイでは2倍のピクセルで表示するため、画像の縦横が2倍になります。
そのときに画像が引き伸ばされるため画像がぼやけてしまいます。
スクリーンショットの画像が2倍サイズになる
通常のディスプレイでスクリーンショットを撮る場合は見えているサイズそのまま書き出されますが、Retinaディスプレイだと2倍のサイズで書き出されます。
実寸幅が600pxの画像が1200pxの幅になるということです。
画像劣化の対処法
対処法は簡単で、使用する画像のサイズを通常の倍でのサイズで作成して、表示させる際はその半分のサイズに縮小します。
例えば縦300px*横300pxの画像の場合は、縦600px*横600pxで作成して、表示させる際は縦300px*横300pxにするということです。
上記のように対応することで、Retinaディスプレイの倍の解像度でもきれいに表示してくれます。
<img src="通常の倍のサイズの画像URL" width="半分のサイズ" height="半分のサイズ" alt="代替テキスト">
