就总传输大小而言，就目前来看，图片是网络上最大的资源 和每个网页的请求数中位数网页的总传输大小大约为 截至 2022 年 6 月，为 2MB，其中仅图片就占了近一半。毫不夸张 可以说，优化图片请求可能是您可以进行的最大效果优化。
稍后，您将了解自适应图片是如何发展的，从而帮助解决因尝试针对所有情况呈现同一张图片而造成的问题。 在本部分中，您将了解与图片相关的关键性能指标以及如何改进这些指标。
延迟图片请求
您将学习多种方式来确保您的图片请求尽可能精简高效，
永远不会成为那个星球。因此，我想先和大家分享一下，在改进媒体营销方面，
您向用户提供图片资源：loading="lazy" 属性。
<img src="image.jpg" loading="lazy" alt="…">
该属性可确保在图片靠近用户视口之前不会发出请求，这样会延迟图片的初始时间 网页加载（浏览器处于最繁忙状态的时间），并将这些请求从关键呈现路径中移除。
使用此属性对效果产生巨大的积极影响，虽然在实际操作中可能很简单：但一张图片 用户的视口不会被请求，也不会在用户永远看不到的图片上浪费带宽。
但存在一个问题：延迟这些请求意味着不能利用浏览器的专为请求用户量身打造的
图片。如果对布局顶部的 img 元素使用 loading="lazy"，因此更有可能
在网页首次加载时始终显示在用户视口中，最终用户的观看可能会觉得这些图片变慢了。
提取优先级
loading 属性是一个更大规模的网络标准示例，旨在使开发者能够更好地控制网络浏览器
确定请求的优先级
您或许知道浏览器的获取优先级的基本方法：
例如，对文档 <head> 中的外部 CSS 文件的请求被视为足以阻止呈现，而对
将延迟到 </body> 正上方的外部 JavaScript 文件，直到渲染完成。如果 <img> 上的 loading 属性的值为“lazy”；
相关图片请求将被延迟，直到浏览器确定会向用户显示为止。否则，该图片将与
与网页上任何其他图片的优先级相同。
fetchpriority 属性旨在提供
开发者可更精细地控制资源的优先级，让您能够标记资源
例如“高”和“low”相对于相同类型的资源的优先级。fetchpriority 的用例类似于 loading
属性（但更为宽泛）。例如，您可以对仅在用户互动后显示的图片使用 fetchpriority="low"
（无论该图片是否在用户的视口内），以便优先显示网页上其他位置的可见图片，或fetchpriority="high"
优先显示已知在网页渲染后立即显示在视口中的图片。
请注意，fetchpriority 与 loading 的不同之处在于，它不会从根本上改变浏览器行为。它不会指示浏览器
使某些资源先于其他资源加载，而不是为其提供重要背景信息，让其在做出资源请求方面的决策时参考。
衡量图片的影响
优化图片素材资源时，感知的性能通常比总体转移更重要，也更难以衡量 。
网页指标可提供可衡量且切实可行的指标和指导，并突出网页体验中存在的问题， 包括网络服务器响应时间长、呈现问题和互动延迟等。Core Web Vitals 是这些目标中的一部分，以激光为中心， ：根据用户在单个网页上的直接体验，综合了一套技术衡量标准，确定给用户带来体验的速度有多快。
累积布局偏移
Cumulative Layout Shift (CLS) 用于衡量视觉稳定性。该指标用来衡量 网页内容的布局会随着资源的加载和呈现而变化。花费较高的任何广告客户 使用网络的时间因网页“跳跃”而失去在长篇文本中占据的一席之地延迟的网页字体或图片来源 或者有互动元素突然远离指针。CLS 过高只是令人厌烦 最严重的是用户错误，即“取消”按钮移至之前由“确认”占用的空间按钮。
由于加载时间较长，且布局在布局中占据的空间较大，因此可以说图片是导致这种情况的常见原因 CLS 得分较高的原因。
由于现代浏览器中相对较近的更改，要避免因图片而导致 CLS 得分较高的操作比您想象的要容易得多。
如果您现在使用前端已经有几年了，那么应该已经熟悉 <img> 上的 width 和 height 属性：
在 CSS 得到广泛采用之前，这些是控制图片大小的唯一方法。
<img src="image.jpg" height="200" width="400" alt="…">
之所以弃用这些属性，是为了将我们的样式问题与标记区分开来，尤其是作为自适应属性
网页设计使有必要通过 CSS 指定基于百分比的大小。在自适应设计初期，“删除
未使用的 width 和 height 属性是常见建议，即我们在 CSS 中指定的值 max-width: 100% 和
height: auto）会替换它们。
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
像上例一样移除 height 和 width 属性后，浏览器确定的唯一方法就是
在这种情况下，图片的高度是请求来源、解析它，然后根据其固有宽高比
应用样式表之后，它在布局中所占空间的宽度。这个过程大部分是在网页
新计算的高度导致了额外的布局偏移。
从 2019 年开始，浏览器行为已更新为以不同方式处理 width 和 height 属性。我们不再使用
属性来确定布局中 img 元素的固定（基于像素）大小，则可以认为这些属性代表
图片的宽高比（语法相同）。现代浏览器会对比这些值
在渲染页面之前确定 img 元素的固有宽高比，以便预留图片在布局渲染时将占据的空间。
通常，您应始终对 <img> 使用 height 和 width 属性，其值与图片来源的固有大小一致，因此
但前提是您已在 max-width: 100% 旁边指定了 height: auto，以替换 HTML 属性中的高度。
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
通过对 <img> 元素使用 width 和 height 属性，您可以避免因图片而导致 CLS 得分较高的情况。
请务必注意，这种方法没有什么缺点，因为它依赖于长期存在的浏览器行为，即任何浏览器
支持基本 CSS 后，标记中的 height 和 width 属性就会被您的样式替换，从而保持正常运行。
虽然 width 和 height 属性可以为图片预留必要的布局空间，从而轻松避免 CLS 问题，
存在空白空缺或低质量占位符的用户，而
那么等待图像传输和渲染也并不理想。虽然您可以采取一些措施来减少
图片加载缓慢的影响，要想更快地向用户展示完全呈现的图片，唯一的方法就是减小其传输大小。
最大内容渲染时间
Largest Contentful Paint (LCP) 衡量的是渲染用户视口中可见的最大“contentful”元素所用的时间， 占据可见网页中最大比例的内容元素。表面上看，该指标似乎过于具体 元素可作为实际的替代点，向用户表明已呈现网页大部分内容的位置。LCP 是 衡量（感知）效果的指标。
DOMContentLoaded 或 window.onload 事件等指标有助于确定何时加载当前网页
从技术层面来讲已是完整的，但不一定对应用户的网页体验。呈现元素时略有延迟
用户视口以外的区域也会计入这两个指标中的任何一个，但实际用户可能完全检测不到。
较长的 LCP 表示用户对网页（当前视口内最重要的内容）的第一印象是网页速度缓慢，
还是突然出现故障
LCP 捕获的用户感知会直接影响用户体验。Vodafone 去年刚刚完成的一项实验 发现，LCP 提高 31% 后，不仅销售额提高了 8%（这本身就是非常可观的），而且用户总数中也有 15% 的 成为潜在客户的访问者数量提高了（“访问者转化为潜在客户的比率”），并且用户数量提高了 11% 访问了购物车的用户（“购物车访问率”）。
在超过 70% 的网页上，初始网页上最大的元素是
视口涉及图片，既可以是独立的 <img> 元素，也可以是带背景图片的元素。也就是说，
70% 的网页LCP 得分根据图片性能计算得出。无需太多想象力就能看清原因：庞大、引人注目
这些图片和徽标很可能位于“首屏”位置。
您可以采取以下几项措施来避免 LCP 延迟：首先，切勿在“首屏”上指定 loading="lazy"图片
因为将请求延迟到网页呈现后，可能会对您的 LCP 得分产生极大的负面影响。
其次，使用 fetchpriority="high" 可以告知浏览器传输此图像的优先级应高于页面上其他位置的图片。
秉持上述原则，提高网页的 LCP 得分最重要的措施就是减少 传输和渲染这些图像所需的时间。为此，您需要确保图片来源尽可能精简高效 （当然，不牺牲其质量），并确保用户只会看到对效果最好的图片素材资源 浏览情境。
总结
图片素材资源对用户而言是最大的资源带宽 - 传输其他所有必要资产时占用的带宽 来呈现网页图片会在周围的页面内容期间和之后带来严重的感知性能问题 布局已渲染。简而言之：图片素材资源确实会造成损坏。
这或许有点令人望而却步，同时“如果使用更少的图片，网络效果会更好”就显然仅从效果角度看待 也会给用户造成极大的不便图片是网络的重要组成部分，您不应对图片的质量降低 只以性能为目的而提供有意义的内容。
在本课程的其余部分，您将了解为我们的图片资源提供支持的技术，以及减少 ，同时又不影响质量。