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対応を意識しない場合は、表示サイズの等倍で作成して画像をアップロードするだけです。 アップロードした画像は、トリミングやリサイズ等の編集も行えます。  ]]>