picture要素について調べてみました

picture要素は2016年9月に勧告されたHTML5.1で新しく加わった要素の一つになります。
レスポンシブサイト作成の際、画像に関してデスクトップ用、タブレット、スマートフォン用などデバイス別にCSSやJSで出し分けていたかと思います。もしくはデスクトップ用の画像をスマートフォンでも使用し、読み込みに時間がかかってるなんて場合も…

そこでpicture要素の出番です。picture要素を使えばHTMLのみでデバイスごとの出しわけが可能です。

肝心なブラウザ対応状況は下記になります(2017年8月時点)

主要なブラウザはほぼ対応してるのですがIEが対応してないですね..ですが、polyfillの「picturefill」などで対応は可能です。

現在のブラウザ対応状況を確認

実際に使ってみる(デモ)

早速どんなものか使って使ってチェックして見ましょう。 下記画像がウィンドウサイズが980px以上、680px以上、0~679pxの3つの分岐点で画像が切り替わるように実装して見ましたので、ウィンドウサイズを大きくしたり、小さくして見てください。

どうですかね、ノートPCを見てる猫、タブレット、油揚げ(スマホ?)の３枚の画像に切り替わったかと思います。
次に実際のソースを見て見ましょう。

上記HTMLの記述のみで、css,js等は一切使用しておりません。簡単な解説としまして、source要素のmediaでwindowサイズ(条件)を記載、srcsetに画像のパスを記述、sourceに当てはまらない条件のもの、ブラウザがpicture要素をサポートしていない場合、img要素が表示されるようになっております。

画面の解像度によって画像を変更する

picture要素では上記の使い方以外に、descriptorを使用しデバイスの解像度やviewportの幅、高さよって表示する画像の変更も可能になっております。

上記画像に関しまして解像度１倍(通常)と解像度2倍対応と4倍対応(こんな解像度で見る人はいないと思いますが念のため)により画像が切り替わります。

ソースは下記になります。

こちらのソースで肝になってくるのが、拡張子(png)の後の2x、4xの部分。
こちらはそれぞれ解像度2倍対応と4倍対応になります。

viewportの幅で切り替える場合160w(160px以下の時)、360w(360px以下の時)などwを使用、高さの場合hを使用します。

いかがでしたでしょうか。まだ使用しているサイトが少ないため、知らない方(僕も最近まで知らなかった)もいたかと思いますが、最新ブラウザではほぼサポートされています。ですが、IEでは非サポートなのでpolyfillを使用しながら、実際に案件などで実装してみてもいいかもしれません。