前两天帮朋友看一个落地页，他把一张 5MB 的实拍图直接拖进页面，还说"反正现在网速快"。我切成手机流量模式一看，首屏光这张图就卡了好几秒。把图压到 200KB 之后，肉眼几乎看不出差别，加载速度却快了一个量级。图片压缩这事，大部分人要么完全不做，要么一压就糊，问题就出在没搞懂三种格式的区别。

先分清：有损和无损

有损压缩是主动丢掉一些人眼不易察觉的细节（比如天空渐变里相近的颜色）来换体积，JPG 和 WebP 属于这一类。质量参数越低，丢得越多、文件越小，压过头就糊。无损压缩是把数据压缩后还能 100% 还原，一个像素都不丢，PNG 属于这一类。无损图放大多少倍都清晰，代价是体积明显更大。

所以"压缩会不会变糊"没有绝对答案：选对格式、用对参数，照片压到原来的五分之一照样清晰；用错参数，压 30% 就能看到色块和锯齿。

JPG、PNG、WebP，一张表看懂

格式压缩方式支持透明体积适合场景
JPG有损否小照片、实拍图、文章配图
PNG无损是大图标、LOGO、截图、透明图
WebP有损/无损是最小网页图片、头像、产品图
同一张照片用 JPG、PNG、WebP 保存的体积对比柱状图，WebP 最小
图：同一张照片，相同画质下 WebP 约比 JPG 小 40%，PNG 因为无损保真体积最大——图片内容不同比例会有差异，但趋势一致

什么场景该选哪个

照片、风景、实拍图用 JPG 或 WebP，别用 PNG，一张手机照片压成 PNG 可能十几 MB。图标、LOGO、带透明背景的图用 PNG 或 WebP，JPG 不支持透明，四周会填成白色块。网页或小程序里的图 WebP 优先，体积最小加载最快。截图用 PNG（文字边缘锐利、无损更清晰），体积大就再转 WebP。

怎么压不糊，直接动手压一张

打开在线图片压缩，把图拖进去，边调质量边看压缩前后对比和体积变化，压到你觉得"看不出来差别"的那个质量档就对了；要换格式（比如 PNG 转 JPG）用图片格式转换；想把图片转成网页可用的代码，用图片转Base64。

质量参数调多少，给个直觉

拿 JPG 举例，质量 80 左右是"看不出差别"和"体积小"的平衡点，大多数照片压到 80 画质几乎无损；60 能明显减重，细看边缘有轻微压缩痕迹；40 以下就开始糊了，除非是缩略图否则不建议。WebP 的话质量 75-85 通常就很稳。记住一个原则：先缩尺寸再压质量——一张图先缩到实际展示宽度，体积能掉一个量级。

几个常见误区

改个后缀名不算压缩，把 .png 改成 .jpg 只是骗自己，文件内容一点没变，压缩必须重新编码。PNG 也不一定比 JPG 清晰，清晰度看的是压缩方式和参数，不是格式，JPG 用高质量压出来的照片肉眼和 PNG 没区别，体积却小得多。压过的图可以再压，但每压一次都再损失一点质量，反复压越来越糊，最好保留原图，需要时从原图重新压。

最后补一个常被忽略的：图片尺寸该设多大。现在很多手机屏是 2 倍、3 倍像素密度，一张要在页面上显示 400px 宽的图，导出成 800px 宽（2x）就够清晰，没必要上来就是 4000px 的原图。做的时候先问清楚这张图在页面上实际显示多大，按 1.5 到 2 倍导出，再配合压缩，体积能比直接传原图小十倍以上，清晰度却几乎没差别。

站里的图片压缩、图片格式转换都全程在浏览器本地处理，图片不上传服务器——敏感的设计稿、证件照、素材图压起来没心理负担，也不用装软件。图片压缩不是玄学：选对格式、缩好尺寸、调对质量，三步下来体积能省 80% 以上，画质还几乎无损。