WebP / JPEG / PNG / AVIF 怎么选?附压缩实践

2 阅读3分钟

压完比原图还大?多半是格式选错了。这篇文章按场景给一个可执行的选择顺序,并对应到本地压缩工具的用法。

发博客、做落地页、发小红书之前,配图格式选错,常见两种结局:要么体积虚高拖慢首屏,要么「压缩后比原图更大」。这篇文章按场景给一个可执行的选择顺序,并对应到 LeoBin 图片压缩(leobin.cn/tools/compr… 的用法。

先分清:有没有透明、动不动画

四种格式怎么记

JPEG

兼容性最好,几乎处处能开。适合「对方系统老、渠道杂」的交付。缺点是有损,且不支持透明。网页照片仍很常用。

PNG

无损、可透明,适合 UI 切图、图标。照片用 PNG 往往体积爆炸。若你看到「转成 PNG 反而更大」,多半是原图已是高度压缩的 JPEG。

WebP

目前网页配图的「综合优等生」:同观感下通常比 JPEG 更小,也支持透明。现代浏览器支持良好。做个人站、作品集、多数内容平台上传前预处理,我会默认先试 WebP。

AVIF

压缩比往往更激进,但编码更重、旧设备兼容不如 WebP。适合自己站且确认受众浏览器较新;对外投递前仍建议留一份 JPEG/WebP 兜底。LeoBin 里 AVIF 出口在 VIP 能力中——因为编码成本更高。

质量参数怎么拧

没有万能数字,但有实用区间:

· 社交媒体 / 信息流:质量约 75–85,肉眼难辨,体积下降明显。 · 作品集主图、印刷相关:90 以上更稳妥,并控制最长边。 · 缩略图、列表预览:可试 60–70,再人工看一遍是否发糊。

建议:先拿一张典型图,导出两三个质量档并排对比,再批量。不要一上来全站 100 张盲压。

「压完更大」怎么办

常见原因:

  1. 原图已是高效压缩,你却转成更低效格式(如 JPEG → PNG);
  2. 质量设太高,编码器几乎没空间可省;
  3. 分辨率没有缩小,只改了容器。

对策:优先 WebP;适当降质量;对超大边长做「最长边限制」(小红书、公众号都有事实上的尺寸习惯)。

和本站工具的对应关系

在 图片压缩(leobin.cn/tools/compr… 里:

  1. 拖入多张图;
  2. 选 WebP(通用)或 JPEG(兼容优先);
  3. 质量先 80,需要再微调;
  4. 需要平台尺寸时打开最长边限制;
  5. 单张对比满意后再「全部下载」。

全程浏览器本地处理,未发布的截图不必先经过第三方上传站。

小结

默认路径可以记成:照片 → WebP(兼容不够再 JPEG);要透明 → PNG/WebP;追极限体积且环境新 → AVIF。格式是手段,目标是「看得清 + 传得快 + 隐私可控」。


原文与更多工具:leobin.cn/blog/webp-v… 本地优先工具箱:leobin.cn (浏览器打开即可用,文件默认不上传)