目新しい「pictureタグ」
「AbemaTV」で動作する「Lightbox」のコードを作っていて、このサイトの動画サムネイルが全て「pictureタグ」で構成されている事に気付きました。 どこかで見た事がある様な気はしつつも調べて納得。 これは現代的なスマホやPCやタブレットなど、色々な環境からの閲覧に画像を対応させるHTML機能らしい。
picture要素の基本
色々なサイトに書かれていますが、主に以下を参考にしました。
基本形
<picture>タグ内に「任意の数の<source>」と「1つの<img>」を配置する
◎ブラウザは参照されているデバイス環境等から判断して、上記の候補のいずれかを表示する。 その時の判定に属性が利用される。
◎上から候補の条件が判定され、どれにも合わないと「img」が選択される。 言い方を変えれば、属性でブラウザの選択をコントロールできる。
「AbemaTV」の実際の使用例
下は、動画サムネイルの一例です。
実際の「picture要素」のコード
このサムネイルのHTMLは以下ですが、全てのサムネイルがこの様な形でした。
上の「picture要素」のHTMLの模式図です。
先の「picture要素の基本 」の応用といった感じで、「img要素」の方にも「srcset」があります。
実際に表示されている画像
ここではPCで閲覧していますが、5個の候補のどの画像が表示されているかは、案外判り難いです。
デスクトップにドラッグアウトすると「384×216px」の「webpファイル」になりましたが、DevToolsで確認を試みました。
下は、DevToolsによる実画面側のサイズ表示です。
一方、DevToolsのHTMLは以下ですが、5個のURLをポイントすると、上の2個と下の3個のポップアップ表示が異なり、「レンダリングサイズ」が、実際の画面上のサイズ表示と一致するポップアップは下の3個をポイントした場合でした。
下の3個は、「レンダリングサイズ 260×146px」です。 上図でポイントしているのは「jpeg」の「srcset」のコードで、ポップアップの表示内容と食い違い、どうやらポップアップの表示の方が信頼できそうです。
ポップアップの「現在のソース」を信用できるとすると、「webp」「width=384」に該当するURLは「第1候補」の「srcset format=webp width=384 1×」と推測されます。 これは、ドラッグアウトしたファイルと一致し、間違いないでしょう。
興味深いのは、DevToolsでポイントしたコードのURLとポップアップの内容が相違している点で、それがなければあれこれ推測する必要はなかったのですが。 要は「レンダリングサイズ」が実際と一致する「ポップアップ」で判断すると良さそうです。