WEB图像优化

本文正在参与 “性能优化实战记录”话题征文活动

图像是网站或者WEB应用重要的组成部分，随着现在终端设备及5G的普及，用户对于图像的要求越来越高，为了提供更加速度体验，可以对图像进行优化。

至于图像要不要优化，优化后的效果，可以通过在线工具 Cloudflare 来测试网站的效果，并对网站图像提出优化意见。

如何体验速度

每个浏览过网站的人都曾遇到过加载缓慢的网站。通常，这是由于该网页上的图像优化不当造成的，如图像太大等等。

页面上的图像可能需要很长时间才能加载，像素从上到下痛苦地填充；或者更糟糕的是，当浏览器了解它们的尺寸时，它们可能会导致页面布局发生巨大变化。这些问题对用户来说是一个很不友好的体验。

可以理解，缓慢的页面加载会对页面的“跳出率”产生不利影响，即快速离开页面的访问者的百分比。特别是在电子商务网站上来说，页面上的图像都比较多，处理不当，过高的跳出率将直接的影响收入。因此优化网页上的图像以减少来源的负载和输出，提高网站在搜索引擎排名中的表现并最终为用户提供出色的体验至关重要。

速度测试

自 2021 年 8 月以来，谷歌在考虑搜索结果排名时使用Core Web Vitals 来量化页面性能。衡量的因素侧重于加载速度、互动性和视觉稳定性方面的性能：

Largest Contentful Paint (LCP)：即最大内容绘制，衡量加载性能。为了提供良好的用户体验，请尽力在网页开始加载的 2.5 秒内完成 LCP。 First Input Delay (FID)：即首次输入延迟，衡量互动性。为了提供良好的用户体验，请尽力将 FID 控制在 100 毫秒以内。 Cumulative Layout Shift (CLS)：即累积布局偏移，衡量视觉稳定性。为了提供良好的用户体验，请尽力使 CLS 得分低于 0.1。

CLS 和 LCP 是可以通过优化图像来改进的两个指标。当 CLS 为高时，这表明大量页面布局在加载时正在移动。LCP 测量渲染视口中单个最大图像或文本块所需的时间。

这些都可以使用真实用户监控 (RUM) 分析（例如 Cloudflare 的 Web 分析）进行实时测量，或者使用Cloudflare 的图像优化测试工具在“实验室环境”中进行测量。

如何优化速度

网站开发者可以做出的最有影响力的性能改进之一是确保提供适当尺寸的图像。现代设备拍摄的图像分辨率都比较大，导致非常庞大。将将这些图像放到网页上会出现无法快速看到全部的问题。而有时无法限制用户使用图像的分辨率，通常可以通过程序对图像进行在线降低分辨率以降低大小，并为不同的终端配置不同分辨率的图像。

带有 srcset 和的媒体条件 sizes

在网页上插入图像时，通常是增加 img 标签，并为 src 设置图像路径：

<img src="hello_world_12000.jpg" alt="Hello, world!" />
复制代码

从 2017 年开始，主流浏览器都支持更动态的 srcset 属性，允许开发者根据访问者浏览器的匹配媒体条件设置多个图像源，即为不同分辨率的终端配置不同分辨率的图像：

<img
    srcset="
        hello_world_1500.jpg   1500w,
        hello_world_2000.jpg   2000w,
        hello_world_12000.jpg 12000w
    "
    sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
    src="hello_world_12000.jpg"
    alt="Hello, world!"
/>
复制代码

上面的代码通过 srcset 属性，告知浏览器图像有三种变化，每个变化具有不同的固有宽度：1500px、2000px 和原始 12000px 。然后浏览器评估 sizes 属性（(max-width: 1500px) 和 (max-width: 2000px)）中的媒体条件，以便从 srcset 属性中选择适当的图像尺寸。如果浏览器的宽度小于 1500px，图片 hello_world_1500.jpg 则会被加载；如果浏览器的宽度在 1500px 和 2000px 之间，图像 hello_world_2000.jpg 则将被加载；最后，如果浏览器的宽度大于 2000px ，浏览器将加载原始图片 hello_world_12000.jpg 。

图像格式

过去推荐使用 JPEG、PNG、GIF、WebP，现在是 AVIF，AVIF 是具有广泛行业支持的最新图像格式，它的性能通常优于之前的格式。AVIF 支持具有 alpha 通道的透明度，并支持动画，并且它通常比 JPEG 小 50%（而 WebP 仅减少 30%）。

图像质量

与它们的前身 JPEG 不同，较新的图像格式（WebP 和 AVIF）支持无损压缩。对于某些用途，无损压缩可能是合适的，但对于大多数网站来说，速度是优先考虑的，这种轻微的质量损失值得节省时间和字节数。

优化设置质量的位置是一种平衡行为：过于激进，图像上会出现伪影；太少，图像不必要地大。Butteraugli 和 SSIM 是近似对图像质量感知的算法示例，但目前很难实现自动化，因此最好手动设置。然而，总的来说，发现在大多数压缩库中大约 85% 是合理的默认值。

图像标记

所有先前的技术都减少了图像使用的字节数。这对于提高这些图像的加载速度和最大内容绘制 (LCP) 指标非常有用。但是，要改进累积布局偏移 (CLS) 指标，必须尽量减少对页面布局的更改，这可以通过提前通知浏览器图像大小来完成。

在优化不佳的网页上，图像将在标记中没有尺寸的情况下加载。浏览器获取这些图像，并且只有在收到图像的标头字节后才能知道该图像的尺寸。效果是浏览器首先渲染图像占据零像素的页面，然后在实际加载图像像素本身之前突然使用该图像的尺寸重新绘制。这对用户来说是很不友好的，并且对可用性有严重影响。

在 HTML 标记中包含图像的尺寸非常重要，这样浏览器甚至可以在开始加载之前为该图像分配空间。可以防止不必要的重绘并减少布局偏移。甚至可以在动态加载响应式图像时设置尺寸：通过告知浏览器原始图像的高度和宽度，假设纵横比不变，即使使用宽度选择器，它也会自动计算正确的高度。

<img height="9000"
     width="12000"
     srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />
复制代码

还有一个标记，就是延迟加载，为图像增加属性 loading="lazy" :

<img loading="lazy"   />
复制代码

CDN加速

最直接的方式就是使用CDN加速，通过缓存及多线路的方式加速图像的加载。

总结

图像性能优化，对于图像使用比较多的网站来说还是很有必要的，可以通过 Cloudflare 的图像优化测试工具、WebPageTest、Lighthouse 综合测试网站的关键指标。