【<img>タグのレスポンシブ&Retina】

<img>タグを画面サイズに応じてレスポンシブに切り替え、
なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の
画像を選択的に読み込ませる方法です。

<picture>
<source media="(min-width: 768px)" srcset="images/main_visual_l.jpg">
<source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x">
<img src="images/main_visual_l.jpg" alt="" class="img-responsive retina">
</picture>

＜解説＞

768px以上（PCとタブレット）
⇒main_visual_l.jpgを表示
　
320px～767px（スマホ）
⇒Retinaディスプレイならmain_visual_m@2x.jpgを表示
非Retinaディスプレイならmain_visual_m.jpgを表示
　
<picture>タグ非対応のブラウザなら<img>タグを表示
　
IE11が<picture>タグ非対応なので<img>タグには
PC用の画像を割り当てておきます。

＜この方法のメリット＞

CSSやJavascriptによって画面サイズごとに画像を切り替える方法では、
いったんサーバーからブラウザに各サイズの画像データを読み込むので、
PCはともかくスマホでは負荷がかかります。

この方法なら、最初から画面サイズや解像度に適した画像データだけを
ブラウザが選択的に読み込んでくれるので、無駄な通信負荷がありません。