Html 在srcset中指定图像大小和像素密度

这是我的

img

标签：

---

您不能在

srcset

属性中混合使用

x

和

w

描述符

我不知道imgix，但我假设

？w=800&h=480&dpr=2

返回一个尺寸为1600x960像素的图像。和同一个图像吗

如果图像在每个可见大小上始终相同（相同的内容和相同的纵横比），则应定义所需的可见/CSS大小（取决于您的设计，例如800、1200和1600像素），并编写以下内容：

<img
  src="https://myserver.com/image?w=800&h=400"
  srcset="https://myserver.com/image?w=800&h=400 800w,
    https://myserver.com/image?w=1200&h=600 1200w,
    https://myserver.com/image?w=1600&h=800 1600w,
    https://myserver.com/image?w=2000&h=1000 2000w,
    https://myserver.com/image?w=2400&h=1200 2400w,
    https://myserver.com/image?w=2800&h=1400 2800w,
    https://myserver.com/image?w=3200&h=1600 3200w"
  sizes="100vw">

浏览器将为几种配置下载

？w=2400&h=1200

图像：

• 视窗宽度等于或低于2400像素的屏幕密度1
• 视窗宽度等于或低于1200px的屏幕密度2
• 视窗宽度等于或低于800px的屏幕密度3
• 等等

---

您不能在

srcset

属性中混合使用

x

和

w

描述符

我不知道imgix，但我假设

？w=800&h=480&dpr=2

返回一个尺寸为1600x960像素的图像。和同一个图像吗

如果图像在每个可见大小上始终相同（相同的内容和相同的纵横比），则应定义所需的可见/CSS大小（取决于您的设计，例如800、1200和1600像素），并编写以下内容：

<img
  src="https://myserver.com/image?w=800&h=400"
  srcset="https://myserver.com/image?w=800&h=400 800w,
    https://myserver.com/image?w=1200&h=600 1200w,
    https://myserver.com/image?w=1600&h=800 1600w,
    https://myserver.com/image?w=2000&h=1000 2000w,
    https://myserver.com/image?w=2400&h=1200 2400w,
    https://myserver.com/image?w=2800&h=1400 2800w,
    https://myserver.com/image?w=3200&h=1600 3200w"
  sizes="100vw">

浏览器将为几种配置下载

？w=2400&h=1200

图像：

• 视窗宽度等于或低于2400像素的屏幕密度1
• 视窗宽度等于或低于1200px的屏幕密度2
• 视窗宽度等于或低于800px的屏幕密度3
• 等等

---

我最后只使用了

图片

标签。我最后只使用了

图片

标签。谢谢。URL的

dpr

部分表示像素密度；所以

dpr=1

和

dpr=2

分别是1x和2x密度。那么您的意思是浏览器不仅会选择正确的大小，而且会自己选择正确的像素密度？因此，我根本不需要写1x、2x、3x等等？这里有一个问题：为什么

src=”https://myserver.com/image?w=800&h=400“

srcset-w支持本机的现代浏览器不应该每次都加载上面的部分，每次都加载一张图像。你有你的在线代码吗？我可以查一下吗？@NicolasHoizey谢谢你的验证。我就是这么想的。我想我被普遍认为

有助于艺术指导的观点吓坏了，但我想在这种情况下，我们只是为每种尺寸增加了三倍的规则，一个用于1x、2x、3x。看起来有点冗长，但在高DPR屏幕上权衡更多HTML和更少图像字节似乎是值得的。我们得测试一下，谢谢。URL的

dpr

部分表示像素密度；所以

dpr=1

和

dpr=2

分别是1x和2x密度。那么您的意思是浏览器不仅会选择正确的大小，而且会自己选择正确的像素密度？因此，我根本不需要写1x、2x、3x等等？这里有一个问题：为什么

src=”https://myserver.com/image?w=800&h=400“

srcset-w支持本机的现代浏览器不应该每次都加载上面的部分，每次都加载一张图像。你有你的在线代码吗？我可以查一下吗？@NicolasHoizey谢谢你的验证。我就是这么想的。我想我被普遍认为

有助于艺术指导的观点吓坏了，但我想在这种情况下，我们只是为每种尺寸增加了三倍的规则，一个用于1x、2x、3x。看起来有点冗长，但在高DPR屏幕上权衡更多HTML和更少图像字节似乎是值得的。我们得测试一下。