pictureタグで画像のレスポンシブ対応

IE終了以降のマークアップで、pictureタグを採用して画像のレスポンシブ表示を対応しました。
pictureタグを利用すれば、HTMLのみで画像をレスポンシブに切り替えできます。
IE対応不要でしたらpolyfillも必要ありません。

• HTML

<picture>
  <source srcset="pc.png" media="(min-width: 767px)" />
  <img src="smp.png" />
</picture>

メディアクエリの書き方で切り替えできます。上記ですと767pxを境に画像が切り替えできます。
従来のdisplay:none;して非表示する対応と違い、表示されている画像のみが読み込まれます。
ブラウザのDevToolsネットワークなどで確認いただくとわかりやすいのですが、画像が切り替わるタイミングで読み込みが発生しているのがわかります。

pictureタグを利用する注意点として、CSSなどでスタイル調整する際に

source {
  max-width: 100%;
}

などと記述しても動作しません。
HTMLで描画されるのはでimgタグですので、imgにスタイルを適用する必要があります。

@media screen and (min-width: 767px){
  img {
    max-width: 100%;
  }
}

従来通りのPCでdisplay:none;して、SMPでdisplay:block;して…ブラウザ幅が大きい時に反転させて…といった対応に比べるとパッと見てわかりやすいですし短く書けます。
似たようなHTMLを重複させる必要もなくなりますし、表示していない画像の読み込みを防げますのでパフォーマンスも良いです。
また、WebPが利用できるブラウザではWebPで表示するという指定も可能です。

<picture>
  <source srcset="webp_ok.webp" type="image/webp" />
  <img src="webp_no.png" />
</picture>

WebPの表示ができない場合はimgタグで設定した画像が表示されます。