html - 与 相比？

Question

我似乎无法辨别使用 picture 元素或仅使用 img 元素与 srcset 在功能或含义上的区别> 属性。我了解它们的工作原理；我只是不完全理解为什么或何时选择一个而不是另一个。

看起来 img 元素更轻量、更清晰的代码，但它的意思和作用是一样的吗？我在我的代码中使用它来提供同一图像的不同缩放版本:

<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.org img :

An img element represents an image and its fallback content.

同样来自 w3.org picture :

The picture element is a container which provides multiples sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

如果 srcset 属性已经为 img 元素做了这个，为什么我们需要一个 picture 元素作为容器？我错过了什么？语义上有区别吗？

我读了one other post在这里有一条评论表明 img 元素上的 srcset 只是新的，并不是完全可靠的跨浏览器。现在还是这样吗？这是唯一的区别吗？

Answer 1

在您的示例中，<picture>没用，因为你想到处显示相同的图片内容。

<picture>当您想要执行艺术指导时是必需的，例如，当您遇到断点时更改图像宽度/高度比率，或者当您使用小型设备时裁剪图像以放大。