SRCSETによる写真画像の表示

このページ中の画像は、デバイス・ピクセル比、ウインドウ幅、高さ？などによって、読み込ませる画像を振り分けるCSSのSRCSET属性による表示です。

2014年4月現在、部分的に対応してるブラウザは Google Chromeと WebKit。

SRCSETによる画像の振り分け

低解像度、高解像度の２種類を使用。どちらの画像が使われているか分かりやすいようにサイズを画像上に明記してあります。

高解像度、低解像度の２カット写真

ファイル名が画像のピクセルサイズです。
・ 640x480.jpg
・ 1280x960.jpg

写真下に画像を表示しているソースコードを書いています。

デバイス・ピクセル比による振り分け

srcset 2x 表示テスト
<img src="640x480.jpg" srcset="1280x960.jpg 2x">

通常 640x480.jpgを表示、デバイス・ピクセル比 2x の時は1280x960.jpgを表示。Retinaディスプレイでは高解像度のほうが表示される。

ウインドウ幅による振り分け

srcset 1024w 表示テスト
<img src="640x480.jpg" srcset="1280x960.jpg 1024w">

通常 640x480.jpgを表示、ウインドウ幅が 1,024CSSピクセル以上の時は1280x960.jpgを表示。

ウインドウ幅とデバイス・ピクセル比による振り分け

srcset 1024w 2x 表示テスト
<img src="640x480.jpg" srcset="1280x960.jpg 1024w 2x">

通常 640x480.jpgを表示、ウインドウ幅が 1,024CSSピクセル以上、 かつデバイス・ピクセル比 ２倍の時は1280x960.jpgを表示。

動作確認

Google Chrome（34.0.1847.131）と WebKit（r167883）は、デバイス・ピクセル比は対応、ウインドウ幅は未対応。
ただし、非Retina/MacのGoogle Chromeはウインドウ幅に対応した（ウインドウ幅を狭めても表示する画像は不変）。

Mac OS X 10.8.5のFirefox(v28), Opera(v20), Safari(v6.1.3), iOS(7.1.1)/Safari は未対応。ウインドウズ、Androidのブラウザは未確認です。

結果は2014年4月のもので将来は違う可能性があります。