html5のpicture要素を使ってみた

写真が好き、ならpicture要素は外せないということで色々調べて使ってみました。

picture要素って何？
picture要素の対応状況一覧
picture要素ではsource要素を使う
最後にimg要素を使う
参考ページ

picture要素って何？

その名の通り、写真に関する要素であることは間違いないです。そんなの見りゃ分かるよ！というわけで概要を調べてみました。

<picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。（http://www.html5rocks.com/ja/tutorials/responsive/picture-element/）

ということは、CSSでメディアクエリを使用することなく画面サイズに応じて画像をあんなことしたりこんなことしたりできるわけですね！しかし、HTML5のタグはレガシーブラウザでは対応していない場合がほとんどです。というわけで対応表を見てみましょう。

picture要素の対応状況一覧

先日IE11以降のブラウザサポートを終了するという制作者歓喜の出来事が起こりましたが、以下の表を見る限り・・・

Can I use... Support tables for HTML5, CSS3, etc

どうやらIE11にすら対応してないようですね。

※2020年現在、IEに対応させる必要はなくなりました。

picture要素ではsource要素を使う

picture要素自体は特になんの属性も定義されておりませんので、source要素を使います。ここでは、4つの属性を設定できます。

srcset

srcって属性img要素にあるじゃないですか。あれと同じで、画像のパスを指定してあげる属性がsrcsetです。この属性を指定しないと全く使えないので、必ず指定してください。今回

source media="(min-width: 650px)" srcset="http://sp.ske48.co.jp/img/300x365/kawasaki_narumi.jpg"

のように設定しています。

media

これはCSSのメディアクエリのブレイクポイントの設定ですね。先ほどのコードを見ていただければ分かる通り、media=”(min-width: 650px)”みたいな感じで設定していきます。レスポンシブデザインの場合は指定してください。

sizes

画像のサイズを指定できます。sizes=”100px”のようにして指定できます。

type

この属性はいまいち最初は理解しづらかったのですが、どうやらブラウザによって読み込めない画像があった場合どのように表示させるのかを指定できるそうです。例えば「source srcset=”images/taishon.webp” type=”image/webp”」を設定して、webpを読み込めない場合jpeg画像を読み込むみたいな使い方ができます。