2014/04/08

高解像度に対応!画像をRetinaディスプレイに最適化する方法

高解像度に対応!画像をRetinaディスプレイに最適化する方法

今回は、最新のアップル製品に採用されているRetinaディスプレイの高解像度に対応する方法をご紹介します。

従来の4倍という高解像度のディスプレイでは、画像が荒くなって表示されてしまうという問題があります。この現象を解決するための3つの手法がありますのでそれぞれ紹介していきます。

目次

Retinaディスプレイとは

Retinaディスプレイとは

Retinaディスプレイは、iPhone4から初めて導入された、Appleが開発した独自規格の高精細ディスプレイのことです。iPhone3GSの実に4倍という高解像度を誇ります。

端末名画面サイズ解像度(ピクセル)
iPhone3GS3.5インチ320×480
iPhone43.5インチ960×640
iPhone5以降4インチ1136×640

iPhone5以降さらに解像度が上がり、より高精細な画面表示を実現しています。

上記のように、Retinaディスプレイは通常のディスプレイに比べはるかに高解像度のため、画像の表示に違いが出るという問題があります。

画像をRetinaディスプレイに対応させるには

imgタグ、CSS、JavaScriptの3つの設定方法でRetinaディスプレイに対応させることが出来ます。

方法1:imgタグ

imgタグでRetinaディスプレイに対応するには、実際に表示したいサイズの倍のサイズの画像を用意します。

実際に表示したいサイズの倍のサイズの画像を用意

マークアップ時には、以下のようにimgタグのwidthとheightを本来表示したい画像サイズに設定します。例で言うと実際の画像サイズは180×200ピクセルですが、90×100ピクセルとマークアップします。

<img src="image@2x.png" width="90" height="100" alt="" />

Retinaディスプレイで表示した際、設定したwidth、heightではなく実際の画像サイズで表示されるため、荒い画像になってしまうのを回避できます。

方法2:CSSメディアクエリ

CSSのメディアクエリを利用してRetinaディスプレイに対応します。

.sample{
  background-image: url("image.png");
  background-size: 90px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .sample{
    background-image: url("image@2x.png");
  }
}

まず通常通り、画像のパスを指定します。その際、imgタグと同様、widthとheightをしっかりと設定しておきます。

device-pixel-ratioとは、CSSピクセルに対するデバイスのピクセル密度のことです。minと付いているように、最低2以上という意味です。Androidの高解像度ディスプレイも対象に含める場合は1.5と設定するとほとんどのデバイスに対応することが出来ます。

方法3:JavaScript

JavaScriptのライブラリを利用する方法もあります。

retina.js

retina.js

bodyの最後に追記するだけで、自動でサーバー内の@2xと付いた画像に切り替わります。

まとめ

これから登場するデバイスのほとんどが高解像度になってくるはずです。ますますこういった対応方法が必要になってきますので、ぜひ覚えておいて下さい。