Question

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

The State of Responsive Images in 2015 by Paddi Macdonnell

srcset Part 2: The W descriptor and sizes attribute by Rich Finelli

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

我自己的基本测试证实，图像切换仅使用w描述符。

我发现当使用w描述符根据宽度指定许多不同的图像时，浏览器将选择适合密闭空间的最佳图像。

不需要其他代码。

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

根据设备像素密度更改图像（对我而言。很棒！）
根据可用宽度更改图像（艺术方向）（对我而言。很棒！）

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

Answer 1

sizes属性确实有所作为，如果您使用w - 描述符，则需要该属性。看一下下面的例子：

＆＃13;

<img srcset="
    https://placehold.it/200x150?1 200w,
    https://placehold.it/400x300?1 400w,
    https://placehold.it/800x600?1 800w,
    https://placehold.it/1200x900?1 1200w
" style="width: 200px">

<img srcset="
    https://placehold.it/200x150?2 200w,
    https://placehold.it/400x300?2 400w,
    https://placehold.it/800x600?2 800w,
    https://placehold.it/1200x900?2 1200w
" style="width: 200px" sizes="200px">

＆＃13;

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

仅根据设备像素密度更改图像使用x - 描述符。

对于使用<picture>元素的艺术指导<source>。

Answer 2

sizes并非严格要求，但如果您不使用它，那些w描述符将针对默认< / em> sizes的值，即100vw。换句话说，省略sizes等同于指定sizes=100vw，这意味着图像旨在以全屏宽度呈现。如果这是你想要的，那很好，随意省略它，指明它（使你的意图明确）可能更好。

但如果您打算采取其他任何措施，例如在回答设置为200px的元素的答案中，那么您最好指定sizes，否则您将获得不良结果。

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

（因为它不是为此而设计的，你也可以使用w，即使你确实知道布局的大小，如果你只是想避免做数学计算x在某些情况下，只需列出源宽度和布局宽度并让浏览器解决问题就更容易了。但是，如果你知道布局宽度，你应该明确地设计它，这样你的比率是简单的整数无论如何 - 发送1x或2x图像比发送到.9x图像并让浏览器扩展它更好。）

是否必须在srcset中使用带有w-descriptors的sizes属性？

2 个答案: