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

Question

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

sla*_*mci 10 html5 image responsive-design srcset

我试图了解'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>

Run Code Online (Sandbox Code Playgroud)

我正在测试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的缓存,并调整窗口大小,然后重新加载,它有时会请求较小的图像.

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

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

Answer 1

ale*_*kas 20

一般而言,srcset您无法预测所选择的候选人.

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

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

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

以下是您如何处理所有问题:

使用一个很好的填充工具: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倍),那就是optimx插件.

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

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

归档时间：	10 年，8 月前
查看次数：	10401 次
最近记录：	8 年，4 月前