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

媒体查询的工作方式如下：即使您在Desktop中查看网站，它仍然会下载手机样式。

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

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

如果要测试： 1.像上面一样为3个不同的图像编写HTML代码。 2.进入桌面后，加载页面。现在，您可以看到一个桌面图像。 3.断开笔记本电脑与Internet的连接。 4.在浏览器响应模式下，持续缩小屏幕 5.当它达到数位板宽度时，您将看到图像不可见并且将被破坏。 6.这意味着平板电脑的图像在页面加载时并未较早下载。

图片标签与CSS媒体查询

2 个答案: