PHPを使って画像を高解像度デバイスに最適なサイズで表示させる Retina Imagesの使い方

PHPを使って画像を高解像度デバイスに最適なサイズで表示させる Retina Imagesの使い方

Retinaディスプレイなどの高解像度ディスプレイに画像を対応させる方法として代表的なのが Retina JSですが、通常解像度用の画像を読み込んだ後にサーバーに高解像度用の画像が存在するかを確認するため画像がページ内に多いほどトラフィックが増大してしまいます。そこで、PHPで高解像度ディスプレイに対応させる Retina Imagesを使用する事で無駄なトラフィックやクライアントPCの負担を抑制することができます。

Retina Imagesの使い方

まずは Retina Imagesのサイトからファイルをダウンロード。解凍したファイル内にある retinaimages.phpをサーバーのルートディレクトリにアップロードします。

HTML body
<img alt="画像の説明" src="画像URL@2x.jpg" width="" height="">

高解像度用と通常解像度用の2つの画像を用意して、高解像度用の画像名の最後には@2xを付け、HTMLに記述する img要素には widthと heightを指定します。

.htaccess
RewriteBase /
RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
RewriteRule \.(?:jpe?g|gif|png|bmp)$ /retinaimages.php [NC,L]

.htaccess内に上記のように記述します。mod_rewiteでサイト上で使用される画像を retinaimages.phpにリダイレクトさせます。

HTML head
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
document.cookie='devicePixelRatio=' + ((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio) + '; path=/';
</script>

HTMLヘッダー内で、最初の CSSよりも前の位置に上記スクリプトを記述します。cookieには devicePixelRatioの値が記憶され、それを元に高解像度ディスプレイかを判定します。cookieがオフの場合いは通常解像度ディスプレイ用の画像が表示されます。

HTML head
<noscript>
<style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">
#devicePixelRatio {
  background-image:url("retinaimages.php?devicePixelRatio=2");
}
</style>
</noscript>

上記スクリプトを body要素内の先頭に記述します。これで高解像度ディスプレイの場合には画像名の最後に @2xが付いた画像を表示してくれます。

背景画像の指定方法

CSS
.bg_retina {
  background: url(画像URL); background-size: 30px 30px;
}

高解像度用の画像を正常に表示させるために background-sizeの指定は必須です。

Retina Images
ページの先頭へ