<img srcset=“.>对<picture><source>？

Question

我似乎看不出使用picture元素或仅使用带有srcset属性的img元素在功能或意义上的区别。我理解它们是如何工作的；我只是不完全理解为什么或何时选择一个而不是另一个。

看起来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>

那么，功能上有什么区别呢？为什么我要使用更多的代码来做同样的事情呢？

有语义上的区别吗？那会是什么？

来自img

img元素表示图像及其回退内容。

也来自picture

picture元素是一个容器，它为其包含的img元素提供多个源，允许作者根据屏幕像素密度、视口大小、图像格式和其他因素，以声明方式控制或向用户代理提供使用哪个图像资源的提示。它代表着它的孩子。

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

我在这里阅读one other post时发表了一条评论，其中指出img元素上的srcset只是一个新的、不完全可靠的跨浏览器。那还是真的吗？这是唯一的区别吗？

Answer 1

在您的示例中，<picture>是无用的，因为您想在任何地方显示相同的图像内容。

当您要执行“艺术方向”时，<picture>是必需的，例如，在遇到断点时更改图像的宽度/高度比，或者在小型设备上剪切图像以放大图像。

Answer 2

除了艺术指导之外，使用<picture>的用例是当您想提供不同的文件类型时。例如，Chrome支持的webp比JPG具有更好的压缩性能。让Chrome选择一个webp文件的唯一方法是通过<picture>提供它。

<picture>
    <source srcset="image-800.webp 800w, image-400.webp 400w, image-200.webp 200w" 
type='image/webp' media="(max-width: 800px)" 
sizes="100vw" />
    <img src="default.webp" alt="something" />
</picture>