<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>

那么，功能上有什么区别呢？为什么我要使用更多的代码来实现基本相同的功能？

语义上有差别吗？如果有，是什么？

从w3.org img得知：

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

还从w3.org picture得知：

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

如果srcset属性已经为img元素完成了这项工作，我们为什么需要将picture元素作为容器？我漏掉了什么吗？在语义含义上有何区别？

我在这里的另一篇文章中阅读到了一条评论，建议在img元素上使用srcset只是新的方法，并不完全可靠跨浏览器。 这仍然正确吗？那是唯一的区别吗？

- Jeremy Mallin

---

<picture> 元素存在的一个重要原因是允许使用不同的图片格式，而不仅仅是不同的尺寸，就像 <video>/<audio> 元素一样。例如，在 Chrome 浏览器上可以选择提供稍小一些的 WebP 格式图片，并在其他浏览器上使用不同的格式。未来，将会有更多更好的图片格式得到支持，由更多的浏览器支持。 - Ry-

啊，谢谢Ry。我想我忽略了有人可能想提供不同的图像格式而不仅仅是提供不同的像素大小的情况。那么，在以相同格式提供相同图像的不同分辨率时继续使用img是否有意义，并在提供多种格式时使用picture？ 另外...回复评论/响应是否可以像我刚才做的那样？ - Jeremy Mallin

是的，我认为在不提供不同格式时继续使用<img srcset>是有意义的。而且...回复那样的评论应该没问题，但这次我没有收到通知，很奇怪。 - Ry-

Answer 1

除了艺术指导，使用 <picture> 的一个用例是当你想提供不同的文件类型时。例如，Chrome 支持比 JPG 更好的压缩格式 webp。唯一将 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>

- bart

Answer 2

在你的例子中，<picture> 是无用的，因为你想在所有地方展示相同的图像内容。

当你想执行艺术方向（Art Direction）时，例如在达到断点时更改图像宽度/高度比例或在小设备上裁剪图像进行放大时，<picture> 是必需的。

- Nicolas Hoizey

Answer 3

我的印象是，<picture>为解决未来的问题打开了可能性，它有很多潜力，但大部分时间你实际上会做的事情可以用超级强化的<img>和添加的srcset来实现。

就像在牛肉电脑和高端显卡之间选择和便携式游戏机一样。

- fireh