HTML5 srcset：混合x和w语法 [英] HTML5 srcset: Mixing x and w syntax

问题描述

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

I'm trying to figure out a way to provide high dpi images to iOS8 clients while also providing responsive image resources for browsers supporting the w syntax. According to the W3C standard it should be possible to mix both syntaxes in one srcset attribute:

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

然而，当我在Chrome 38中运行该示例（OS X，没有高dpi），在其他情况下支持w语法，浏览器始终加载最大图像（banner-HD.jpeg），而不管视口大小如何。当我添加

However, when I run that example in Chrome 38 (OS X, no high dpi) which does support the w syntax in other cases the browser always loads the biggest image (banner-HD.jpeg), regardless of the viewport size. When I add

banner.jpeg 1x

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

to the srcset Chrome uses that image but still ignores the 100w images.

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

In my case I would like to specify a smaller version of an image as well as 2x resources for both:

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

That seems to work on 2x iOS8 devices, which pick [e-mail] because they don't support the w syntax. However Chrome still doesn't seem to care and loads medium.png regardless of the viewport size.

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

Am I doing something wrong here or is this a known problem in Chrome's implementation of srcset?

推荐答案

1. 不要看其他浏览器做什么。 Chrome是唯一正确执行此操作的人。 （和FF 38 +）


2. 不要看这个草案。它不会也不会实施。这是正确的： https：//html.spec .whatwg.org / multipage / embedded-content.html＃attr-img-srcset

1. Don't look what other browser do. Chrome is the only one doing it correctly. (and FF 38+)
2. Don't look at this draft. It is not and won't be implemented. Here is the right one: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

将x与w混合一个描述符无效，浏览器将丢弃这些候选者，因为aw描述符总是计算成ax描述符：

Mixing x with w in one descriptor is invalid and the browser will drop those candidates, because a w descriptor is always calculated into a x descriptor:

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

浏览器使用/解析了为不同候选者的aw描述符混合x，但是无效且无效99％的情况都没有意义：

Mixing x with a w descriptor for different candidates is used/parsed by the browser, but is invalid and doesn't make sense in 99% of all cases:

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

This means if you use the w descriptor you automatically also optimize for retina, you don't need to use an additional x descriptor. (i.e.: 480w 2x = 960w)

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

Aditionaly, in most cases of using a w descriptor your default/fallback image should also be defined in srcset:

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

1. 尝试 respimage polyfill （dilettantish试图宣传我的polyfill）

1. try respimage polyfill (dilettantish try to advertise my polyfill)

这篇关于HTML5 srcset：混合x和w语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！