サイト制作に関するメモ書き

HOME > HTML・CSS > HTML5のsrcset属性を使ってみる

HTML5のsrcset属性を使ってみる

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

対応ブラウザ

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

try-using-the-srcset-attribute01

サンプルコード

画像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
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP