【学习图片】10.响应式图片

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub github.com/qq449245884… ，包含一线大厂面试完整考点、资料以及我的系列文章。

本节，我们来深入了解一下响应式图片。

响应式图像标记可以分为两种情况：一种情况是目标是最有效的图像，另一种是需要对浏览器选择的图像源进行明确控制的情况。分别可以将它们视为描述性和规范性语法。

在本模块中，我们将学习这两种方法。首先，介绍srcset和sizes，以及如何根据浏览器了解用户、设备和浏览情况的情况做出最佳选择。然后使用下<picture>元素，它能根据视口大小和浏览器支持的图像格式等因素对源选择进行合理控制。

描述性语法

描述性语法提供浏览器有关图像源及其如何使用的信息，但最终决策留给浏览器。这是迄今为止更常见的情况；对于绝大多数图像，我们不会想要精细控制浏览器行为。浏览器拥有比Web开发人员更多的信息，并且可以根据此信息做出复杂的决策。

我信无法准确预测用户的浏览上下文——关于他们的硬件、偏好和连接速度的信息太多，无法知道。最好的情况是，我们可以做出有根据的猜测，但无法确定每个用户如何体验 Web。从开发人员的角度来看，响应式图像的核心用例是严格以目标为导向的：允许浏览器根据手头拥有的信息发出最高效的图像请求。

为了使浏览器能够做出这些选择，srcset允许我们提供潜在源列表，以填充单个<img>，而sizes则允许我们向浏览器提供有关如何呈现该<img>的信息。在下一个模块中，我们再来学习如何使用这些内容。

规定性语法

通过规定性语法，你告诉浏览器应该做什么--根据你定义的特定标准选择什么资源。虽然这种用例并不像 "只需加载最有效的资产来渲染这张图片 "那样常见，但它允许我们向浏览器提供使用说明，以说明它在传输资产之前所没有的信息，比如源的内容或其格式。

虽然srcset和 sizes为你提供了一个语法，用于向用户的浏览器传递信息，并允许它对图像源做出决定，但有时你需要明确控制哪个源文件在什么时候被呈现。例如，你可能想根据不同的设计处理，在不同的布局断点上显示不同长宽比的同一图像内容的版本，或者确保只有支持特定编码的浏览器才能收到特定的来源。

在这些情况下，你需要明确地控制哪个源被显示，以及何时显示。这些都是srcset和size在设计上不能给我们的保证。为了获得这种控制，我们需要使用元素。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：web.dev/learn/image…

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。