9

我已经阅读了许多关于使用srcset设备像素密度调整以及艺术指导的文章：

Paddi Macdonnell 2015 年的响应式图像状态

srcset 第 2 部分：Rich Finelli 的 W 描述符和大小属性

这些都没有明确说明是否可以在没有sizes属性的情况下使用 w 描述符。大多数表示相反（w-descriptor 与 一起工作sizes）

我自己的初步测试证实，图像切换确实只使用 w 描述符。

我发现，当使用 w-descriptor 根据它们的宽度指定许多不同的图像时，浏览器将选择适合有限空间的最佳图像。

不需要其他代码。

在设计响应式网站时，这显然是令人困惑的，因为作为设计师，我只需要以下情况：

  1. 根据设备像素密度更改图像（对我有用。太好了！）
  2. 根据可用宽度更改图像（艺术方向）（对我有用。太棒了！）

我想知道这sizes将如何影响这场灾难。我完全理解这是一个新功能。

4

2 回答 2

8

sizes不是严格要求的，但如果您不使用它，这些描述符将根据 的默认值w解析，即. 换句话说，省略等同于指定，这意味着图像打算以全屏宽度呈现。如果这是您的意图，那太好了，请随意省略它，但指定它（以使您的意图清晰）可能会更好。sizes100vwsizessizes=100vw

但是，如果您打算做其他事情，例如在 ausi 的答案中将元素设置为 200px 的示例，那么您最好指定sizes，否则您会得到不好的结果。

我还没有阅读您链接到的教程，但以防万一他们没有说清楚：决定下载什么源的算法是基于像素密度，由x描述符表示。通过将描述符的值除以适当的值，w描述符被转换为等效描述符。它们的存在仅仅是因为有时您在创作时不知道图像的最终布局大小（以像素为单位）。如果您确实知道最终尺寸，使用可能会更容易。xsizesx

（虽然它不是为此目的而设计的，w如果您只是想避免通过数学计算来找出描述符，即使您知道布局大小也可以使用x。只需列出源宽度和布局在某些情况下，宽度并让浏览器弄清楚可能会更容易。但是，如果您知道布局宽度，则应该明确地对其进行设计，以便您的比率无论如何都是简单的整数- 发送 1x 或 2x 会更好图像而不是发送到 .9x 图像并让浏览器放大它。）

于 2016-02-16T22:08:13.737 回答
3

如果您使用-descriptors ，该sizes属性确实会产生影响并且是必需的。w看看下面的例子：

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=1 200w,
    https://via.placeholder.com/400x300?text=400w&v=1 400w,
    https://via.placeholder.com/800x600?text=800w&v=1 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=1 1200w
" style="width: 200px">

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=2 200w,
    https://via.placeholder.com/400x300?text=400w&v=2 400w,
    https://via.placeholder.com/800x600?text=800w&v=2 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=2 1200w
" style="width: 200px" sizes="200px">

它显示了两个相同的图像，srcset但其中一个具有正确的sizes属性。一个sizes加载正确的图像，另一个没有。这是因为如果sizes省略该属性，浏览器将使用默认值100vw。

要仅根据设备像素密度更改图像，请改用x-descriptors。

用于艺术指导<picture>与<source>元素一起使用。

于 2016-02-14T11:49:41.467 回答