レスポンシブWebデザインで画像を扱う際にCSSのメディアクエリーを使用するのと同じ要領で表示させる画像を指定できる。
<picture>
<source media="(max-width: 768px)" srcset="./images/img-sp.gif">
<img src="./images/img-pc.gif" alt="">
</picture>
pictureタグで囲い、sourceタグのmedia属性で切り替えポイントを指定する。
上記の場合、横幅768px以下はimg-sp.gifを表示し、その他はimg-pc.gifを表示。
img要素の後に書かれたsource要素はすべて無視されるため最後にimgタグで画像を指定する。
ブラウザがpicture要素をサポートしていない場合は自動的にimg要素の画像が表示される。
※IEは対応していない
