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

・高DPIのデバイス向けに最適な画像を表示させたい。
・あるいは、画面幅ごとに画像を出し分けたい。
srcsetと<picture>要素を用いることで、そのような最適化が簡単に実装できます。

高DPIのデバイス向けにsrcsetを使用する

<img>要素にsrcset属性を追加すると、デバイスのDPIに応じて最適化された画像を表示させられます。
例えば、以下のように記述すれば、DPI 2倍のディスプレイでは高DPIの画像を表示させ、
DPI 1倍では通常の画像を表示させる、というような出し分けが可能です。

<img src="img.jpg" srcset="[e-mail] 2x"> 

ブラウザでsrcsetがサポートされている場合、srcsetで記述された各条件と画像を解析したうえでリクエストが送信されます。
これにより、環境ごとの最適な画像だけを読み込むことが可能です。

画面幅ごとに画像を出し分けたい

レスポンシブデザインで、画面幅によって表示させる画像を変化させたいですか？
そのような場合、下記のように<picture>要素を用いることで、CSS無しに画像の出し分けを実現できます。
それにより、画面幅によるレイアウトの変更に対してより柔軟に対応できます。

<picture>
  <source media="(min-width: 800px)"　srcset="images/img_large.jpg">
  <source media="(min-width: 450px)"　srcset="images/img-mid.jpg">
  <img src="images/img-small.jpg">
</picture>

この場合、画面幅が
・800px以上：img_large.jpg
・450px～800px：img_mid.jpg
・450px以下もしくは<picture>要素がサポートされていない：img_small.jpg
の画像が読み込まれます。
picture要素も<srcset>と同じく、非表示の画像は読み込まれません。

注意点

• <picture>要素内の<img>要素は必須です。これを記述しないと画像は表示されません。
• <picture>要素内の<img>要素は、<picture>要素のフォールバックとしての役割を果たします。
• ブラウザが<picture>要素をサポートしていない場合、もしくは<source>要素の条件を満たさない場合は<img>要素が表示されます。
• <img>要素は一番最後に記述しましょう。<img>要素の後に<source>要素が書かれた場合、それらは無視されます。