srcset属性の使い方

Retinaディスプレイ対応をする際、どういう方法を採用するのがよいかいつも悩んでしまいますが、<img>についてはsrcset属性を使うのが良さそうな感じです。

使い方は以下のようにします。

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

こうすることで、対応していないブラウザではimage-src.pngの画像が表示され、対応しているブラウザではデバイスピクセル比に応じた画像が使われるようになります。

ブラウザの対応状況については以下のリンクで紹介されています。

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/

リンク