图片标签与 CSS 媒体查询

Question

我想知道在纯性能（网站加载时间）方面，使用图片标签与 CSS 媒体查询的好处。 我正在开发一个网站，客户强迫我使用图片标签，但我认为两者都是一样的。让我知道您的意见。

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

或

使用媒体查询和定位单独的图像标签。

Answer 1

我认为接受的答案/问题缺少一些现实世界的上下文细节。在谈论性能时，我们通常指的是移动设备等速度较慢的设备上的性能，而不是台式机。

示例：如果您在桌面中隐藏小图像，则在桌面中仍然会下载小图像但不会显示（如果隐藏）。

这通常不是问题，因为台式机的处理速度更快，而且它们不像移动设备那样在数据（更大的带宽）上运行。

接受的答案从未提及 CSS 媒体查询在移动设备上的行为方式——这种方法实际上只应用满足最小媒体查询的样式。这种方法在桌面上“下载”所有样式的原因是媒体查询通常是使用移动优先设计编写的，通过设置最小宽度标准。因此，当在桌面加载页面时，您的所有媒体查询都会得到满足，因此它们都会被应用，并且源顺序中的最后一个获胜。

所以就移动设备上的性能而言，这两种方法是相同的。归根结底，<picture> 标记仍然是最强大的解决方案，因为带有 srcset 属性的附加配置选项。但是，有时您需要使用 CSS 媒体查询而不是 <picture> 标记，例如在处理背景图像时。

以下是 Google 推荐的用于优化背景图像的 CSS 媒体查询的最新指南：https://web.dev/optimize-css-background-images-with-media-queries/

Answer 2

媒体查询是这样工作的： 即使您在桌面浏览网站时，它仍然会下载移动设备的样式。

示例：如果您在桌面中隐藏小图像，则在桌面中仍然会下载小图像但不会显示（如果隐藏）。

图片标签：如果您有 3 张不同的图片用于移动设备、平板电脑和台式机。 图片标签在页面加载时（在移动设备上）只会下载移动设备图片，它会忽略其他2。

如果你想测试： 1. 为 3 个不同的图像编写上面的 HTML 代码。 2. 进入桌面后，加载页面。现在您有一个可以看到的桌面图像。 3. 断开笔记本电脑的互联网连接。 4.在浏览器响应模式下，不断缩小屏幕 5.当它到达数位板宽度时，您会看到图像不可见并且会损坏。 6.这意味着页面加载时没有提前下载平板电脑的图像。