HTML 5.1の新要素picture入門

(2016/09/26 追記)
picture要素について、ICS MEDIAにて更に詳しく解説しました。こちらも合わせて参照ください。

レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA

---

HTML 5.1にて実装される新要素picture要素を使うと、CSSメディアクエリを使って画像を出し分けることが可能です。

例えば、ビューポート横幅が700px以下の時、a.pngという画像を表示するコードは下記のとおりです。個別の画像の指定はsource要素で行い、画像パスをsrcset属性、メディアクエリをmedia属性でそれぞれ指定します。また、picture要素に対応していないブラウザの為に、img要素も必ず指定します。

<picture>
  <source media="(max-width: 600px)" srcset="images/a.png">
  <img src="images/c.png" alt="">
</picture>

source要素は複数指定できます。ビューポート横幅が600px以下、600px以上700px以下、それ以外でそれぞれ画像を出し分けるコード例は次です。

<picture>
  <source media="(max-width: 600px)" srcset="images/a.png">
  <source media="(max-width: 700px)" srcset="images/b.png">
  <source srcset="images/c.png">
  <img src="images/c.png" alt="">
</picture>

デモはCodePenにアップしました。picture要素に対応しているブラウザで動作します。

• デモ
• ソースコード

ウインドウサイズに応じて、a.png、b.png、c.pngの画像が切り替わるのがわかります。

#主要ブラウザの最新版で使用可能
iOS 9.3、Android Browser 50がpicture要素に対応したことで、デスクトップ・モバイル含む現在の主要ブラウザ全てでpicture要素が使えるようになりました（※）。もしそれ以外のブラウザでも使用したい場合は、「Picturefill」等のポリフィルを使用するとよいでしょう。

次回の記事「コマ撮りアニメをHTML 5.1のpicture要素だけで作る方法(CSS、JavaScript不要)」が応用編となっていますので、是非ご覧ください。

※ Can I use picture