Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称です。
こうした高解像度端末では、通常のディスプレイに比べはるかに高解像度のため、通常の解像度で作成した画像がぼやけて表示されてしまいます。
そこで、通常、320×240pxの画像をRetinaに対応させる場合、2倍の640×480pxの画像を作成します。
このことより、画像サイズのデータが大きくなるのが一般的ですが、Retinaに対応させるための高解像度の画像を作成する際に、 画質を80や90 にする必要はなく、20か30 で十分であり、かつ非Retina用画像に比べてファイルサイズが75% 程度で済みます。

以下の画像を対比してもらうとわかるように、左が、【表示サイズ等倍、画質90%】で作成したjpg画像で、右が【2倍のサイズで作成、画質50%】で書き出したjpg画像ですが、どらちもほとんど目視では画質に違いが分からないレベルで、大きいピクセルサイズで、低画質で書き出したjpg画像のほうがデータサイズを抑えることができます。


つまり、Retina 用の高解像度画像なら、画質をかなり落としても十分綺麗に見えるので、Retina 用と非 Retina 用に画像をそれぞれ作成する必要はなく、常に2倍の（低画質な）高解像度画像を用意すれば十分ということです。
これは、@3x（3倍解像度）の場合でも同じです。

Retina用画像に対応する方法はいくつかありますが、当isotypeテーマでは、デバイスやブラウザに極力依存させないために、cssで縮小するという手法をとっています。
例えば、表示サイズが高さ65pxのロゴ画像を、Rertian対応する場合であれば、高さ130pxで画像を作成してアップロードします。
そして、「ヘッダーロゴの最大高さ」を、その1/2のサイズである「65px」に指定します。


Rertian対応を意識しない場合は、表示サイズの等倍で作成して画像をアップロードするだけです。

アップロードした画像は、トリミングやリサイズ等の編集も行えます。


 

Tweet