HTML5 で導入された picture 要素だけど、存在は知りつつも、仕事のコードで使ったことはないし、どういうマークアップをするとどういう挙動になるのかをよく知らないままだった。なんかの記事で紹介されているのを見て、改めて調べてみるかってことで調べてみた。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture
マークアップについては冒頭に分かりやすくまとめられていた。
HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。
ざっと読んだところ、source 要素でいくつかの画像のバリエーションを定義しつつ、その中からブラウザが最適な source 要素を選択して、それを同じ picture 要素内の兄弟にあたる img 要素の領域に表示するという感じっぽい。img 要素に直接指定した src はフォールバックとして使われる様子。この img 要素の使われ方がよく分かってなかったんだな。
source 要素で定義する画像のバリエーションは主に以下の3つの軸で提供するとよさそう:
- ファイルフォーマット
- 画面サイズ
- DPI
最近 Web アプリケーションのパフォーマンスに関心があることもあって、PageSpeed Insights で遊んだりしているのだけど、画像のファイルフォーマットの最適化はよく指摘される事項なのだった。webp にしろ、的なやつ。picture 要素使うと楽そうだな。