图片标签 vs 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

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

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

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

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