使用webp在

Question

我想知道这些天如何正确地以HTML格式制作响应式图像。

特别是，对于比跨整个视图宽度的大图像（足够大以便为不同的浏览器提供较小的尺寸值得的麻烦），我想仅使用HTML来执行以下操作：

1. 首先提供.webp格式，然后正常降级为.jpg
2. 在较小的设备上切换图像的艺术方向（即使用较小的矩形，较大的正方形图像）
3. 为较小的视口指定不同的较小文件，以提供较小的kB

WhatWG standards说我应该在picture中使用source元素：

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

并将其与设备像素比率检测相结合：

 <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">

（此外，我还不清楚在media的{​​{1}}属性中用于媒体查询的宽度测量格式。此2017 experiment建议应为source因为Safari中存在问题，但未评估em。）

在这种情况下，我大概不需要vw的{​​{1}}属性，因为我一直希望此图像显示100％的宽度。

采用sizes格式的响应式source标签的正确实现也将是：

picture

还是我错过了什么？