网页截图压缩实测：6 张界面图在 JPEG、WebP、PNG 下的体积与画质

截图放进文档、工单和博客时，体积常常大得离谱。我拿站内 6 张真实界面截图做了一轮重编码测试，记录每种格式在不同质量下的体积与 PSNR，给出可以直接照做的选择。

为什么单独测截图

照片压缩的经验放到截图上经常失效。截图有大面积纯色、细小的文字和锐利的边框，这些内容对色度抽样与块压缩特别敏感。照片里看不出来的损失，放到文字上就是一圈彩色噪点和发虚的笔画。

站内图片工具每天要处理不少截图，用户最常问的两个问题是「压到多少才够」和「为什么压完字变糊了」。与其给经验值，不如把 6 张图跑一遍，用数字回答。

测试方法

样本是 6 张 1440×900 的页面截图，另加 1 张 390×844 的手机截图。覆盖首页、表单工具、游戏页、长文页、深色界面与移动端。原始文件由 Chrome 截取为 PNG。

把每张 PNG 画进画布，分别用浏览器内置编码器导出 JPEG、WebP 与无损 WebP，质量取 0.85、0.70、0.55 三档。再把导出的文件解码回画布，与原始像素逐点比较，用 PSNR 衡量差异。

PSNR 的单位是分贝，数值越高越接近原图。40 分贝以上肉眼几乎看不出差别，35 到 40 之间细看能看到轻微损失，低于 33 分贝在文字与边缘上通常已经可辨。

测试只用了 Chrome 的编码器，没有覆盖 Firefox、Safari 与各家的命令行工具。不同编码器的体积会差百分之十到二十，结论方向一致，具体数字会有出入。

总表：同样的图，三种格式差多少

下表是 6 张样本的合计数据。WebP 与 JPEG 都取质量 0.70，PSNR 列出最低与最高值。

同样标称 0.70，WebP 比 JPEG 再小 40.4%，画质还高 2 到 3 分贝。这个结果在 6 张样本上一致，没有例外。

发现一：WebP 在界面截图上全面胜出

六组对比里 WebP 的体积都是 JPEG 的 50% 到 69%。差距最大的是游戏页，JPEG 47.3 KB，WebP 23.6 KB，少了一半还多，PSNR 反而从 40.0 升到 42.4。

原因在编码方式。WebP 的帧内预测会参考左侧与上方的像素，纯色块和重复的边框能压得很狠。截图的界面元素重复度高，正好落在它的强项上。

兼容性也不再是问题。主流浏览器从 2020 年起都支持 WebP，常见文档工具与聊天软件都能正常显示。只有少数老旧系统与打印流程还只认 JPEG。

发现二：JPEG 的损失集中在文字边缘

JPEG 把图像切成 8×8 的块做离散余弦变换。文字边缘正好是高频率信息，块与块之间容易出现振铃。PSNR 只统计整体误差，文字局部的影响会被大面积纯色稀释。

把质量压到 0.55，长文页的 JPEG 只剩 101.8 KB，PSNR 掉到 32.9。整体还看得过去，放大到正文区域，笔画周围会出现彩色毛边，小字号尤其明显。

WebP 在 0.55 时同样有损失，但 PSNR 仍有 38.2，字形保持得更完整。需要极限压缩时，WebP 的下降曲线更平缓。

发现三：PNG 不一定最大，无损 WebP 也不一定最小

很多人以为 PNG 一定比有损格式大，这句话只在照片上成立。这 6 张截图里 PNG 合计 737.9 KB，确实比 JPEG 与 WebP 都大。单看手机截图只有 51.9 KB，与 WebP 的 16.8 KB 相比量级并不夸张。

更有意思的是无损 WebP。把质量设成 1.0，编码器输出像素级无损的文件。6 张里每一张都比 PNG 大：首页 239.8 KB 对 138.3 KB，长文页 316.7 KB 对 238.5 KB。

这说明「无损 WebP 一定比 PNG 小」是流传很广的误解。无损压缩的胜负取决于编码器实现与图像内容，纯色多、颜色数少的截图正好是 PNG 调色板与过滤器的舒适区。要无损，先两种都试，别默认。

质量档怎么选：70 是甜点，55 是下限

以长文页为例，三档质量的体积与画质如下。

日常用 0.70 就够。要发到群里或贴进工单，0.55 的 WebP 还能再省一点，但别用 JPEG 0.55 存正文截图。低于 0.5 之后，两种格式的文字都会明显发糊，省下的几十 KB 不值得。

先缩放，再压缩

体积和像素数几乎成正比。把 1440 宽的截图缩到 720 宽，像素少四分之三，再压到 0.70，文件往往只剩原来的两成。这一步的收益通常比调质量参数大得多。

缩到多宽取决于用途。博客正文按显示宽度的两倍导出，普通屏与高分屏都清楚。工单与聊天窗口按一倍到一点五倍即可。需要打印的材料才保留原尺寸，并考虑 300 DPI。

站内的目标体积压缩可以指定一个 KB 上限，自动在质量与尺寸之间找平衡，适合报名系统、邮件附件这类有硬性限制的场景。只想转格式时用图片格式转换，它会保留原始尺寸，压缩与否由质量参数决定。

这套数据的边界

样本只有 6 张，全部是界面截图，没有覆盖照片、插画与带渐变的海报。照片上 JPEG 与 WebP 的差距会缩小，部分场景 JPEG 反而更稳，选型时别直接套用本文结论。

PSNR 是整体指标，不衡量文字可读性，也不反映色带与局部模糊。判断压缩是否过头，最可靠的办法仍是放大到 100% 看文字与细线。

编码器差异同样存在。本文用 Chrome 的画布编码，同样的质量参数换成别的工具，体积可能差一截。比较不同工具时，固定质量参数与图像内容，才有意义。关于格式本身的取舍，可以看图片格式与压缩入门。

结论

界面截图优先用 WebP，质量 0.70，需要更小再降到 0.55。要兼容老旧流程时退回 JPEG 0.70，并接受文字边缘的轻微损失。需要无损时 PNG 与无损 WebP 各试一次，别默认谁更小。

顺序上永远是先缩放再压缩。把宽度降到实际需要的两倍，质量保持 0.70，大多数截图都能落在 100 KB 以内，文档与网页都不会被拖慢。