如何压缩图片以提升 Google PageSpeed 得分

报告到底在指什么

PageSpeed 会以几种不同的方式标记图片问题，含义各不相同。“适当调整图片大小”是说您发送的文件像素数超过了它实际显示的空间。“有效地编码图片”是说质量设置高于图片实际需要。“以新一代格式提供图片”是说同一张图片换成 WebP 或 AVIF 会更小。第一项几乎总是代价最高的一项，也恰恰是人们最常跳过的一项，因为页面在屏幕上看起来没什么问题。

这还涉及时间问题。在大多数文章页和产品页上，屏幕上最大的元素就是一张图片，所以在这个文件到达之前，浏览器无法完成主要内容的绘制。把它缩小会改变整个加载时间的测量结果，而不只是报告里的一行。

先看尺寸，再谈质量

先从像素尺寸下手，因为这里的节省是按几何级数计算的。手机照片的长边通常在 4000 像素左右。把它缩到 1280，保留下来的像素大约只有原来的十分之一，因为宽和高是按同一比例缩减的。没有哪个质量滑块能带来这种量级的缩减。

宽度应该根据您的版式来定，而不是根据文件本身。如果图片放在一个 700 像素宽的栏里，1280 足以从容应对高像素密度的屏幕。发送 4000 像素，等于花钱传输没有人会看到的细节。只有访客可以点开全屏查看的图片才配得上完整分辨率，而即便是这些图片，也很少需要相机拍出的整张原图。

质量滑块在做什么

JPEG 的原理是丢弃人眼不易察觉的细节，质量数值决定了丢弃得有多狠。把它调得足够低，瑕疵就会出现在可以预料的地方：文字或屋顶轮廓这类硬边缘周围的模糊光晕，以及晴朗天空或影棚背景这类平滑渐变里的斑块。纹理丰富的照片能很好地掩盖压缩痕迹，大面积纯色和细小文字则不能。

请按图片将要显示的大小、在它将要放入的版式里判断效果。放大到 300% 去找压缩痕迹，只会说服您保留远高于页面需要的质量，然后白白把多余的体积发布出去。

压缩帮不上忙的情况

有些文件已经没有可压的余地了，再往下压只会损失质量：

• 已经压缩过一次的 JPEG。重新编码会在原有瑕疵之上再叠一层新的瑕疵，而节省的体积通常很小。如果一张照片在网页尺寸下已经只有两三百 KB，就别去动它。
• 以 PNG 保存的照片。压缩器会让 PNG 保持 PNG 格式，通过缩减调色板来缩小体积，这对截图和平面图形很合适，但用在照片上会出现色带。请先把这类照片转换成 JPG 或 WebP，再压缩转换后的文件。
• 图标、logo 和小的界面图形。每个只有几 KB，这不是让您审核不通过的原因。去找页面顶部那张大图吧。

使用本站的压缩器

质量滑块的范围是 10 到 95。对 JPEG 来说，它设置的是编码器的质量。浏览器在写入 PNG 时会忽略这个数值，所以对 PNG 来说，它设置的是保留多少种颜色：范围顶端附近为 256 色，底端为 16 色，透明度会保留。最大尺寸选项提供原始尺寸，或长边 1920、1280、800 像素，按比例缩放，不会拉伸变形。把一个文件夹的图片全部拖进来，一次压缩完，再打包成 ZIP 取回。

有几件事它有意不做。它不会替您把文件压到某个目标大小，所以您需要选一个质量、看看结果、再做调整。对于重新编码的文件，它不保留元数据：图片被解码、绘制到 canvas 上再重新写出，所以相机参数、时间戳和任何 GPS 坐标都会消失。它也不会还给您一个比原文件更大的文件。如果重新编码会让一张本已压缩得很好的图片变大，而您又没有选择更小的尺寸，您拿回的就是原封不动的原始文件。

为什么它在您的浏览器里运行

人们在上线前压缩的图片，往往是不愿交给陌生人的那种：尚未发布的产品图、客户的摄影作品、带有内部数据的截图。这里什么都不会上传。文件从您的磁盘读取，在标签页内解码并重新编码，然后写回您的下载文件夹。压缩时打开开发者工具的“网络”面板，您不会看到任何携带您文件的请求，因为根本没有发出过这样的请求。

什么时候构建步骤才是更好的答案

如果您持续不断地发布图片，这项工作应该放在您的发布流程里，而不是浏览器标签页里。构建插件或图片 CDN 可以为每张图片生成多种宽度和格式，按设备分发合适的版本，而且永远不会忘记去做。每周手动处理一遍撑不了多久，这正是那种人们一个月后就悄悄不再做的活。浏览器工具的合适用途，是您马上要上传的那几个文件，或者审核报告真正点名的那三张大图。