图片效果

图片通常是网络中最重要、最普遍的资源。作为 因此，优化图片可以显著改善您网站的效果。 在大多数情况下，优化图片意味着可以通过发送 但您也可以优化发送给用户的字节数 提供适合用户设备大小的图片。

您可以使用 <img> 或 <picture> 元素将图片添加到网页中，或者 CSS background-image 属性。

图片大小

在使用图片资源时，您可以执行的第一项优化是 以正确的尺寸显示图片，在这种情况下，尺寸指的是 图片的尺寸。在不考虑其他变量的情况下，显示的图片 500x500 像素容器中的最佳尺寸为 500x500 500 像素。例如，使用 1000 像素的方形图片意味着该图片 是所需大小的两倍

不过，选择合适的图片大小时，需要考虑很多因素， 因此在每种情况下选择适合的图片大小的任务 复杂。2010 年 iPhone 4 发布时，屏幕分辨率 (640x960) 是 iPhone 3 (320x480) 的两倍。但其物理尺寸 iPhone 4 的屏幕空间与 iPhone 3 大致相同

以更高的分辨率显示所有内容都会生成文字和图片 明显变小了，确切地说，是其先前大小的一半而是将 1 像素 变成了 2 个设备像素。这称为设备像素比 (DPR)。通过 iPhone 4（以及之后发布的许多 iPhone 型号）的 DPR 为 2。

我们回顾一下前面的示例，如果设备 DPR 为 2，且图片为 显示在 500x500 像素的容器中，然后是 1000 像素的方形图片 （称为固有尺寸）现在是最佳尺寸。同样，如果 DPR 为 3，则最佳尺寸为 1500 像素的方形图片。

srcset

<img> 元素支持 srcset 属性，该属性允许您指定 浏览器可能使用的可能图片来源的列表。指定的每个图片来源 必须包含图片网址以及宽度或像素密度描述符。

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

上述 HTML 代码段使用像素密度描述符来提示浏览器 在 DPR 为 1 的设备上使用 image-500.png，在设备上使用 image-1000.jpg DPR 为 2，在 DPR 为 3 的设备上为 image-1500.jpg。

虽然这些都可能看起来干燥乏味，但屏幕的 DPR 并不是唯一的 在为给定网页选择最佳图片时的考虑因素。网页的 layout 是另一个考虑因素。

sizes

上述解决方案仅适用于以同一 CSS 像素显示图片的情况 所有视口上的尺寸在许多情况下，网页布局以及容器的 其大小会随用户的设备而变化。

通过 sizes 属性，您可以指定一组来源大小，其中每个 来源大小由媒体条件和值组成。sizes 属性 表示图片的预期显示尺寸（以 CSS 像素为单位）。合并后 借助 srcset 宽度描述符，浏览器可以选择使用哪个图片来源 最适合用户的设备

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

在上述 HTML 代码段中，srcset 属性指定图片列表 （用英文逗号分隔）。以下各候选人 该列表包含图片的网址，后跟表示 固定宽度。图片的固有尺寸即其尺寸。对于 例如，1000w 描述符表示图片的固有宽度为 宽度为 1000 像素。

利用这些信息，浏览器会评估 sizes 中的媒体条件 属性，并且（在本例中）指示当设备的视口宽度 超过 768 像素时，图片会以 500 像素的宽度显示。在较小的屏幕上 设备，图片会以 100vw（即整个视口宽度）显示。

然后，浏览器可以将这些信息与 srcset 图片列表合并 以找到最佳图片。例如，如果用户使用的是移动设备 屏幕宽度为 320 像素，DPR 为 3 的设备，则显示图片 时间：320 CSS pixels x 3 DPR = 960 device pixels。在本示例中，距离最近的 大小为 image-1000.jpg 的图片，其固有宽度为 1000 像素 (1000w)。

文件格式

浏览器支持多种不同的图片文件格式。现代图片格式 WebP 和 AVIF 的压缩效果可能优于 PNG 或 JPEG，因此 从而减少下载时间。通过提供 现代格式的图片，您可以减少资源的加载时间，从而可能 会降低 Largest Contentful Paint (LCP) 性能。

WebP 是一种广泛支持的格式，适用于所有现代浏览器。WebP 通常比 JPEG、PNG 或 GIF 具有更好的压缩效果，兼具有损和 无损压缩WebP 还支持 alpha 通道透明度， 使用有损压缩 - JPEG 编解码器不提供的功能。

AVIF 是一种较新的图片格式，虽然其支持范围不如 WebP， 在各浏览器中都获得相当不错的支持。AVIF 同时支持有损 和无损压缩，测试表明，使用无损压缩算法 与 JPEG 相比AVIF 还提供广色域 (WCG) 和 高动态范围 (HDR) 功能。

压缩

就图片而言，有两种压缩类型：

1. 有损压缩
2. 无损压缩

有损压缩通过量化降低图片准确率， 使用色度下采样舍弃其他颜色信息。 有损压缩对噪声较多的高密度图像最为有效 和颜色，通常是内容相似的照片或图像。这是因为 有损压缩产生的伪像不太可能被注意到 如此详细的图像。不过，有损压缩在 包含尖锐边缘（例如线条艺术）、同样明显细节的图像，或 文本。有损压缩可应用于 JPEG、WebP 和 AVIF 图片。

无损压缩压缩不含数据的图片，从而减小文件大小 损失。无损压缩根据像素与 相邻像素。无损压缩用于 GIF、PNG、WebP 和 AVIF 图片格式。

