画像を高解像度デバイスに最適なサイズで表示する Retina jsの使い方

Retina jsの使いかた

retina.jsの仕組みは、ページをロードする際に高解像度ディスプレイかを判別して、その場合は高解像度ディスプレイ用に用意された画像を従来の画像と差し替えます。要するにサイズ違いの同じ画像を2種類用意してそれを使い分ける形になります。

<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>

retina.jsからダウンロードしたファイルをサーバへアップロードして、HTMLの head要素内に指定して読み込ませます。

標準のディスプレイ用の画像と2倍のサイズにした高解像度ディスプレイ用の画像を用意します。

ページの全ての要素が表示される前に retina.jsがデバイスに適した画像を自動的に読み込んでくれます。