Question

我正试图了解'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浏览器发出两个请求。第一个是'src'属性中指定的默认图像。第二个是1920px图像。无论当前窗口大小如何，它总是请求最大的图像。

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

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

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

Answer 1

一般情况下，srcset您无法预测所选候选人。

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

桌面Firefox ：您似乎在srcset上检查，但是关闭了图片。只有在启用srcset和picture标志时，才能启用带宽度描述符和大小属性的srcset。但我建议你每晚用当前的FF进行测试，因为这个功能将用38进行验证，并且这样做会修复一些错误。否则你会得到相同的行为，你可以使用Safari for iOS。 FF38将具有所需的行为。

iOS ：iOS上的Chrome不是Chrome。 iOS浏览器不支持带宽度描述符的srcset，但仅支持x描述符。更糟糕的是，如果您使用宽度描述符iOS，则认为所有候选项都相等（1x）并将从srcset列表中加载第一个候选项。

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

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

<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.6倍而不是2倍）），optimumx plugin。

然后您可以像这样编写标记：

<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>

我的srcset定义有问题，或者当前的浏览器支持是否很弱？

1 个答案: