本地图片压缩实战：JPG/PNG/WebP 不上传也能压到极致

我有个习惯，发博客头图之前一定先压一遍。有一次直接把相机直出的 6 MB 头图推上去，结果文章在 4G 网络下要等三四秒才显示，移动端跳出率当天明显高了一截。从那以后，压图这一步我再没省过。下面把我自己常用的判断写下来，重点讲三件事：为什么压图最好在本地做，有损和无损到底差在哪，以及不同格式怎么挑。

为什么压缩要在浏览器里做，而不是传到服务器

大多数在线压图站的流程是：你上传原图，服务器压完再让你下载。问题在于，你上传的那张图往往是产品稿、UI 设计图、证件或者私人照片，为了省几十 KB 就把它交给一个不认识的服务器，并不划算。

本地图片压缩器走的是另一条路：图片用 FileReader 读进来，画到一块离屏 canvas 上，再用 canvas.toBlob() 在你的标签页里重新编码，全程不出浏览器。你可以压缩时打开 DevTools 的 Network 面板看一眼，请求数从头到尾是 0。页面缓存之后断网也能继续压，因为根本不需要联网。

顺带一提，Canvas 重编码会剥掉所有 EXIF 标签，包括 GPS 经纬度、相机型号、拍摄时间。发到网上的场景里这正是你想要的，没人该靠一张狗的照片定位到你家门口。

有损还是无损：先想清楚再选

无损压缩（PNG 走的就是这条路）保证每个像素一字不差，代价是体积下不去，尤其是照片这种色彩连续的图。有损压缩（JPEG、WebP、AVIF）允许丢掉人眼基本察觉不到的细节，换来体积大幅缩小。

判断很简单：照片、截图里有渐变和阴影的部分，用有损；纯色块、文字、图标、需要透明通道的图，用无损或者干脆保留 PNG。一个常见的坑是给照片强行选 PNG 输出，PNG 无损，照片转 PNG 仍然很大，这时候应该换 WebP 或 JPEG。

质量滑块就是有损编码器的感知档位。95 接近视觉无损，但仍能把相机直出 JPEG 砍掉约 25%，因为相机本身编得很冗余。80 是网页甜区，Google PageSpeed 官方建议落在 75 到 85 之间，质量 80 的图和原图并排放着，一般人看不出差别。60 偏激进，缩略图和社交预览图够用。

JPG、PNG、WebP、AVIF 各自的位置

照片优先 JPEG 或 WebP。文字多、纯色多的 UI 截图，留 PNG 用工具重压一次往往比转 JPEG 好，因为 JPEG 会糊掉文字边缘。需要透明背景就只能 PNG 或 WebP。

WebP 是这几年最值得默认的格式。根据 Google 官方数据，在同等画质下 WebP 的有损图比 JPEG 平均小 25% 到 30%，而且 2020 年起每个主流浏览器都支持。AVIF 更省，在 WebP 基础上还能再压 20% 到 30%，目前 Chrome 85+ 和 Firefox 113+ 可以编码，Safari 能解码但还不能用 Canvas 编码。所以我的默认顺序是：网页用 WebP，浏览器支持就上 AVIF，需要无损保留 PNG，要最大兼容性才退回 JPEG。

一张图压缩前后到底差多少

举个我实际跑过的例子。一张相机直出的博客头图，4032×3024，原始 6.1 MB。我切到 WebP，质量 80，把长边从 4032 拉到 1600。工具那一行直接显示：6.1 MB → 380 KB，省 94%。下载推到仓库，文章在 4G 下也能 1 秒内打开，肉眼对比几乎看不出差别。

再看一个反例：一张手工优化过的 PNG 图标，拖进来重压反而变大了。原因是浏览器自带的 PNG 编码器没有 pngcrush、oxipng 那种专用工具聪明，原图已经用了更好的滤波和调色板策略。工具会显示压缩前后的体积差，碰到这种情况保留原图就好，或者直接转 WebP。

平台上传限制和网页加速

很多场景压图不是为了好看，是为了过门槛。家里长辈的邮箱接不住 35 MB 的婚礼照片包，拖十二张进来，质量 80，JPEG，尺寸保留原始，整个相册压完总共 6 MB 左右，老 Outlook 才能正常收附件。Slack、商品店铺、表单上传也都有各自的大小上限。

如果你的目标不是某个质量档，而是必须卡在某个具体体积以内，比如平台规定单图不超过 500 KB，可以用按目标大小压缩图片反向逼近，它会自动调质量直到落进你给的体积区间。这两个工具我经常配着用：日常批量压走本地压缩器，硬性卡体积走目标大小压缩器。

网页加速这块逻辑是一样的。图片往往是页面里最重的资源，把首屏几张图从 MB 级压到 KB 级，LCP 直接受益，移动端尤其明显。我自己的博客把所有正文配图统一过一遍 WebP 质量 80，整站平均加载时间肉眼可见地短了。

压图不是什么高深操作，但它是性价比最高的性能优化之一：几分钟的事，省下的是每个访客的等待时间。

Made by Toolora · Updated 2026-06-13