isyumi_netブログ

isyumi_netがプログラミングのこととかを書くブログ

もっと動的なPictureタグがほしい。

この仕様、1枚の画像をgulpで数種類のサイズ・フォーマットに変換してS3などに置く運用を想定していたと思う。

しかし、今では画像変換機能付きのCDNを通すのが当たり前になった。

つまり、Pictureタグの中で対応している画像サイズを明示する必要がまったくないのだ。また、画像フォーマットごとにURLを指定する意味もない。大体拡張子をみてそのとおりに変換するからだ。

よって、もっと動的な動きが出来るPictureタグが必要だ。オリジナル画像の縦横サイズと、CDNが対応している画像形式だけを指定すれば、動的にURLを変更してくれればいい。

 

タグ

<picture
 src="https://img.example.com/cat.jpg.$format?width=$width&height=$height"
    format="jpg,png,gif,webp,bmp"
    original-width="1200"
    original-height="800"
    size="50w" />

 

 

コレでよくね?