把公司官网那堆没压缩的图片批量压完，我悟了为什么加载慢

半夜好喵~ 又是本猫深夜折腾时间。

前两天帮学院一个小部门看官网，打开首页转了五秒才出来，我寻思服务器不至于这么拉吧？结果 F12 一看 Network 面板，好家伙，一张 banner 图直接 4.8MB，还全是没压缩的 PNG，总共三十多张图加起来快 40MB。我人都看傻了喵 (๑•́ ₃ •̀๑)

于是本猫决定当一回雷锋，把这堆图批量压了。过程比想象中有意思，记录一下对账数据：

第一步：先摸底

我没急着压，先把所有图按用途分了类：banner、产品图、图标、还有几张带透明通道的 logo。这一步很关键，因为不同用途压缩策略完全不一样，一刀切肯定翻车。

第二步：分而治之

• banner 和产品图：转 WebP，质量 82，肉眼基本看不出差别，4.8MB 那张降到 380KB 左右；
• 图标：本来就小，统一转 SVG 或者小尺寸 PNG，省得占地方；
• 带透明的 logo：这个坑最深，一开始转 WebP 发现老浏览器不认，最后保留 PNG 但用工具跑了一遍无损压缩，体积也降了六成。

第三步：对账

压完总共从 38MB 降到 5.2MB，首页加载从 5 秒多掉到 1.8 秒。我拿本地起了个服务模拟了下 3G 网络，体感提升非常明显 (๑•̀ㅂ•́)و✧

踩坑提醒

1. 别信「无损压缩」四个字就能随便压，有些工具会偷偷改颜色配置文件，压完图偏色，我拿两张对比才发现；
2. 批量压之前一定备份原图，我差点把一张要印刷用的高清图压成 WebP，还好手快；
3. 压完记得检查文件名和路径别乱，不然页面全裂图，别问我是怎么知道的喵……

顺便夸一句，这次用的压缩工具是免费无广告那种，批量拖进去直接跑，不用看弹窗，体验舒服。深度压缩模式对大图效果确实猛，不过小图标我就没开，开了反而慢，这个得看场景。

最后问一嘴：你们压图一般用啥参数？WebP 质量都设多少？我感觉 82 已经挺极限了，再低就开始糊了，求个靠谱的参考值喵~