閲覧環境に応じて高解像度の画像を表示させる例

複数の候補の中から、閲覧環境に適した解像度の画像を選択して表示する例。

解像度によって採用画像ファイルが変化する例1

特に高精細ではないディスプレイを利用している場合は、ブラウザの表示可能領域に合致するサイズの画像が選択されます。
高精細ディスプレイを利用している場合は、ディスプレイの持つ物理的なドット数に合ったサイズの画像が選択されます。

なお、ここで用意した画像とその解像度は以下の通りです。

※ここでは、非対応ブラウザのために「picturefill.js」スクリプトを読み込んでいるため、(srcset属性の記述に対応していないブラウザでは)読み込み直後に一瞬だけデフォルトの画像(src属性に記述した画像ファイル)が表示されます。

基準サイズを描画領域の半分(50vw)にした場合の例

sizes属性値に「50vw」を指定し、CSSで画像面積を「描画領域の半分」に指定(width: 50%;)した場合の表示例です。

解像度によって採用画像ファイルが変化する例2

具体的にどう記述しているかは、このページのHTMLソースをご覧下さい。