picture要素が便利らしい / HTML5.1
HTML5.1からpictureという要素が使用可能になりました。今まで知らなかったのですが、これがなかなか便利らしいというので調べてまとめてみることにします。
ブラウザの対応状況
さて、HTML5.1から使用可能とのことでしたがブラウザの対応状況はどのような状況なのでしょうか。「Can I use...」で確認してみましょう。
Can I use...の使い方はこちらの記事をどうぞ
ふむ。。ここに表示されている全てのブラウザは対応済のようですね。HTML5.1が勧告されたのは2016年11月1日なのですが各社対応が早いものですね。
ではpicture要素を使うと何が出来るのか。
ピクセル密度に合わせた画像を自動で選択
picture要素を使うとデバイスのピクセル密度を自動で認識して、それに合わせて画像を選択できるようになります。例を出すと、ピクセル密度AだったらB画像、ピクセル密度CだったらD画像ということができるようになります。
これだけだったら別に何も驚きはなく、今までもCSSあるいはjavascriptで出来ていたじゃないかと思われると思います。しかし、picture要素を使うとHTMLのみで上記のことが出来てしまうのです。CSSもjavascriptも必要なくレスポンシブに画像を扱うことが出来る、それがpicture要素の革新的なことなのですね。
それでは使い方を見ていきます。
picture要素の使い方
picture要素の使い方はとてもシンプルです。今回は詳細にわかりやすく記載されているサイトを見つけましたので、そちらのリンクを貼らせていただきます。
picture要素 レスポンシブイメージ（画像内容の最適化） - TAG index
以上、picture要素のまとめでした。
