srcsetと<picture>要素で画像を出し分ける

・高DPIのデバイス向けに最適な画像を表示させたい。 ・あるいは、画面幅ごとに画像を出し分けたい。 srcsetと<picture>要素を用いることで、そのような最適化が簡単に実装できます。 高DPIのデバイス向けにsrcsetを使用する <img>要素にsrcset属性を追加すると、デバイスのDPIに応じて最適化された画像を表示させられます。 例えば、以下のように記述すれば、DPI 2倍のディスプレイでは高DPIの画像を表示させ、 DPI 1倍では通常の画像を表示させる、というような出し分けが可能です。 ブラウザでsrcsetがサポートされている場合、srcsetで記述された各条件と画像を解析したうえでリクエストが送信されます。 これにより、環境ごとの最適な画像だけを読み込むことが可能です。 画面幅ごとに画像を出し分けたい レスポンシブデザインで、画面幅によって表示させる画像を変化させた