HTML5 源代码集 : Mixing x and w syntax

Question

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

<img alt="The Breakfast Combo"
    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/)

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

banner.jpeg 1x

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

---

在我的例子中，我想指定一个较小版本的图像以及两者的 2x 资源:

<img src="default.png"
    srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">

这似乎适用于 2x iOS8 设备，它们选择 medium@2x.png 因为它们不支持 w 语法。然而，无论视口(viewport)大小如何，Chrome 似乎仍然不关心并加载 medium.png。

我是不是做错了什么，或者这是 Chrome 的 srcset 实现中的一个已知问题？

Answer 1

1. 不要看其他浏览器做什么。 Chrome 是唯一正确执行此操作的(和 FF 38+)。
2. 不要看这个草稿。它没有也不会被实现。这是正确的: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" />

1. 尝试 respimage polyfill (外行尝试为我的 polyfill 做广告)