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
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031