网页图片优化工作流：压缩、转格式、改尺寸、裁剪一站搞定

上周运营把一张手机拍的商品图发到群里，4MB，4000×3000。她让我直接挂到详情页首屏。我说这图传上去网页得卡两秒，她不信，打开一看果然首屏白了一阵才蹦出来。CDN 流量当天涨了 800MB，她不吭声了。

手机原图直接丢网页基本都这样。像素够冲印海报，体积够塞满半屏 4G 信号。要让它在网页上又快又好看，光点一下「上传」不够，得顺着一条流水线过四道关：压体积、换格式、调尺寸、裁画面。

四步之间是有依赖关系的，不是随便挑一个做。前一步的产物是后一步的输入：压缩后的图交给格式转换，调过尺寸的图再送去裁。顺序乱了也能跑，但会做无用功。比如先把 4000px 宽的图裁好，再去压缩，等于白白处理了一堆最后要被丢掉的像素。下面按顺序讲每一关在干嘛、为什么不能跳。

先把体积打下来

原图 4MB 是问题的根。LCP 指标里这种大图最容易把首屏拖过 2.5 秒，移动网络下用户已经走了。第一件事是先压一道。

我把那张图丢进在线图片压缩，质量拉到 0.8，输出 WebP，跑完 280KB。肉眼跟原图几乎没区别。Canvas 压缩的 quality 参数 0 到 1，0.7 到 0.85 是性价比最高的区间：再往下画面开始糊，纹理细节糊成一团；再往上文件压不动，白费 CPU。

几个容易踩的点。PNG 再压 PNG 经常反而变大，因为 PNG 本来就是无损，二次编码还要带额外元数据，这种情况改输出 WebP 立竿见影。已经是低质量的小图再压也同理，压不动。所以这步默认就选 WebP 出，不要跟原格式死磕。

这一步产出的还是一张「跟原图一样的图」，只是体积瘦了。后面三步都吃这个产物。

顺手把格式换成 WebP

体积下来之后，格式也顺手定下来。网页场景几乎都该走 WebP：同画质比 JPG 小 25% 到 35%，比 PNG 小更多，现代浏览器全员支持。压缩那一步选 WebP 出，等于把换格式这步一起做了。

但「换格式」这件事本身值得单独拎出来讲，因为有些场景不是压一道就够。比如运营手上还有几张透明背景的 PNG Logo、几张老 JPG 素材，要批量统一成 WebP。这时候用专门的图片格式转换更顺手，一次拖 20 张进去，统一输出。

这里只有一个坑要记牢：透明通道。JPG 不支持透明，PNG Logo 转 JPG 时透明区会被填成背景色（默认白色），看着就像 Logo 被剪了个白底。要保留透明，输出必须选 PNG 或 WebP，这俩支持 Alpha 通道。

关于 WebP、JPG、PNG 三种格式各自适合什么内容、画质和体积怎么取舍，我之前在另一篇里详细对比过表和场景建议，这里不重复。工作流里要记住的就一句：照片类内容默认 WebP，要透明用 PNG 或 WebP，JPG 留给极老环境兜底。

把像素数量砍到网页需要的尺寸

前两步下来，那张商品图体积小了，但像素还是 4000×3000。网页详情页主图容器一般也就 800 到 1000 像素宽，4000 完全是浪费：浏览器缩放显示时还要占内存解码整张大图，移动设备上尤其吃亏。

这一步把尺寸调到容器真正需要的大小。我把它丢进图片尺寸调整，按比例缩到 800×600，输出还是 WebP。结果体积从 280KB 掉到 65KB，因为像素数从 1200 万砍到了 48 万，二十分之一。

调尺寸的关键是锁宽高比。只设一边，另一边自动按原比例算，否则图会被拉伸变形。这条别忘了勾，绝大多数工具默认就锁着，但有时候手贱取消了一次就翻车，圆变椭圆、人脸变宽，肉眼看一眼就知道。

那到底调到多少合适？没有固定答案，看容器。详情页主图位是 800 宽就调到 800，列表缩略图是 200 宽就调到 200，再加 1.5 倍左右留给 retina 屏。设过大浪费流量，设过小在高 DPI 屏上糊。给个起点：手机端展示为主就 800px，PC 端 Banner 才上到 1600px，超过这个范围基本是用不上。

另一个常见误区是「我图小了我把它放大」。放大是把少量像素插值到更多像素，必然模糊，没法无中生有补细节。要大图就找原始高分辨率图，别指望缩放工具给你变清晰。这条也是为什么手机原图上线前要先缩小，但反过来你拿个 200×200 的缩略图想撑大当 Banner，神仙也救不回来。

裁出正确的画面和比例

前三步走完，图已经又小又合适尺寸。最后一步是裁，针对的是构图。

详情页主图容器是 1:1 正方形，原图是 4:3 横构图。直接塞进去要么上下黑边要么两边裁掉不可控。商品图主体还偏右，自动裁很容易把瓶身切一半。

这时候要图片裁剪，选 1:1 比例，拖裁剪框把瓶子框进去，主体居中。文章封面用 16:9，社交分享卡片也 16:9，头像 1:1，竖版海报 9:16。固定比例会约束裁剪框形状，省得自己手算。

裁剪的本质是丢像素，框外的内容不会出现在结果里。所以动手前看一眼主体有没有完整落在框内，特别是文字、Logo 这种一旦切掉就报废的元素。裁剪本身不动画质，如果裁完发糊，多半是导出时 quality 调低了，跟裁这个动作没关系。

一条工作流收尾

回头看那张 4MB 的手机原图经过的四步：压缩砍体积到 280KB，转 WebP 顺手定型，调尺寸到 800×600 掉到 65KB，裁 1:1 适配主图位。最终上线的是一张 50KB 左右、尺寸精确、主体居中的 WebP，首屏秒开，CDN 流量回到正常水位。

四步顺序不是死的。如果原图是透明 PNG，你可能想先转 WebP 再压；如果一张图要做多个尺寸（缩略图 + 大图），尺寸那步要跑多遍。但骨架就是这四件事：体积、格式、尺寸、画面。本地浏览器全部跑完，不上传服务器，原图隐私留在你自己机器上。

把这条工作流存到书签里，下次运营再丢大图过来，按顺序过一遍，比临时打开 Photoshop 快多了。