图片压缩，CDN 不是只会搬图，它还会在门口帮你打包瘦身

图片压缩这件事，说白了就一句话：让图片在“看起来差不多”的前提下，占更少字节，传得更快，省钱省流量，很多人以为 CDN 只是把源站图片缓存到离用户近的节点，像快递站把包裹放近一点，其实现代 CDN 还能当“打包师傅”：在边缘节点把图片转格式、调尺寸、降质量、裁切、压缩,再把最合适的版本递给用户。

先讲原理，图片压缩分两大类：无损和有损，无损像把一箱衣服重新叠好，一件不少，只是箱子小一点，PNG、WebP 无损、AVIF 无损属于这类，适合图标、Logo、截图、线框图，但体积下降有限，有损像把不常穿的衣服抽真空，肉眼看着还挺蓬松，实际少占地方，JPEG 最典型：把图切成小块，做数学变换，把人眼不敏感的高频细节丢掉，再量化、编码，色度子采样也是这个思路：人眼对亮度敏感，对颜色细节没那么敏感，于是颜色信息少存一点，亮度多留一点，WebP、AVIF 更聪明，会做块划分、预测、熵编码，同样画质下往往比 JPEG 小不少。

CDN 在这里做什么？它不是简单地“压一次”，用户请求一张图，CDN 边缘节点先看请求头：浏览器支持 WebP 还是 AVIF？屏幕多宽？是否弱网？然后决定给 JPEG、WebP 还是 AVIF，给 800px 还是 1200px，质量 75 还是 85，这可以预先转好，也可以实时转码，缓存时，格式、宽高、质量、裁剪参数都会变成缓存键，这样同一个原图，手机用户拿小图，电脑用户拿大图，老浏览器拿 JPEG，新浏览器拿 AVIF。

应用场景很多，电商商品列表页最典型：一张原图 2MB，列表里要展示 20 张，40MB，手机用户根本扛不住，CDN 可以按卡片宽度输出 400px 的 WebP，平均 40KB，再配懒加载，首屏立刻轻快，新闻门户的封面图、社交 App 头像、小程序 banner、游戏活动图、SaaS 后台截图，都适合边缘压缩，跨境电商还要考虑海外节点，图片从源站跨洋传一次，边缘再分发,压缩能显著省回源带宽和用户等待。

图片压缩，CDN 不是只会搬图，它还会在门口帮你打包瘦身

举个案例，某电商大促前，商品列表页图片平均 1.8MB，首屏加载 4.2 秒，接入 CDN 图片处理：开启 AVIF/WebP 自适应，按容器宽度输出，质量 75，保留 JPEG 回退，热门图预热到边缘，上线后，平均图片体积降到约 180KB，首屏加载 1.6 秒，月带宽成本降了约六成，转化率还有小幅提升，注意，这不是“无脑压到 20KB”的结果，而是格式、尺寸、质量、缓存一起调出来的。

常见误区得纠正，第一，压缩不等于一定糊，合适的质量、合适的尺寸，人眼常常看不出，尤其在手机小屏上，第二，不是所有图都要转 WebP/AVIF，老设备、特殊透明图、动图、印刷素材要留回退或单独策略，第三，CDN 压缩不是一次永久，源图更新要刷新缓存，参数变了会产生新缓存，别以为改了源站就立刻全球生效，第四，源站压好就够了？源图质量太差，边缘再压只会更糟；源图太大，边缘处理压力也大，最好源站保留高质量母图，边缘按需输出，第五，质量越低越快？质量过低会出现色块、文字发虚，用户可能放大看，反而伤体验，第六，只盯质量不调尺寸，很多图体积大，是因为尺寸远超展示区域，把 3000px 图塞进 300px 卡片，压到天荒地老也不如直接输出 600px 实在，第七，忽略 EXIF 方向、ICC 色彩、透明通道，压缩后可能变向、变色、黑底，第八，动图 GIF 直接套 JPEG 压缩会只剩第一帧,要区分处理。

说到底，图片压缩不是“把质量调低”这么简单，而是一套组合拳：选格式、定尺寸、控质量、做裁剪、配缓存、按设备给版本，CDN 的价值，是让这套组合拳在离用户最近的边缘节点自动完成，用户只想要一张“刚刚好”的图：够清晰、够快、不浪费流量，好的图片压缩，就是让图片在用户察觉不到损失的情况下，悄悄变轻，关键词图片压缩，记住这句就够：压的不是画质,是浪费。