原文链接：blog.cloudflare.com/optimizing-…
图像是互联网的重要组成部分。在中等网页上，图像占加载字节数的 51%，因此对其速度或大小的任何改进都会对性能产生重大影响。
今天，我们很高兴地宣布Cloudflare 的图像优化测试工具。只需输入您网站的 URL，我们就会运行一系列自动化测试，以确定在向访问者提供最佳图像方面是否有任何可能的改进。
用户如何体验速度
每个浏览过网络的人都曾遇到过加载缓慢的网站。通常，这是由于该网页上的图像优化不当造成的，这些图像要么太大，要么嵌入在信息不足的页面上。
页面上的图像可能要花很长时间加载，因为像素从上到下填充得很痛苦;或者更糟的是，当浏览器了解它们的尺寸时，它们可能会导致页面布局的巨大变化。这些问题严重困扰着用户，从2021年8月开始，搜索引擎会相应地惩罚页面。
可以理解的是，缓慢的页面加载对页面的“跳出率”有负面影响，跳出率是指快速离开页面的访问者的百分比。特别是在电子商务网站，跳出率通常有直接的经济影响，页面通常非常注重形象。这是至关重要的优化你的网页上的所有图片，以减少负载和出口从你的来源，提高你在搜索引擎排名的表现，并最终，为你的用户提供一个伟大的体验。
测量速度
自 2021 年 8 月下旬以来，谷歌在考虑搜索结果排名时使用 Core Web Vitals 来量化页面性能。这些指标是三个数字：最大内容绘制 (LCP)、首次输入延迟 (FID)和累积布局偏移 (CLS)。它们分别近似于加载体验、交互性和视觉稳定性。
CLS 和 LCP 是我们可以通过优化图像来改进的两个指标。当 CLS 为高时，这表明大量页面布局在加载时正在移动。LCP 测量渲染视口中单个最大图像或文本块所需的时间。
这些都可以使用真实用户监控 (RUM) 分析（例如Cloudflare 的 Web 分析）“在现场”进行测量，或者使用Cloudflare 的图像优化测试工具在“实验室环境”中进行测量。
如何优化速度
方面
一个网站作者所能做的最有效的性能改进之一是确保他们以适当的尺寸交付图像。用现代相机拍摄的图像真的非常巨大，一些最近的旗舰手机也有巨大的传感器。例如，三星Galaxy S21 Ultra有一个1.08亿像素的传感器，可以捕捉1.2万乘9000像素的图像。这款手机的屏幕宽度只有1440像素。在设备上显示照片的每个像素在物理上是不可能的:对于一张风景照片，只能显示12%的像素列。
将此图像嵌入到网页上会出现同样的问题，但这次，该图像及其所有未使用的像素都通过 Internet 发送。最终，这会在服务器上造成不必要的负载、更高的出口成本和更长的访问者加载时间。对于移动设备上的访问者来说，这种情况更加严重，因为他们通常使用较慢的连接并限制数据使用。在快速的 3G 连接上，108 MP 的照片可能会消耗访问者的数据计划和网站的出口带宽的 26 MB，并且加载时间超过两分钟！
总是以尽可能高的分辨率提供图像以避免“块状”或像素化图像可能很诱人，但是当正确调整大小时，这不是问题。“块状”伪影通常发生在图像被多次处理时（例如，用户在压缩该图像的平台上反复上传和下载图像）。当图像缩小到小于渲染它的屏幕时，就会出现像素化图像。
那么，网站作者如何避免这些陷阱并确保将正确大小的图像传送到访问者的设备？主要有两种方法：
- 带有
srcset和的媒体条件sizes
在网页上嵌入图像时，传统上作者会简单地src在img标签上传递一个属性：
<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属性，我们通知浏览器图像有三种变体，每个变体都有不同的固有宽度：1,500 像素、2,000 像素和原始 12,000 像素。然后浏览器评估sizes属性（(max-width: 1500px)和(max-width: 2000px)）中的媒体条件，以便从srcset属性中选择适当的图像变体。如果浏览器的视口宽度小于 1500px，hello_world_1500.jpg则会加载图片变体；如果浏览器的视口宽度在 1500 像素和 2000 像素之间，hello_world_2000.jpg则将加载图像变体；最后，如果浏览器的视口宽度大于 2000 像素，浏览器将回退到加载hello_world_12000.jpg图像变体。
picture使用source支持各种其他选择器的子元素，元素也可以执行类似的行为。
- 客户端提示
客户端提示是一些浏览器选择实施的标准，有些则没有。它们是一组 HTTP 请求标头，用于告诉服务器有关客户端设备的信息。例如，Viewport-Width当请求一个图像时，浏览器可以附加一个标题，通知服务器该特定浏览器视口的宽度（注意这个标题当前正在被重命名为Sec-CH-Viewport-Width）。
这极大地简化了前面示例中的标记——实际上，不需要对原始的简单 HTML 进行任何更改：
<img src="hello_world_12000.jpg" alt="Hello, world!" />
如果支持客户端提示，当浏览器请求 时hello_world_12000.jpg，它可能会附加以下标头：
Viewport-Width: 1440
然后服务器可以自动提供较小的图像变体（例如hello_world_1500.jpg），尽管请求最初要求hello_world_12000.jpg图像。
通过使浏览器能够请求具有适当尺寸的图像，我们可以为您的服务器和访问者节省带宽和时间。
格式
JPEG、PNG、GIF、WebP，现在是 AVIF。AVIF 是具有广泛行业支持的最新图像格式，它的性能通常优于之前的格式。AVIF 支持具有 alpha 通道的透明度，它支持动画，并且它通常比可比的 JPEG 小 50%（而 WebP 仅减少 30%）。
去年，Google Chrome 添加支持后，我们就将 AVIF 格式添加到 Cloudflare 的 Image Resizing 产品中。Firefox 93（计划于 2021 年 10 月 5 日发布）将是 Firefox 的第一个稳定版本，微软和苹果都是 AVIF开放媒体联盟的成员，我们希望能很快看到 Edge 和 Safari 的支持。在这些现代格式出现之前，我们还看到了改进图像在网页上加载方式的创新方法。BlurHash是一种在 HTML 标记中嵌入非常小的图像表示的技术，该标记可以立即呈现并充当占位符，直到加载最终图像。这种小的表示（散列）产生了类似于最终图像的模糊颜色混合，因此减轻了用户的加载体验。
渐进式 JPEG效果相似，但它们是图像格式本身的内置功能。不是从上到下对图像字节进行编码，而是按照图像细节的递增级别对字节进行排序。这再次产生了更微妙的加载体验，用户首先会看到一个低质量的图像，随着加载更多字节而逐渐“增强”。
质量
与它们的前身 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!" />
最后，延迟加载是一种减少浏览器在页面加载开始时必须执行的工作的技术。通过将图像加载推迟到需要它们之前，浏览器可以优先考虑更重要的资产，例如字体、样式和 JavaScript。通过将loading图像上的属性设置为lazy，您可以指示浏览器仅在图像进入视口时加载图像。例如，在呈现产品网格的电子商务网站上，这意味着页面为访问者加载得更快，并在用户向下滚动时无缝获取折叠下方的图像。所有主要浏览器都支持此功能，但 Safari目前将此功能隐藏在实验标志后面。
<img loading="lazy" … />
托管
最后，您可以通过将页面的所有图像托管在同一个第一方域中来改进图像加载。如果每个图像都托管在不同的域中，浏览器将必须执行 DNS 查找、创建 TCP 连接并为每个图像执行 TLS 握手。当它们都位于同一个域中时（特别是如果该域与页面本身相同），浏览器可以重用连接，从而提高加载这些图像的速度。
测试您的网站
今天，我们很高兴地宣布推出Cloudflare 的图像优化测试工具。只需输入您的网站 URL，我们就会运行一系列自动化测试，以确定您是否可以在向访问者提供最佳图像方面做出任何可能的改进。
我们使用 WebPageTest 和 Lighthouse 来计算您页面的两个版本的 Core Web Vitals：一个作为原始版本，另一个使用 Cloudflare 的最大努力自动优化。这些优化是使用 Cloudflare Worker 与我们的 Image Resizing 产品结合执行的，并将转换图像的格式、质量和尺寸。
我们会报告有关您网页性能的关键摘要指标，包括上述累积布局偏移 (CLS) 和最大内容页面 (LCP)，以及您页面上每张图片的详细分类以及可以进行的优化。
Cloudflare 图像
Cloudflare Images可以帮助您解决本文中概述的许多问题。通过使用 Cloudflare 存储您的图像并配置一组变体，我们可以将优化的图像从我们的边缘传送到您的网站或应用程序。我们会自动设置最佳图像格式，并允许您自定义尺寸并适合您的用例。
我们很高兴看到您使用 Cloudflare Images 构建的内容，并且您可以期待在不久的将来获得更多功能和集成。立即开始使用图像，每月 6 美元起。
