<img srcset="..."> 与 <picture><source>？答案

【问题标题】：<img srcset="..."> versus <picture><source>?<img srcset="..."> 与 <picture><source>？
【发布时间】：2018-09-18 19:30:38
【问题描述】：

我似乎无法辨别使用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 元素作为容器？我错过了什么？语义上有区别吗？

我在此处阅读了one other post 的评论，其中表明img 元素上的srcset 只是新的并且不是完全可靠的跨浏览器。这仍然是真的吗？这是唯一的区别吗？

【问题讨论】：

<picture> 存在的一个重要原因是允许图像具有不同的格式，而不仅仅是不同的大小，就像<video>/<audio>。例如，您可能更愿意在 Chrome 上提供稍微小一点的 WebP，然后为其他浏览器使用不同的格式。未来应该会有更多更好的格式，被更多的浏览器支持。
啊。谢谢你，瑞。我想我忽略了一些人可能想要提供不同的图像格式而不是仅仅提供不同的像素大小的情况。那么在以相同格式提供同一图像的不同分辨率时继续使用 img 并在提供多种格式时使用 picture 是否有意义？另外..可以像我刚才那样回复 cmets/responses 吗？
是的，我认为在不提供不同格式的情况下继续使用<img srcset> 是有意义的。还有……这样回复cmets应该没问题，但是这次不知什么原因没有收到通知。很奇怪。

标签： html image semantic-markup responsive-images srcset

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：