如何为网页压缩图片而不损失画质

图片通常是网页上最重的东西。一张直接从手机相机出来、未经优化的照片就可能有好几兆字节 —— 比一个网站上所有文字、代码和样式加起来还大。压缩图片是大多数人为页面速度所能做的最见效的改动，做得好则对访客完全隐形。本指南讲解图片压缩如何运作，以及如何在画质没有明显下降的情况下缩小文件。

为什么图片大小重要

每多一个千字节，都是访客的浏览器在显示你的页面之前必须下载的数据。在快速的桌面连接上也许不明显，但在移动网络上它直接拉长加载时间、惹恼用户、损害搜索排名 —— 谷歌把加载速度这类页面体验信号当作排名因素。更小的图片意味着更快的页面、更低的带宽账单和更满意的访客。

有损 vs. 无损压缩

把图片文件变小有两种根本不同的方法。

无损压缩

无损方法在不丢弃任何东西的前提下更高效地打包数据 —— 解压后你得到与原图逐像素相同的副本。它安全，但节省有限，通常 10–50%。PNG 使用无损压缩，所以它非常适合徽标、截图，以及有锐利边缘和纯色的图形。

有损压缩

有损方法丢弃人眼不太会注意到的信息 —— 细微的颜色变化、繁忙区域的细节 —— 以获得大得多的节省，常达 70–90%。JPEG 和 WebP 使用有损压缩。这种取舍由一个 质量（quality） 设置控制：质量越低，文件越小但瑕疵越明显。对照片而言，在合理质量水平下的有损压缩几乎总是正确选择。

选择正确的格式

你挑的格式和压缩程度同样重要：

• JPEG —— 照片的主力。到处广泛支持。压缩不错，但没有透明。
• PNG —— 最适合有锐利线条、文字或透明的图形（徽标、图标、截图）。无损，所以照片会很大。
• WebP —— 一种现代格式，在相同视觉质量下通常比 JPEG 小 25–35%，并像 PNG 一样支持透明。所有当前浏览器都支持。对如今大多数网页图片来说，WebP 是最好的默认选择。
• SVG —— 根本不是压缩的照片格式，但对简单的徽标和图标，矢量 SVG 在任何尺寸下都保持锋利清晰，而且往往只有几千字节。

你能牺牲多少画质？

对有损格式，质量通常用 0–100 的刻度表示。与直觉相反，这个范围的顶端是浪费：质量 100 和质量 80 的差别往往看不出来，而质量 80 可能只有一半的文件大小。一个实用的起点：

• 质量 75–85 —— 大多数网页照片的甜点区。大幅节省，正常观看无可见损失。
• 质量 60–75 —— 对不那么在意绝对锐利度的大背景图或缩略图足够。
• 低于 60 —— 节省趋于平缓，而瑕疵（块状的天空、边缘光晕）开始明显。通常不值得。

最好的办法是比较，而不是猜。以某个质量压缩，在它实际显示的尺寸下看结果，一档一档降低质量，直到你刚好开始看到差别 —— 然后往回升一档。

先缩放，再压缩

如果图片远大于所需，压缩能做的也有限。一张 4000 像素宽的照片显示在 800 像素宽的栏里，携带的像素是任何人所能看到的五倍。把图片缩放到它显示的大致尺寸 —— 再压缩 —— 往往是所有节省中最大的一笔。我们的 图片缩放工具 一次搞定裁剪、旋转和缩放，全程在你的浏览器中。

一个简单的流程

1. 把图片缩放到它将显示的最大尺寸。
2. 能用就选 WebP，追求最大兼容性用 JPEG，带透明的图形用 PNG。
3. 以质量 ~80 压缩，并在显示尺寸下查看结果。
4. 把质量往下调到你注意到差别为止，再往回升一档。

最后三步用我们的 图片压缩工具 几秒就能完成：放入一张或多张，它们就在你自己的设备上即时压缩 —— 什么都不上传到服务器，因此对私密照片很安全。比较前后的大小，满意了就下载。