srcset，如果我指定了每个图像的宽度，还需要写“1x,2x,3x”吗？

Question

我应该写这个

srcset="small.jpg 1x 500w, medium.jpg 2x 1000w, large.jpg 3x 1500w"

或这个

srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"

两个表达式一样吗？

Answer 1

看起来像是两者中的后者（基于这篇文章）：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

CSS-Tricks 通常非常擅长更新内容，以防情况发生变化。我可以看到他的文章是2014年的，已经很旧了，但是现在crazy-old。

但是如果是我的话，那我两个都试试，用GoogleChrome，用'Toggle Device Toolbar'（Google那个，如果你不知道它是什么），然后检查元素以查看它是否按您希望的那样工作。

Answer 2

您的第一个代码块不正确，请参阅此 MDN 文档：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset

srcset 属性可以包含宽度描述符 (w) 或像素密度描述符（例如 2x），但不能包含两者的组合。

第二个代码块正确。

旁注：浏览器在选择下载三张图片中的哪一张时会自动考虑设备的像素密度。