响应式图片标记可以分为两种情况：一种情况是目标是最有效率的图片，另一种情况是您需要显式控制浏览器选择哪个图片来源。您可以分别将它们视为描述性语法和规范性语法。
在本模块中，您将学习这两种方法。首先，我们将介绍 srcset 和 sizes，以及如何帮助浏览器根据其对用户、设备和浏览情况的了解做出最佳选择。然后，您将了解 <picture> 元素，该元素允许根据视口大小和浏览器对图片格式的支持等因素显式控制来源选择。
描述性语法
描述性语法向浏览器提供有关图片来源及其使用方式的信息，但最终将决策权留给浏览器。这是迄今为止更常见的情况；对于绝大多数图片，您都不希望对浏览器行为进行精细控制。浏览器掌握的信息远比 Web 开发者多，并且可以根据这些信息做出复杂的决策。您无法准确预测用户的浏览环境，因为您无法了解他们的硬件、偏好和连接速度等太多信息。充其量，您可以做出有根据的猜测，但无法确定每个用户如何体验 Web。从开发者的角度来看，响应式图片的核心用例是严格以目标为导向的：允许浏览器根据其掌握的信息发出尽可能高效的图片请求。
为了使浏览器能够做出这些选择，srcset 允许您向浏览器提供用于填充单个 <img> 的潜在来源列表，而 sizes 允许您向浏览器提供有关如何呈现该 <img> 的信息。您将在下一个模块中学习如何使用它们。
规范性语法
使用规范性语法，您可以告诉浏览器该怎么做——根据您定义的具体标准选择哪个来源。虽然这种用例不如“仅加载最有效的资源来呈现此图片”那么常见，但它允许我们向浏览器提供使用说明，以说明浏览器在资源传输之前不具备的信息，例如来源的内容或其格式。
虽然 srcset 和 sizes 为您提供了一种语法，用于将信息传递给用户的浏览器并允许其就图片来源做出决策，但有时您需要显式控制何时以及呈现哪个源文件。例如，您可能希望根据跨布局断点的不同设计处理方式显示具有不同纵横比的相同图片内容版本，或者确保只有支持特定编码的浏览器才能接收特定来源。
在这些情况下，您需要显式控制何时以及显示哪个来源。这些是 srcset 和 sizes 在设计上无法给我们的保证。为了获得这种控制，我们需要使用 <picture> 元素。