Microsoft Edge で使う拡張された srcset と picture 要素
今回も Microsoft Edge Dev Blog から
以前、 srcset 使用した場合は解像度のみ使用できました。
今回で使うサンプル
サンプル
ウインドウの幅を変更すると変化を確認できます。
拡張された機能
伸縮する際の画像幅に指定できます。
サイズの属性を使用すると 200px < 350px < 400px ように指定できます。
サイズの属性に固定値を入れることで幅を固定しつつ画面サイズで大きさを変えます。
表示結果は解像度変更するものにスタイル等で画像幅を指定したものと同じです。
picture、source 要素による切り替え
主に一部ブラウザで非対応画像ファイルの表示振り分けや、画面の状態での画像の行事振り分けに使います。
WebP があれば表示させる
画面の向きがポートレートならば専用の画像を表示させる
Media Query のように指定ができ and や or も使えます
まだ実装はされていないようですが、読み込み完了した画像を JavaScript から currentSrc のプロパティで で現在使われている画像のアドレスを取得することができるようです。
また、今回の Edge では幅をサポートしていますが、仕様上では高さも設定できます。
そのうち実装されるかもしれません。