HTML5 srcset：混合 x 和 w 语法

Posted 2023-03-05

【中文标题】HTML5 srcset：混合 x 和 w 语法

【英文标题】：HTML5 srcset: Mixing x and w syntax

【发布时间】：2015-01-11 18:37:11

【问题描述】：

我正在尝试找出一种方法来为 ios8 客户端提供高 dpi 图像，同时还为支持 w 语法的浏览器提供响应式图像资源。根据 W3C 标准，应该可以在一个 srcset 属性中混合两种语法：

<img 
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

（来源：http://drafts.htmlwg.org/srcset/w3c-srcset/）

但是，当我在 Chrome 38（OS X，无高 dpi）中运行该示例时，它在其他情况下支持 w 语法，无论视口大小如何，浏览器总是加载最大的图像（banner-HD.jpeg） .当我添加

banner.jpeg 1x

到 srcset Chrome 使用该图像，但仍然忽略 100w 图像。

---

在我的情况下，我想为两者指定一个较小版本的图像以及 2x 资源：

<img src="default.png"
    srcset="small.png 480w, [e-mail] 480w 2x, medium.png 1x, [e-mail] 2x">

这似乎适用于 2x iOS8 设备，它们选择 [e-mail] 因为它们不支持 w 语法。然而，无论视口大小如何，Chrome 似乎仍然不在乎并加载 medium.png。

我在这里做错了什么还是 Chrome 的 srcset 实现中的一个已知问题？

【参考方案1】：

别看其他浏览器做什么。 Chrome 是唯一正确执行此操作的（以及 FF 38+）。 不要看这个草稿。它没有也不会实施。这是正确的：https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

在一个描述符中混合 x 和 w 是无效的，浏览器将丢弃这些候选，因为 w 描述符总是被计算为 x 描述符：

<!-- invalid -->
<img srcset="a.jpg 1x 300w, b.jpg 2x 600w" />

浏览器会使用/解析不同候选对象的 x 和 w 描述符，但在 99% 的情况下是无效的并且没有意义：

<!-- makes no sense: -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" />

<!-- would make sense, because sizes is static in layoutpixel defined (i.e. 600 / 300 = 2x): -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" />

这意味着如果您使用 w 描述符，您也会自动针对视网膜进行优化，您不需要使用额外的 x 描述符（即 480w 2x = 960w）。

此外，在大多数使用 w 描述符的情况下，您的默认/备用图像也应该在 srcset 中定义：

<img src="small.png"
    srcset="small.png 480w, mediumg.png 640w, large.png 960w"
    sizes="100vw" />

试试respimage polyfill（业余爱好者尝试宣传我的polyfill）

【讨论】：

感谢您的澄清。突然间，我读到的很多关于该主题的博客文章对我来说更有意义，显然有些解释了旧的实现，有些解释了新的实现。我已经尝试过你的 polyfill 并且非常喜欢它（特别是因为智能图像加载）。不幸的是，在这种情况下，我受到 CMS 以及固定图像宽度规范（高度和宽度属性）的限制。

哦，这太糟糕了。在实践中用尺寸实现 respimg 真的很难。你可能想检查lazysizes width data-sizes="auto"。只要您进行实验，您就可以使用 *.dev.js 版本，它会在控制台中为您提供一些关于您的标记的提示。显然它只在 ff，即和 safari 中这样做。事实上，那里有一些糟糕的教程。还要记住，与 pf 相比，respimage 不仅“更快”了大约 80% 的编码时间，我花在修复错误和提高标准编译上。感谢使用 ;-)

"在同一个 srcset 属性中混合使用宽度描述符和像素密度描述符是无效的。" MDN

如果我的 2x 移动图像与 1x 桌面图像的物理尺寸相同，我该怎么办？我不能只使用w 在srcset 中定义它们。

有点晚了，但只是澄清一下 - 当您定义 600.jpg 600w 时，此图像会自动在 2x 视网膜的 300 像素显示器上提供？这意味着不需要做理论上的“600.jpg 2x 300w”？

【参考方案2】：

你想做的，可以通过图片标签来实现：

<picture>
  <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
          media="(min-width: 1100px)" />
  <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
          media="(min-width: 720px)" />
  <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
          media="(min-width: 450px)" />
  <img src="http://placehold.it/500x600/eee/ddd" 
        />
</picture>