与响应式图像的图片元素内的源元素混淆

confusion with source element inside picture element for responsive images

在下面的代码中，媒体查询条件在源元素中的两个实例中被提及。
1- 媒体属性
2- 尺寸属性 

<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 380w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 800w">

<img src="stick-original.png" alt="Human">
</picture>

我很好奇在上述两个实例中使用媒体查询条件背后的逻辑原因是什么，而它可以在一个实例中完成（在媒体属性中）。是不是多余？

我明白了！

第一步：媒体属性：我们做选择

有两个不同的图像（艺术指导，如 cropped-images/different-aspect-ration）与 media 属性中的每个 media-condition 相关联。

第二步：尺寸属性：浏览器做出选择

在步骤 1 中，我们选择了特定图像（不是浏览器），

  1. 现在进入第二步

    • 我们会发现提供了以下变体 中的相同图像（具有不同分辨率的相同图像） srcset attribute

    • srcset 属性中提供了相同图像的变体以供选择

  2. 浏览器会根据sizes attribute中给出的媒体条件进行选择。

    • 浏览器将决定并选择最适合的图像

结论

在第 1 步
我们根据媒体条件决定图像。
在步骤 2
浏览器根据 srcset 属性

中给出的选择来决定图像（我们在步骤 1 中选择的同一图像的不同变体）