画像のRetina対応

Webサイトやアプリで使用する画像をRetina(レティナ)ディスプレイに対応させる方法のまとめ。
Retinaディスプレイは高解像度なので今までの画像の解像度のままでは粗く見えてしまう。

imgタグ

※解像度が2倍のディスプレイだった場合。
大きさが2倍の画像を用意してwidhとheightで１/2の大きさを指定する。

<img src="sampleImg.png" widht="200" height="100">

1	<img src="sampleImg.png" widht="200" height="100">

この場合は幅400px、高さ200pxの画像を用意する。
「srcset」を使う方法もある。

<img src="sampleImg.png" srcset="sampleImg.png 1x,sampleImg@2x.png 2x">

1	<img src="sampleImg.png" srcset="sampleImg.png 1x,sampleImg@2x.png 2x">

「srcset」に対応していないブラウザの場合はsrcで指定されている画像を読んで、「srcset」に対応しているブラウザの場合はsrcsetで指定されている画像を読む。
書き方は「”画像パス(スペース)対応する大きさ”」。「,」で区切る事で対応する大きさを増やせる。
上の場合は、通常(1x)は(「srcset」に対応していない場合含)sampleImg.pngを読んで、解像度2倍(2x)の場合はsampleImg@2x.pngを読むという意味になる。

CSS

メディアクエリを使う。

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

.sample{

background-image: url("sampleImg.png");

background-size: 200px 100px;

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

.sample{

background-image: url("sampleImg@2x.png");

}

※widhtとheightは必ず記載する。
「device-pixel-ratio」とはデバイスのピクセル密度。
「min」は最低(いくつ以上)という意味。この場合は最後に「2」とあるので最低2以上という意味。

Javascript

Javascriptのライブラリを使う方法。
Retinaディスプレイを判断してくれて自動で「@2x」の画像を読み込んでくれる。

retina.js

使い方

大きさ2倍の画像を用意してファイル名末尾に「@2x」をつける。
↓
</body>の直前でretina.jsを読み込む。(公式推奨位置らしい)

SVGファイル

画像をSVGファイルにする。