ああああああああああああああああああああああああああああああ

  • このエントリーをはてなブックマークに追加

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 用と非 Retina 用に画像をそれぞれ作成する必要はなく、常に2倍の(低画質な)高解像度画像を用意すれば十分ということです。
これは、@3x(3倍解像度)の場合でも同じです。

 

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

logoupload

 

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

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

l

 

  • このエントリーをはてなブックマークに追加