HTML5のsrcset属性を使ってみる

srcset属性を使って画像の出し分けを試してみます。

対応ブラウザ

srcsetの対応ブラウザはこちら
IEやAndroid4.4以下などで対応していないようです。

サンプルコード

画像URLと適用する幅を半角スペースで区切り、それらのセットをカンマで区切ります。

HTML

<img src="img/image01.jpg" srcset="
	img/image01.jpg 640w,
	img/image02.jpg 960w,
	img/image03.jpg 1200w
" />

srcsetのデモページ
注意点として、chromeではブラウザ幅を640pxより大きくしてimage02.jpgを表示させると、640px以下に戻してからリロードを行ってもimage01.jpgは表示されないようでした。
ブラウザによってリサイズ時の挙動が異なるようです。
　

Retinaディスプレイかどうかで画像を切り替えたい場合は、以下のようにします。

HTML

<img src="img/image01.jpg" srcset="
	img/image01.jpg 1x,
	img/image02.jpg 2x
" />

srcsetのデモページ2
　

【参考サイト】

• レスポンシブデザインのコーディングには、srcsetを使う!? | スターフィールド株式会社
• img – HTML | MDN