HTML 5.1の新要素picture入門 - Qiita(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="im