您可以使用 Squoosh、ImageOptim 或图片 优化服务。进行压缩时，没有合适的通用设置 。建议的方法是尝试使用不同的 直到在图像质量和 文件大小。一些高级图片优化服务可为您完成这项工作 但并非所有用户都有经济能力。

<picture> 元素

<picture> 元素可让您更灵活地指定多个 候选图片：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

在 <picture> 元素中使用 <source> 元素时，您可以添加 支持 AVIF 和 WebP 图片，但会回退到使用更兼容的旧版图片 如果浏览器不支持新型格式，则选择“.”格式。通过这种方法， 浏览器会选择指定的第一个匹配的 <source> 元素。如果可以 以该格式呈现图片时，它会使用该图片。否则 移至下一个指定的 <source> 元素。在上述 HTML 中 因此 AVIF 格式的优先级高于 WebP 格式，会回退到 JPEG 格式（如果既不支持 AVIF 也不支持 WebP）。

<picture> 元素需要嵌套在其中的 <img> 元素。通过 alt、width 和 height 属性在 <img> 上定义，并使用 无论选择哪个 <source>。

<source> 元素还支持 media、srcset 和 sizes 属性。与前面的 <img> 示例类似，这些标记指示 让浏览器知道要在不同视口上选择哪张图片。

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media 属性接受媒体条件。在前面的示例中， 设备的 DPR 用作媒体条件。DPR 高于 或等于 1.5 的值将使用第一个 <source> 元素。<source> 元素 用于告知浏览器，在视口宽度大于 768 像素的设备上， 以 500 像素宽度显示选定的候选图片。在小型设备上 这样会占据整个视口宽度通过结合使用 media 和 srcset 因此您可以更精细地控制要使用的图片。

下表对此进行了说明，其中包括多个视口宽度和 评估设备像素比：

DPR 为 1 的设备会下载 image-500.jpg 映像，包括大多数 桌面设备用户 - 以 500 像素宽的外部尺寸查看图片的用户。已开启 另一方面，DPR 为 3 的移动用户可能会下载 image-1500.jpg - 在桌面设备上使用的图片相同，DPR 为 3。

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

在此示例中，调整了 <picture> 元素以包含一个额外的 <source> 元素，为具有高 DPR 的宽幅设备使用不同的图片：

通过这个额外的查询，您可以看到 image-1000-sm.jpg 和 image-1500-sm.jpg：在小型视口上显示。这些额外信息 可以进一步压缩图片 同时又不会影响图片质量 。

或者，通过调整 srcset 和 media 属性，您可以避免 在小视口上提供大图片：

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

在前面的 HTML 代码段中，宽度描述符遭到移除，取而代之的是 其中列出了许多设备像素比描述符在移动设备上投放的图片受到限制 设置为 /image-500.jpg 或 /image-1000.jpg，即使在 DPR 为 3 的设备上也是如此。

如何管理复杂性

使用自适应图片时，您会发现自己会发现许多不同的 尺寸变体和格式。在前面的示例中，变体版本 但不包括 AVIF 和 WebP。您应该制作多少个变体 有哪些？和许多工程问题一样，答案往往是“视情况而定”。

虽然您可能忍不住想使用很多款式来找到最适合的款式， 每个额外的图片变体都会产生费用 浏览器缓存。只使用一种变体时，每位用户都会收到相同的图片， 因此可以非常高效地缓存数据

另一方面，如果有多个变体，则每个变体都需要 缓存条目。在以下情况下，服务器费用可能会增加，并可能会降低性能： 变体的缓存条目已过期，需要重新从以下位置提取图片： 源服务器。

除此之外，您的 HTML 文档的大小会随版本的不同而变大。您 您可能发现自己为每张图片传送了几千字节的 HTML。

根据 Accept 请求标头提供图片

Accept HTTP 请求标头会告知服务器 用户的浏览器所能理解的内容。您的服务器可以使用此信息 最佳图片格式，而无需在 HTML 响应中增加额外的字节。

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

上述 HTML 代码段是您可以添加到 服务器 JavaScript 后端，以选择并提供最佳图片格式。 如果请求 Accept 标头包含 image/avif，则 AVIF 图片 。否则，如果 Accept 标头包含 image/webp，系统就会显示 WebP 图片。 。如果这两个条件都不满足，则 JPEG 图片 。

您可以根据 Accept 请求标头的内容修改响应 例如，您可以在几乎所有类型的网络服务器中重写图片请求， （使用 mod_rewrite，基于 Accept 标头）。

这与图片内容传送网络 (CDN)。图片 CDN 是优化图片以及将 根据用户的设备和浏览器确定最合适的格式。

关键是要找到平衡点、生成合理数量的候选图像， 并衡量对用户体验的影响。不同的图片 结果不同，而对每张图片应用的优化则取决于其 页面大小以及用户使用的设备例如， 全宽主打图片可能需要比缩略图更多 电子商务商品详情页面。

延迟加载

可以指示浏览器延迟加载 使用 loading 属性指定视口大小。属性值 lazy 会告知 除非图片位于（或靠近）视口中，否则浏览器不会下载该图片。这个 节省带宽，使浏览器能够优先处理 渲染视口中已有的关键内容。

decoding

decoding 属性用于告知浏览器应如何对图片进行解码。答 值 async 可告知浏览器可异步解码图片； 从而缩短呈现其他内容所需的时间值sync表示 该图片应与其他内容同时呈现。 auto 的默认值允许浏览器决定最适合 用户。

图片演示

知识测验

后续内容：视频效果

虽然图片可能是网络上最普遍的媒体类型，但 。视频 是网络上另一种常见的媒体类型， 性能考虑因素在本课程的下一个单元中，您将了解一些 了解有关优化视频以及如何高效加载视频的技巧。