图片标签 vs CSS 媒体查询

Question

我想了解使用Picture标签与CSS媒体查询在纯性能方面（网站加载时间）上的优势。我正在开发一个网站，客户们强制要求我使用picture标签，但我认为两者是相同的。请让我知道您的意见。

使用Picture标签可以根据设备屏幕大小和分辨率自动选择最佳图像，这可以提高网站的性能，因为它可以避免加载过大或不必要的图像。而CSS媒体查询需要手动编写代码来选择合适的图像，可能会增加页面加载时间并降低性能。因此，从性能角度考虑，使用Picture标签比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>

或者

使用媒体查询并针对不同的图像标签进行定位。

- Kiran Lala

---

不确定性能如何，但一个区别是图片标签将在 HTML 中保留，而媒体查询将在 CSS 中保留，这可能会使图像标签更易于维护。 - Nate

是的，我知道这一点。我只想知道网站的性能或速度会受到什么影响。 - Kiran Lala

Answer 1

媒体查询的工作方式如下： 即使您在桌面上查看网站，它仍会下载移动样式。

例如：如果您在桌面上隐藏了一个小图像，在桌面上仍然会下载小图像，但不会显示（如果它被隐藏）。

图片标签：如果您有三个不同的移动设备、平板电脑和桌面端的图像。 当页面加载时，图片标记仅会下载移动设备上的图像（在移动设备上），而忽略其他两个。

如果要进行测试： 1.编写与上述3种不同图像相同的HTML代码。 2.进入桌面模式并加载页面。现在您可以看到一个桌面图像。 3.从您的笔记本电脑中断互联网连接。 4.在浏览器响应模式下，不断缩小屏幕大小 5.当它达到平板电脑宽度时，您将看到图像不可见且损坏。 6.这意味着在页面加载时还没有下载平板电脑的图像。

- Naveen L Bhandari

---

是的，你说得对。我昨天尝试了同样的解决方案，它的效果和你提到的一样。picture标签是提高性能的最佳解决方案。 - Kiran Lala

很好，很高兴知道这个消息。 - Dani Amsalem

Answer 2

我认为问题的被接受的答案缺乏一些真实世界的背景细节。在谈论性能时，通常是指在较慢设备上的性能，如移动设备，而不是桌面设备。

例如：如果您在桌面上隐藏了一个小图像，则在桌面上仍会下载该小图像，但不会显示（如果它被隐藏）。

这通常不是问题，因为桌面拥有更快的处理速度，并且它们不运行数据（较大的带宽），不像移动设备。

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

因此，在移动设备上的性能方面，两种方法相同。最终，由于srcset属性具有其他配置选项，因此标记仍然是最强大的解决方案。但是，有时需要使用CSS媒体查询而不是标记，例如处理背景图像。

这是谷歌最近发布的一份指南，建议使用CSS媒体查询来优化背景图片：https://web.dev/optimize-css-background-images-with-media-queries/。

- z2lai

---

这个 YouTube 视频必要吗？ - phoenixstudio

你说得对，视频指南在这个主题上除了不同的查看格式之外没有更多的内容。我会将其删除。 - z2lai