10

「img」の新しい「srcset」属性について理解しようとしています。簡単なテスト ページを作成しましたが、ブラウザーから見た動作は驚くべきものです。

まず、テストページは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test Page</title>
    <style type="text/css">
section.wrapper {
    width: 100%;
    text-align: center;
}

section.wrapper div {
    margin: 0 auto;
}

section.wrapper div img {
      width: 288px;
      height: 216px; 
}

@media (min-width: 30em) { }

@media (min-width: 40em) {
    section.wrapper div img {
          width: 576px;
          height: 432px; 
    }
}

@media (min-width: 48em) { }

@media (min-width: 64em) {
    section.wrapper div img {
      width: 720px;
      height: 540px; 
    }
}

@media (min-width: 72em) {
    section.wrapper div img {
      width: 960px;
      height: 720px; 
    }
}   

    </style>
</head>
<body>

<section class="wrapper">
<div class="imagecontainer">
<img src="images/image-720.jpg"
     srcset="images/image-1920.jpg 1920w,
             images/image-1440.jpg 1440w,
             images/image-1152.jpg 1152w,
             images/image-960.jpg 960w,
             images/image-840.jpg 840w,
             images/image-720.jpg 720w,
             images/image-576.jpg 576w,
             images/image-420.jpg 420w,
             images/image-288.jpg 288w,
             images/image-144.jpg 144w"
     sizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw"
     alt="Test" />
</div>
</section>

</body>
</html>

Retina Macbook Pro と Retina iPod、Chrome/40.0.2214.115 と Firefox 35.0 (Macbook Pro 上)、および Chrome/40.0.2214.73 と Safari/600.1.4 (iPod 上) でテストしています。Firefox で srcset サポートをオンにしました。高速接続でテストしています。

私が見ようとしているのは、さまざまなブラウザーが適切なサイズの画像をインテリジェントに取得できるかどうかです。しかし、彼らは私が期待するように振る舞っていません。

iOS ブラウザーの場合、'sizes' 属性のフォールバック値 '100vw' を使用すると予想されます。ポートレート モードの iPod のビューポート幅は 320px なので、288px または 420px の画像のいずれかになると思います。または、Retina デバイスの場合は、576px または 840px の画像を要求する可能性があります。代わりに、Safari と Chrome の両方が 1920px の画像を要求します。

デスクトップ Firefox ブラウザーは 2 つの要求を行います。1 つ目は、「src」属性で指定されたデフォルトの画像用です。2 つ目は 1920px の画像用です。現在のウィンドウ サイズに関係なく、常に最大の画像を要求します。

デスクトップ Chrome は、私が正しい動作と考えるものを実際に示すのに最も近いものですが、それも風変わりです。テスト ファイルがローカルの場合、ビューポートのサイズに関係なく、常に 1920px の画像が取得されます。テスト ファイルをリモート サーバーに置くと、一般的に 1152px の画像が優先されます (画像を 960px でレンダリングする必要がある場合でも、2x デバイスの論理的な選択は 1920px になります)。Chrome のキャッシュをクリアし、ウィンドウのサイズを変更してリロードすると、小さい画像が要求されることがあります。

私が見ているのがこれらのブラウザーの予想される動作である場合、各ブラウザーのサポートの現在の状態を考えると、おそらく高解像度の画像を提供するべきではないことは明らかです。おそらく遅い接続を介してモバイルデバイスに巨大なJPEGをダンプするよりも、2倍のディスプレイで完璧です. また、Firefox が常にデフォルトのイメージを取得する場合は、イメージを大きくするのではなく、小さくする必要があります。

これらの動作を引き起こしているコードに問題がありますか? そうでない場合、srcset を使用するための現在のベスト プラクティスはありますか?

4

1 に答える 1