响应式图片：如果只是改变分辨率，请使用 srcset。

如果您正在实施响应式图片（为不同情况在 HTML 中使用不同的图片），并且您只是在不同版本的同一图片之间切换（绝大多数使用情况），那么您只需要在 <img> 上使用 srcset 属性。 看看这个简单的语法

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

不仅仅是语法很简单，它比使用显式 media 属性的 <picture> 和 <source> 做得更好（我们稍后会解释原因）。 此外，它还有机会在未来随着浏览器设置和浏览器改进而变得更好。

我之前已经录制过关于这个主题的视频了，但看完 Mat Marquis 在 An Event Apart Austin 的演讲以及 Jason Grigsby 的文章 后，我对此有了更深的理解。 我在这里再次写它，因为我认为我们所有人都应该理解它。

使用 srcset，浏览器会负责找出哪张图片最合适

在上面的简单示例中，我们所做的只是告诉浏览器我们有哪些图片可用以及它们的大小。 然后浏览器会独立完成所有工作，找出哪个图片最合适。

Mat Marquis 通过展示浏览器如何用数学方法来解决这个问题进行了演示。 假设您使用的是屏幕宽度为 320px 的设备，并且它是一个 1x（非视网膜）显示屏。 并且您拥有的图片是 small.jpg（500px 宽）、medium.jpg（1000px 宽）和 large.jpg（2000px 宽）。

浏览器会执行以下操作

让我做一些没人关心的快速计算，除了我自己。

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

好的，因为我是一个 1x 显示屏，1.5625 是最接近我需要的。 它有点高，但与其他高得多的图片相比，它是最佳选择。

现在另一个浏览器访问了该网站。 它也是一个 320px 显示屏，但它是一个视网膜（2x）显示屏。 该浏览器会执行相同的计算，然后会执行以下操作

好的，因为我是一个 2x 显示屏，我会舍弃 1.5625 图片，因为它对我来说太低了，可能会看起来不好。 我会使用 3.125 图片。

您是否看到了它的实用性？ 您让浏览器自己找出最合适的图片，而不是您自己费力地去想。

浏览器将变得更加智能

请记住，使用 srcset 这种方法已经带来了益处，但它将变得更好。 将 srcset 视为建议或帮助浏览器做出决定的额外信息。 最终，它可以做它认为正确的事情。 这意味着

• 浏览器可以提供有关图片的用户偏好
• 浏览器可以开始考虑带宽

是的，这是理论上的，但很可能实现。

如果您使用带有显式来源的 <picture>，浏览器必须严格按照您的指示操作，不能自己做出选择。 现在，<picture> 可以被设置为执行 srcset 目前正在做的事情，只是它更冗长，而且没有改进的空间。

另外，sizes

我们故意没有在这里讨论 sizes 属性。 实际上，将其省略也还不错。 在这种情况下，它会假设 sizes="100vw"，这意味着

我假设您在使用图片时，它会占据整个视窗的宽度。

这通常不是一个糟糕的假设。

如果您愿意，您可以对它进行各种特定的配置。 您可以使用 sizes 属性来精确匹配您的 CSS 布局，并告诉浏览器该图片在每个屏幕尺寸上将有多大，与您的设计中的断点匹配。 这可能会有点复杂，老实说，它可能有点危险，因为您将 CSS 内容放在标记中，您知道这会带来什么后果。 Eric Portis 刚写了一篇关于这个问题的文章。 理想情况下，它可以被自动化或在服务器端注入。

我认为某种“通用”的 sizes 属性可能会有用。 在一个类似博客的通用网站上，也许在内容中使用以下代码是一种明智的做法

sizes="(min-width: 800px) 50vw, 100vw"

含义：“如果浏览器窗口宽度大于 800px，该图片可能会显示为其宽度的一半。 如果更小，它可能会占据整个宽度。”

为什么讨论这个问题？

再次强调：绝大多数响应式图片的使用情况并非基于“艺术指导”。 艺术指导是一种高级用例，请随意使用它。 <picture> 在这方面非常出色。

大多数响应式图片的使用情况将是：“我有这个图形的多个版本。 它们就在这里，请使用正确的版本。”

这是一个非常令人困惑的话题。 它需要被思考和撰写，以便它能够脱颖而出，成为我们前端开发人员集体意识中更根深蒂固的一部分。

Tim Evko 创建了一个 用于响应式图片的 WordPress 插件。 它利用 WordPress 的能力来创建图片的较小版本。 然后您点击您想要的图片，它最终会输出创建该图片所需的响应式图片代码。 目前，它使用 <picture>。 这是因为 <picture> 在前端开发人员集体意识中比 srcset 更深入人心。 Tim 正在 试图理解这一切，以便他能够弄清楚是否以及如何更改该插件。

@Tevko @brad_frost srcset/sizes = 帮助浏览器决定哪张图片最合适的信息。 Picture 带有 media 属性 = 明确的 DO THIS ONLY

— Chris Coyier (@chriscoyier) 2014年9月29日

何时使用？

这也很棘手。

如果您现在需要它，并且需要良好的 浏览器支持，您需要使用 polyfill。 但这 可能会带来一些潜在的弊端。 因此，目前您需要自己做出决定，我不确定是否以及是否存在适用于所有场景的最佳实践。