图片上线前必做的三件事：压体积、换格式、定尺寸

上个月帮朋友看他的摄影博客，首页加载要七秒多。我打开 Network 面板一看，五张配图加起来 14 MB——全是相机直出的 JPEG，一张 3 MB 起步，而展示区只有 800 像素宽。

图片是网页上最容易优化、也最常被忽略的部分。这个站我自己也踩过同样的坑，后来固定下来三个步骤，做完通常能去掉七八成体积。

第一步：先把尺寸砍到实际需要的大小

这是最有效的一步，但很多人是跳过它直接去压质量的——顺序反了。

道理很直白：一张 4000×3000 的照片在 800 像素宽的容器里显示，多出来的 1120 万像素全是浪费。先把尺寸降到实际显示尺寸的两倍（考虑高分屏，800 宽的容器用 1600 宽的图片就够了），体积立刻掉到原来的六分之一，而且完全不损失观感，因为你本来就看不出那些像素。

用 图片尺寸调整 的时候有个细节：勾上“锁定原图比例”，然后只填宽度，高度会自动算出来。不锁比例的话人像会变扁，风景会变高，这种错误上线了很难被发现。

一个常见的误判是“我以后可能会用到大图，先传原图”。别这么干。需要大图的时候单独出一个下载链接，别让每个访客都为你的未来需求买单。

第二步：选对格式，比调质量管用

三种格式的取舍我整理成了这张表：

格式	透明	有损	同等画质体积	适合什么
PNG	支持	无损	最大	截图、图标、需要锐利边缘的图
JPEG	不支持	有损	中等	照片
WebP	支持	可选	最小	几乎全部场景

WebP 在同等画质下通常比 JPEG 小 25% 到 35%，而且支持透明通道——这意味着它没有 JPEG 的那个致命短板。唯一的顾虑是老浏览器兼容性，但 2026 年了，这事基本不用再纠结。

有个坑值得单独说：把带透明的 PNG 转成 JPEG，透明区域会变成黑色。因为 JPEG 格式根本没有 alpha 通道，转换时那些像素没地方放。所以转 JPEG 之前先垫一层白底，否则你的 logo 会变成一块黑方块。

图片格式转换 里我把填充色做成了可选项，默认白色，就是为了避免这个坑。

第三步：压质量，找那个“看不出来”的临界点

前两步做完，体积已经很小了。这一步是锦上添花，但做过了会毁图。

我的经验值是 75 到 85 之间。低于 70，天空的渐变会出现色带，文字边缘开始发糊；高于 90，体积涨得很快但肉眼分辨不出区别。

关键在于不要凭数字判断，要凭对比。好的做法是把原图和压缩后的图并排放，来回切换几次，找到你第一次看不出差别的那个数值。因为压缩算法对不同图片的容忍度不一样——纯色背景的截图能压到 60 都没事，细节丰富的照片 80 就开始糊了。

图片压缩 会实时算出压缩后的体积和节省比例，你可以拖着滑块看数字跳动，找到一个体积和画质的平衡点就停手。

顺手做的两件小事

加水印。 如果是发给第三方看的报价单、证件截图，用 图片水印 加一层斜向平铺的水印。单个角标太容易被裁掉了，满屏平铺才有意义。当然要清醒：可见水印只能提高盗用成本，挡不住专业去水印工具。

看看主色。 做专题页的时候想知道配图的主色调，用 图片信息查看 抽一下主色，能快速定出配套的强调色。它是抽样统计，不是精确分析，但找配色的灵感够用了。

为什么这些操作我都在浏览器里做

你可能注意到了，我提到的几个工具都强调“本地处理”。这不是营销话术，是两个很实际的理由：

一是速度。上传 3 MB 的原图、等服务器处理、再下载回来，来回可能要十几秒。本地用 canvas 处理是毫秒级的，拖滑块能实时看结果——这个实时反馈对“找临界点”这件事是决定性的。

二是隐私。身份证照片、合同截图、还没公开的产品图，这些东西传给一个在线服务，你根本不知道它会不会留存。本地处理意味着数据一步都没离开设备，把网断掉照样能用。

检查一下你的站

如果你想知道自己的站有没有这个问题，打开 DevTools 的 Network 面板，按资源大小排个序。要是排在最前面的几张图都超过 500 KB，而它们在页面上的显示宽度不到 1000 像素，那这篇文章说的问题你全中了。

三步走完，14 MB 变 1.8 MB，首页从七秒降到两秒以内。代价是不到五分钟的操作时间。