HTML5のpictureを使ってみる

HTML5のpictureタグを使ってみます。

対応ブラウザ

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

サンプルコード

pictureを使う場合、中にsourceタグとimgタグを追加します。

HTML

<picture>
	<source media="(min-width: 960px)" srcset="./img/image03.jpg">
	<source media="(min-width: 768px)" srcset="./img/image02.jpg">
	<img src="./img/image01.jpg" alt="">
</picture>

sourceタグのmediaにメディアクエリの値を、srcsetで画像ファイルのパスを指定します。
この場合は960px以上でimage03.jpg、768px以上でimage02.jpg、それ以外はimage01.jpgが表示されるようになります。
pictureのデモページ
　

【参考サイト】

• レスポンシブイメージのネイティブサポート – HTML5 Rocks