image - 图片标签 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. 这意味着在页面加载时没有提前下载平板电脑的图像。