
画像を高解像度デバイスに最適なサイズで表示する Retina jsの使い方
従来のデスクトップモニターでは画像の表示に違和感は無いが、スマートフォンやタブレット等の高解像度ディスプレイではテキストが綺麗(滑らか)に表示されているのに対して画像が少しぼけたような表示になります。retina.jsで、このぼけを解消することができます。
Retina jsの使いかた
retina.jsの仕組みは、ページをロードする際に高解像度ディスプレイかを判別して、その場合は高解像度ディスプレイ用に用意された画像を従来の画像と差し替えます。要するにサイズ違いの同じ画像を2種類用意してそれを使い分ける形になります。
HTML head
<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
retina.jsからダウンロードしたファイルをサーバへアップロードして、HTMLの head要素内に指定して読み込ませます。
標準のディスプレイ用の画像と2倍のサイズにした高解像度ディスプレイ用の画像を用意します。
画像 | 画像のサイズ | 画像の名前 |
---|---|---|
標準 | 標準サイズ | sample_img.jpg |
高解像度 | 2倍のサイズ | sample_img@2x.jpg |
ページの全ての要素が表示される前に retina.jsがデバイスに適した画像を自動的に読み込んでくれます。