我似乎无法辨别使用picture元素还是仅将img元素与srcset属性之间的功能或含义上的区别。我了解他们的工作方式；我只是不完全理解为什么或何时选择一个。
看起来imgelement是更轻便，更简洁的代码，但这意味着和做相同的事情吗？我在代码中使用它来提供同一图像的不同缩放版本：
<img src="default.jpg"
srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
sizes="(max-width: 800px) 100vw, 12em"
alt="something" />
就提供正确的缩放图像而言，它确实可以满足我的要求，并且似乎可以在Chrome，Firefox，Edge和Opera中运行。
我知道可以使用以下代码完成相同的操作：
<picture>
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(max-width: 800px)"
sizes="100vw" />
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(min-width: 800px)"
sizes="12em" />
<img src="default.jpg" alt="something" />
</picture>
那么，功能上有什么区别？为什么我要使用更多的代码来做基本上相同的事情？
有语义上的区别吗？那会是什么？
来自w3.orgimg：
一个
img元素表示的图像和它的后备内容。
同样来自w3.orgpicture：
该
picture元素是一个容器，它为其包含的img元素提供多个源，以允许作者基于屏幕像素密度，视口大小，图像格式和其他因素，以声明方式控制或提示要使用的图像资源。 。它代表它的孩子。
如果srcset属性已经对该img元素执行此操作，为什么我们需要一个picture元素作为容器？我想念什么？语义上有区别吗？
我在此处阅读了另一篇文章 …