HTML5 srcset : Mixing x and w syntax

我正在尝试找出一种向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)中运行该示例时，无论视口(viewport)大小如何，浏览器始终会加载最大图像(banner-HD.jpeg)。当我添加

banner.jpeg 1x

Chrome会使用该图片，但仍会忽略100w图片。

就我而言，我想为两者指定较小的图像版本和2x资源:

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

这似乎可以在2x iOS8设备上使用，因为它们不支持w语法，所以它们选择[email protected]。但是，无论视口(viewport)大小如何，Chrome似乎都不会在乎并加载medium.png。

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

最佳答案

不要看其他浏览器会做什么。 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的不公语)

关于HTML5 srcset : Mixing x and w syntax，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26928828/

Srcset

HTML5 srcset : Mixing x and w syntax