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>

我正在使用 Chrome/40.0.2214.115 和 Firefox 35.0（在 Macbook Pro 上）以及 Chrome/40.0.2214.73 和 Safari/600.1.4（在 iPod 上）在 Retina Macbook Pro 和 Retina iPod 上进行测试。我在 Firefox 中打开了 srcset 支持。我正在测试快速连接。

我想看的是各种浏览器是否可以智能地获得适当大小的图像。然而，他们的行为并不像我期望的那样。

对于 iOS 浏览器，我的期望是他们会使用来自 'sizes' 属性的回退值 '100vw'。由于纵向模式下 iPod 的视口宽度为 320 像素，我希望它们选择 288 像素或 420 像素的图像。或者，如果它是 Retina 设备，他们可能会请求 576 像素或 840 像素的图像。相反，Safari 和 Chrome 都请求 1920px 图像。

桌面 Firefox 浏览器发出两个请求。第一个是在“src”属性中指定的默认图像。第二个是 1920 像素的图像。无论当前窗口大小如何，它总是请求最大的图像。

桌面 Chrome 最接近实际展示我认为正确的行为，尽管这很古怪。如果我的测试文件是本地的，它总是抓取 1920 像素的图像，而不管视口大小。如果我将测试文件放在远程服务器上，它会表现出对 1152px 图像的普遍偏好（即使图像应该以 960px 呈现，这使得 1920px 成为 2x 设备的逻辑选择）。如果我清除 Chrome 的缓存并调整窗口大小，然后重新加载，它有时会请求较小的图像。

如果我看到的是这些浏览器的预期行为，考虑到每个浏览器的当前支持状态，那么我很清楚我可能不应该提供更高分辨率的图像——更好地提供看起来更少的图像在 2x 显示器上比通过可能很慢的连接在移动设备上转储巨型 J​​PEG 更完美。如果 Firefox 总是要拉出默认图像，那么我可能应该把它变小而不是变大。

我的代码是否存在导致这些行为的问题？如果没有，是否有任何当前使用 srcset 的最佳实践来应对各种当前实现的特质，利用该功能的可能性而不导致下载过大的图像？

4

1 回答 1

21

一般来说，srcset您无法预测所选候选人。

桌面 Chrome：Chrome 实际上运行了一些非常好的但不可预测的算法来获得正确的图像候选。例如，如果它被缓存或如你所说的本地它将使用最大的图像。这里一切都应该没问题。

桌面 Firefox：您似乎检查了 srcset，但关闭了图片。只有启用了 srcset 和图片标志，才能启用具有宽度描述符和尺寸属性的 srcset。但我建议您每晚使用当前的 FF 进行测试，因为此功能将在 38 中启用，并且修复了一些错误。否则，您将获得与 Safari for iOS 相同的行为。FF38 将具有所需的行为。

iOS：iOS 上的 Chrome 不是 Chrome。iOS 浏览器不支持带宽度描述符的 srcset，而只支持 x 描述符。更糟糕的是，如果你使用宽度描述符，iOS 认为所有候选者都是相等的 (1x)，并且会从 srcset 列表中加载第一个候选者。

以下是您如何处理所有问题的方法：

  1. 使用好的 polyfill：respimage或picturefill完成这项工作
  2. 即使您不使用艺术指导，也请使用以下模式：

<picture> <source 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" /> <img /> </picture>

如果您想拥有更多控制权，您还可以使用lazySizes，它可以为您提供开箱即用的自动调整大小计算，如果您想限制移动浏览器的像素比（例如 1.6x 而不是 2x），请使用optimizationx 插件。

然后你可以这样写你的标记：

<picture> <source data-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" /> <img class="lazyload" data-sizes="auto" data-optimumx="1.6" /> </picture>

于 2015-02-23T21:50:22.557 回答