在 mdn 网络文档上有一篇关于响应式图像的精彩文章，其中介绍了两种处理响应式图像的工具——srcset和sizes属性以及图片和源标签：
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
这就是我不明白的，所以这是在这种情况下使用哪个工具。在第一种情况下（使用img），我们只有分辨率不同，而显示的是相同的图像（至少我们知道这一点，渲染浏览器不会检查这一点）。如果我们制作不同的图像怎么办？假设对于宽屏幕 - 横向，对于窄屏幕 - 纵向。我们可以说：“ srcset和sizes不是为此而设计的”。好的，如果图像的不同不仅仅是扩展名，那么技术上会出现什么问题？
图片/来源也是如此。在每个源标签中，我们有不同的图像，但技术上的问题是这些图像只会在分辨率上有所不同？
文章说：
注意：您应该只将属性
media用于艺术品；使用时media，请勿将媒体条件与sizes.
本说明仅提出新问题：
- 为什么该属性只能用于
media艺术媒体？是什么原因？ - 说是使用属性
media，而不是标签source。也就是说，如果我们没有带装饰的案例，那么source可以使用标签，只是没有属性media？
重新仔细阅读文章，自己写出标签、属性和“媒体条件”之间的区别（从问题来看，这不会是多余的）。
此外，文章中指出的方法是按任务划分的：
在图像质量（图像分辨率）方面提供最佳显示，具体取决于用户的显示器（普通/视网膜、PC/平板电脑/智能手机 - 都具有不同的屏幕尺寸、像素、颗粒度和其他特性。
在设计/意义方面提供最佳展示 - 即 “艺术”设计 - 为什么智能手机上的元素数量有“大”图片，如果在小屏幕上有清晰但小细节......您可以选择主要部分并显示它。
另外，根据文章判断，根据实验，当使用
<img>带有属性srcset和媒体条件的标签时，浏览器会判断客户端显示的能力，并据此加载一个（！）合适的图像......无论如何您在浏览器中“玩”窗口的大小，图片将以适合您显示的分辨率显示。在 tag 的情况下，<picture>将加载艺术选项，具体取决于浏览器窗口的大小。这些是显着的细微差别，会影响具有体积“图形”内容的页面加载速度。还值得注意的是，标签
<picture>可以在没有嵌套标签的情况下使用<media>——当我们有相同的图像，但我们想为其提供不同的格式时。并且在标签media内使用标签picture时，不建议在sizes标签属性中添加媒体条件img。显然是因为 会有显示条件的冲突，不同的浏览器会以不同的方式解决……这里你可以试验一下，如果你有兴趣。尽管对于一个“艺术”图像的连续两组条件已经看起来“多余”......你不应该在 <img> 上使用 srcset，而应该总是选择 <picture>。有几个原因。第一个原因是即使在上面文章中提到的示例站点中，由于某种原因，这些 srcsets 和源也无法正常工作，请参见下图：
尽管我们的媒体查询匹配条件高达 600px，但浏览器根本没有加载 elva-fairy-480w.jpg 图像，正如您从 Network 选项卡中看到的那样。
第二个原因是此方法的不完善：它不允许您指定源文件格式，例如，在 WEBP、AVIF、APNG 等中添加替代图像源，而 <picture> 是结合媒体查询和源文件格式的完美工具。其工作的语法和逻辑更加清晰，浏览器支持绰绰有余 - 97％。