srcset と sizes 属性の実験(1)

実験1

HTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 0.5x,
             ./c-200.png 1x,
             ./c-300.png 1.5x,
             ./c-400.png 2x">

• この指定では、ウィンドウ幅には関係なく、画像が常に幅200pxで表示されます。

画像を表示する

• デバイスピクセル比(1x, 2x など)による指定
• どのデバイスピクセル比のデバイスであっても 200pxの幅で画像が表示されるような値に設定にしてある。
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、c-200.png をダウンロードしました。予想通りです。
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、c-200.png をダウンロードしました。予想通りです。

実験2

HTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 0.7x,
             ./c-200.png 1.3x,
             ./c-300.png 2x,
             ./c-400.png 2.7x">

• この指定では、ウィンドウ幅には関係なく、画像が常に幅150pxくらいで表示されます。

画像を表示する

• デバイスピクセル比による指定
• どのデバイスピクセル比のデバイスであっても おおよそ 150pxの幅で画像が表示されるような値に設定にしてある。 （デバイスピクセル比1xのデバイスで見た時に、サイズがピッタリの画像が用意されていない場合をテストする）
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、c-400.png をダウンロードしました。148.14px で表示はされます。c-200.png が最適なように思うが、なぜ？
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、c-400.png をダウンロードしました。しかも 150px ではなく 400px の幅で表示されます。

実験3

HTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 100w,
             ./c-200.png 200w,
             ./c-300.png 300w,
             ./c-400.png 400w"
     sizes="300px">

• この指定では、ウィンドウ幅には関係なく、画像が常に幅300pxで表示されます。

画像を表示する

• w 単位とsizes 属性による指定
• 300px を指定しているので、デバイスピクセル比1の場合は 300w の画像が選択されるはず。
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、c-300.png をダウンロードしました。予想通りです。
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、c-300.png をダウンロードしました。予想通りです。

実験4

HTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 100w,
             ./c-200.png 200w,
             ./c-300.png 300w,
             ./c-400.png 400w"
     sizes="(max-width: 800px) 100px, 300px">

• この指定では、ウィンドウ幅が800px以下では画像幅100px、それ以外では300pxで表示されます。

画像を表示する

• w 単位とsizes 属性による指定
• ウィンドウ幅が800px以下では 100w、それ以外では 300w の画像が選択されるはず。
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、ビューポート幅が800px以下であれば、c-100.png と c-300.png をダウンロードしました（なぜ必要のないはずの c-300.png をダウンロードした？）。ビューポート幅がそれ以上であれば c-300.png だけダウンロードしました。
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、ビューポート幅が800px以下であれば、c-100.png をダウンロードしました。ビューポート幅がそれ以上であれば c-300.png だけダウンロードしました。予想通りです。

実験5

HTMLソース

<img src="./c-400.png"
     alt="" class="" id="target_img"
     srcset="./c-100.png 100w,
             ./c-200.png 200w,
             ./c-300.png 300w,
             ./c-400.png 400w"
     sizes="(max-width: 800px) 50vw, 300px">

• この指定では、ウィンドウ幅が800px以下では画像幅50%、それ以外では300pxで表示されます。

画像を表示する

• w 単位とsizes 属性による指定
• ウィンドウ幅が800px以下では なるべく画面の半分にフィットする画像が選択されるはず(50vwにより)。
• それ以外では 300w の画像が選択されるはず。
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、ビューポート幅が600pxなら、c-300.png と c-400.png をダウンロードしました（c-400.png はいらないように思いますが、なぜ？）。ビューポート幅が800px以上なら c-300.png をダウンロードしました。
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、ビューポート幅が600pxなら、c-300.png をダウンロードしました。ビューポート幅が800px以上であれば c-300.png をダウンロードしました。予想通りです。

実験6

この画像のHTMLソース

<img src="./c-200.png"
     alt="" class="" id="target_img"
     width="200"
     srcset="./c-200.png 1x,
             ./c-400.png 2x"
     sizes="300px"

• この指定では、ウィンドウ幅には関係なく、幅が200px(srcset が優先されればこちら) もしくは 300px(sizesが優先されればこちら)で表示されます。

画像を表示する

• srcset でのデバイスピクセル比、width での指定（sizes で複数サイズを指定しない）
• デバイスピクセル比1のデバイス(Windows 10, Chrome)の場合、c-200.png をダウンロードしました。予想通りです。
• デバイスピクセル比1のデバイス(Windows 10, Firefox)の場合、c-200.png をダウンロードしました。予想通りです。
• デバイスピクセル比3のデバイス(Android, Chrome)の場合、c-400.png をダウンロードしました。予想通りです。
• デバイスピクセル比3のデバイス(Android, Firefox)の場合、c-400.png をダウンロードしました。予想通りです。
• Ready to check - Nu Html Checker によるチェックを行うと、sizes を指定している場合は、srcset 内のサイズ指定を width で行うように注意される。

実験環境

OS

Windows 10

Webブラウザ

Chrome v3.0.4.29

Firefox v57.0.2(64ビット)