2017年3月31日更新

通常の画像と高解像度用の画像の表示・切り替え方法を紹介します。

1. <img>タグのサイズを指定する
2. cssのbackgroundで背景にして、background-sizeを指定する
3. cssのbackgroundで背景にして、css3のMeia Queriesでディスプレイの解像度によって切り替え
4. <img>タグの画像をJavaScriptでディスプレイの解像度によって切り替え
5. 同じ内容の画像で、画像サイズのみを変更（解像度の対応）するときにおすすめ！
   <img>タグにHTML5の「srcset」を使用して、ディスプレイの解像度やウインドウサイズによって切り替え
6. 違う内容の画像を表示するときにおすすめ！
   HTML5の「picture」要素を使用して、ウインドウサイズによって切り替え
7. 「picture」要素と「srcset」の組み合わせ

※通常の画像：画像内に「幅200」の文言あり
高解像度用の画像：画像内に「幅400」の文言あり

<img>タグのサイズを指定する

画像の切り替えはせず、常に通常もしくは高解像度用の画像を表示します。

【通常】幅200pxの画像を「width="200"」で表示

<img src="image_w200.jpg" alt="" width="200" height="144" />

【高解像度用】幅400pxの画像を「width="200"」で表示

<img src="image_w400-2x.jpg" alt="" width="200" height="144" />

cssのbackgroundで背景にして、background-sizeを指定する

画像の切り替えはせず、常に通常もしくは高解像度用の画像を表示します。

【通常】幅200pxの画像を幅200pxで表示

img{
	background-image:url(image_w200.jpg);
}

【高解像度用】幅400pxの画像を幅200pxで表示（高解像度用）

img{
	background-image:url(image_w400-2x.jpg);
	background-size: 200px auto;
}

cssのbackgroundで背景にして、CSS3のMeia Queriesでディスプレイの解像度によって切り替え

解像度が1.4より上の場合は、高解像度の画像を表示します。

.retinaimg01_02{
background-image:url("../img/image_w200.jpg");
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5){
/*2倍の画像を指定*/
	.retinaimg01_02{
	background-image:url(../img/image_w400-2x.jpg);
	background-size: 200px auto;
	}
}

<img>タグの画像をJavaScriptでディスプレイの解像度によって切り替え

解像度が1.4より上の場合は、高解像度の画像を表示します。
JavaScriptで、画像ファイル名の最後に「-2x」を付けます。

<img src="../common/img/image_w200.jpg" alt="" width="200" height="142" class="retinaImg" />

$(function () {
/* 解像度が1.4より上の場合は、2倍の画像にする */
	if (window.devicePixelRatio > 1.4) {
		$('img.retinaImg').each(function() {
			$(this).attr('src', $(this).attr('src').replace(/(\.)(png|jpg|gif)/gi,'-2x$1$2'));
		});
	}
});

同じ内容の画像で、画像サイズのみを変更（解像度の対応）するときにおすすめ！
<img>タグにHTML5の「srcset」を使用して、ディスプレイの解像度やウインドウサイズによって切り替え

• srcsetに対応しているブラウザは、必要ない画像をダウンロードしないので、読み込み時間を短縮できます。
• srcsetに対応していないブラウザへは、「src」で指定された画像を読み込みます。
• 読み込み時に判断するので、ウインドウサイズを拡大縮小しても、随時画像が変更されるわけではありません。
  →Firefoxでは、ウインドウサイズと連動していました。（2017年3月に確認）
• ブラウザの判断でユーザの閲覧環境に応じて画像を表示する仕組みになっています。
• srcset属性は、2016年11月　HTML5.1に追加されましたが、IEは対応していません。

ピクセル密度によって切り替え

<img src="../common/img/img_retinaimg02.jpg"
     srcset="../common/img/img_retinaimg02.jpg 1x,
             ../common/img/img_retinaimg02_large.jpg 2x"
     alt="Example image" width="640">

ウインドウサイズによって切り替え

<img src="../common/img/img_retinaimg02.jpg"
     srcset="../common/img/img_retinaimg02.jpg 640w,
             ../common/img/img_retinaimg02_large.jpg 960w"
     alt="Example image" width="640">

違う内容の画像を表示するときにおすすめ！
HTML5の「picture」要素を使用して、ウインドウサイズによって切り替え

• メディアクエリで指定しているため、ブラウザの判断する余地はなく、必ず指定された画像が表示されます。

<picture>
  <source media="(min-width: 960px)" srcset="../common/img/img_retinaimg02_large.jpg">
  <source media="(min-width: 640px)" srcset="../common/img/img_retinaimg02.jpg">
  <img src="../common/img/img_retinaimg02_small.jpg" alt="Example image" width="640">
</picture>

「picture」要素と「srcset」の組み合わせ

• <img>タグのsrcsetだけではブラウザの判断によって変わることがあるので、画面サイズと解像度でしっかり切り替えをしたい場合におすすめの方法です。

<picture>
<source media="(min-width: 960px)" srcset="../common/img/img_retinaimg02_large.jpg 1x, ../common/img/img_retinaimg02_larrge-2x.jpg 2x">
<source media="(min-width: 640px)" srcset="../common/img/img_retinaimg02.jpg 1x, ../common/img/img_retinaimg02-2x.jpg 2x">
<img src="../common/img/img_retinaimg02_small.jpg" alt="Example image" width="640">
</picture>

参考サイト：なんでもかんでも要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点