Jpegli 简介:Google 开源的新一代 JPEG 编码库

互联网改变了我们的生活、工作和交流方式。然而,当页面加载缓慢时,它可能会变成令人沮丧的根源。这个问题的核心在于图像的编码。

为了改进这一点,Google 推出了 Jpegli,这是一种先进的 JPEG 编码库,它保持了高度的向后兼容性,同时提供增强的功能,并在高质量压缩设置下将压缩比提高了 35%。

Jpegli 是一个新的 JPEG 编码库,其设计比传统 JPEG 更快、更高效、更美观。它使用了许多新技术来实现这些目标,包括:

  • 它提供了完全可互操作的编码器和解码器,符合原始 JPEG 标准及其最传统的 8 位形式,以及与 libjpeg-turbo 和 MozJPEG 的 API/ABI 兼容性。
  • 高质量:当通过 Jpegli 压缩或解压缩图像时,会执行更精确且心理视觉上有效的计算,并且图像将看起来更清晰并且可观察到的伪影更少。
  • 速度快:在提高图像质量/压缩密度比的同时,Jpegli 的编码速度与 libjpeg-turbo 和 MozJPEG 等传统方法相当。这意味着 Web 开发人员可以轻松地将 Jpegli 集成到他们现有的工作流程中,而无需牺牲编码速度性能或内存使用。
  • 10+ 位:Jpegli 每个组件可以使用 10+ 位进行编码。传统的 JPEG 编码解决方案仅提供每个组件 8 位动态,导致缓慢梯度中出现可见的条带伪影。Jpegli 的 10+ 位编码以原始 8 位形式进行,生成的图像可与 8 位查看器完全互操作。10+ 位动态可作为 API 扩展使用,需要更改应用程序代码才能从中受益。
  • 更密集:Jpegli 比传统 JPEG 编解码器更有效地压缩图像,可以节省带宽和存储空间,并加快网页速度。

Jpegli 工作原理

Jpegli 的工作原理是使用许多新技术来降低噪声并提高图像质量;主要是来自 JPEG XL 参考实现的自适应量化启发式、改进的量化矩阵选择、精确计算中间结果,并有可能使用更高级的色彩空间。所有新方法都经过精心设计,以使用传统的 8 位 JPEG 形式,因此新压缩的图像与现有的 JPEG 查看器(例如浏览器、图像处理软件等)兼容。

自适应量化启发法

Jpegli 使用自适应量化来降低噪声并提高图像质量。这是通过基于心理视觉建模对量化死区进行空间调制来完成的。使用我们最初为 JPEG XL 开发的自适应量化启发式方法,可以提高图像质量并减小文件大小。这些启发式方法比 guetzli 中最初使用的类似方法要快得多。

改进的量化矩阵选择

Jpegli 还使用一组量化矩阵,这些矩阵是通过优化心理视觉质量指标的组合而选择的。 Jpegli 中的精确中间结果可提高图像质量,并且编码和解码都会产生更高质量的结果。 Jpegli 可以使用 JPEG XL 的 XYB 色彩空间来进一步提高质量和密度。

测试 Jpegli

为了量化 Jpegli 的图像质量改进,我们在众包评估者的帮助下比较了 Cloudinary 图像数据集 '22 中的图像对,这些图像使用三种编解码器进行编码:Jpegli、libjpeg-turbo 和 MozJPEG,并以多种比特率进行编码。

在此测试中,我们仅限于比较编码,解码始终使用 libjpeg-turbo 执行。我们在禁用 XYB ICC 颜色配置文件的情况下进行了研究,因为我们预计大多数用户最初会使用 Jpegli。为了简化跨编解码器和设置的结果比较,我们使用国际象棋排名启发 ELO 评分来汇总所有评估者决策。

ELO 分数越高,表明评估者研究中的总体表现越好。我们可以观察到,2.8 BPP 的 jpegli 获得的 ELO 评级高于 3.7 BPP 的 libjpeg-turbo,比特率比 Jpegli 高 32%。

测试结果表明,Jpegli 可以比传统 JPEG 编解码器多压缩 35% 的高质量图像。

相关推荐
swipe7 分钟前
纯函数、柯里化与函数组合:从原理到源码,构建更可维护的前端代码体系
前端·javascript·面试
远山枫谷7 分钟前
uniapp + Vue 自定义组件封装:自定义样式从入门到实战
前端·vue.js
Lee川11 分钟前
JavaScript 中的 `this` 与变量查找:一场关于“身份”与“作用域”的深度博弈
前端·javascript·面试
Kakarotto3 小时前
Canvas 直线点击事件处理优化
javascript·vue.js·canvas
顺遂3 小时前
基于Rokid CXR-M SDK的引导式作业辅导系统设计与实现
前端
代码搬运媛3 小时前
Generator 迭代器协议 & co 库底层原理+实战
前端
前端拿破轮3 小时前
从0到1搭建个人网站(三):用 Cloudflare R2 + PicGo 搭建高速图床
前端·后端·面试
功能啥都不会3 小时前
PM2 使用指南 - 踩坑记录
前端
HelloReader3 小时前
React 中 useState、useEffect、useRef 的区别与使用场景详解,终于有人讲明白了
前端
兆子龙3 小时前
CSS 里的「if」:@media、@supports 与即将到来的 @when/@else
前端