画像の出し分けについてちゃんと向き合う

恥ずかしい話ですが、独学を始めた当初から、画像に関してはfigureタグとimgタグだけでここまできました。

しかし、本来であればsrcsetタグなどを用いて、レスポンシブ幅に応じて画像の出し分けをきちんと行わないといけません。

もともと、コードの中身までを見て頂く機会等もなかったのも関係しているかもしれませんが
実務ではそうもいってられないので、ここで一度きちんと向きあうことにしました。

さて、現在ではpictureタグとsrcsetタグを併せて用いるのが良さそうです。
ただ画像の出し分けは少し長めのコードを書かないといけないようです。

幸いにも今触っているpugを用いた画像の出し分け方法を
gulp構築の際にお世話になったのせっちさんがサイトにまとめていらっしゃいました。

ちなみに、Brainの記事内にもありました!
早速取り掛かってみようと思います。

【参考サイト】

https://flex-box.net/mixin-webp/
https://gmo-miyazaki-creators.com/coding/%E3%80%90picture%E8%A6%81%E7%B4%A0%E6%A4%9C%E8%A8%BC%E3%80%91webp-retina-sp-pc-%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E5%87%BA%E3%81%97%E5%88%86%E3%81%91%E3%82%8B/