今天看B站动态当中的配图文件格式是 AVIF，瞬间起了兴趣。

然后才发现我的博客这么多图片我一直还在使用 MozJPEG 格式压缩的，虽然 MozJPEG 压缩率已经很高了，但看到更先进的算法不由得还是心动了，于是决定进行一些研究和寻求一些改变。

Squoosh 是 Google chrome labs 推出的，他支持压缩成 AVIF, MozJPEG, BrowserJPEG（就是标准JPEG）, WebP 等格式，我一直用他压缩图片。他是开源的，源码在 https://github.com/GoogleChromeLabs/squoosh 支持这么多压缩算法

squoosh 压缩算法有哪些.webp

Squoosh各种压缩算法对比表

算法名称 核心技术 优势场景 劣势 兼容性
AVIF AV1视频编码 超高压缩率（50%+），支持HDR/广色域 编码速度慢，旧浏览器不支持 需现代浏览器
Browser JPEG 传统JPEG 快速压缩，广泛兼容 压缩率/画质均低于优化算法 全平台兼容
JPEG XL (beta) 新一代JPEG 渐进加载，兼容传统JPEG，超高画质保留 尚处beta阶段，生态未普及 实验性支持
MozJPEG 优化版JPEG 比传统JPEG节省20%-30%体积，兼容性好 无法突破JPEG格式限制 全平台兼容
WebP Google VP8 比JPEG小30%+，支持透明通道 部分旧设备不支持，不支持渐进加载 主流浏览器支持
WebP v2 (unstable) 升级版VP8 比WebP体积更小 不稳定，可能产生画质异常 实验性支持

（注：PNG相关算法未列入主推荐，因PNG格式不适合照片压缩）

我的目标是占用存储空间小（用户访问文章图片加载也会更快），画质能接受不能太差，所以最好的方案是 AVIF，但是兼容性差，图床支持也不行。

最佳选择是这样的 优先级排序：AVIF > WebP > MozJPEG

1️⃣ 首选：AVIF

  • 优势：在 Squoosh 实测中，AVIF 能以 1/3 原图体积（约70%压缩率）保持肉眼难以察觉的画质损失，支持更广色域。
  • 场景：适用于现代浏览器环境（Chrome 85+/Edge 89+），适合博客/电商等需要极致加载速度的网站。
  • 操作建议：压缩时设置 质量等级 65-75，开启 色域保留 选项。

2️⃣ 次选：WebP

  • 优势：体积比原JPEG减少 30-50%，兼容主流浏览器（Chrome/Firefox/Edge），支持透明度。
  • 场景：需要兼顾兼容性与压缩率的场景，如移动端APP、社交媒体图片。
  • 操作建议：设置 质量等级 75-85，勾选 自动滤镜优化。

3️⃣ 保守选择：MozJPEG

  • 优势：完全兼容所有设备，通过智能量化表优化，比原JPEG节省 20-30% 体积。
  • 场景：必须保持.jpg格式的场景（如老CMS系统），或目标用户使用旧设备（IE/老旧安卓机）。
  • 操作建议：设置 质量等级 75-80，开启 渐进加载 提升感知速度。

下面实测我拍的一张南京长江大桥图片，分别使用 AVIF, MozJPEG, WebP 压缩，每种压缩算法均使用 Squoosh 默认压缩选项，来比比看吧

原图 jpg，大小 8.5MB

南京长江大桥原图8.5MB.webp

MozJPEG

mozjpeg压缩率.webp

WebP

webp压缩率.webp

AVIF

avif压缩率.webp

可以看出，MozJPEG -> WebP -> AVIF 压缩率逐步提升，文件体积不断减小，我看了一下画质均在可接受范围内，其中 WebP 我勾选了【Auto adjust filter strength 自动调整滤镜增强】（不会影响压缩率和文件体积，只会影响画质），一个表格来表达

算法名称 压缩率 压缩后文件体积
MozJPEG 88% 1.09MB
WebP 91% 812KB
AVIF 95% 419KB

从表格可以看出 AVIF 压缩率和新文件的文件体积都遥遥领先，这正是未来趋势。不过使用 AVIF 压缩时间很久，电脑风扇也会呼呼转，这也是代价。

我使用的图床是 Lsky Pro，不支持 avif，开源版本目前也不会迭代了，更不会增加新需求。综上，我今后将使用 WebP 作为图床图片的格式，虽然比 MozJPEG 也没有强多少，但是总归是要更好的。