JPG 转 AVIF 转换器

什么是 JPG 转 AVIF 转换?

JPG 转 AVIF 转换是将图像从 1990 年代的经典格式转换为现代新一代格式的过程,该格式专为最高压缩效率而设计。AVIF(AV1 Image File Format)基于 AV1 视频编解码器,与 JPG 相比可减少 30-50% 的文件大小,同时保持甚至提高视觉质量。

AVIF 格式于 2019 年由开放媒体联盟(Alliance for Open Media,AOM)标准化。该联盟包括最大的技术公司:Google、Apple、Microsoft、Amazon、Netflix、Meta、Mozilla 和 Intel。这种支持确保了该格式的长期发展及其在浏览器、操作系统和软件中的广泛采用。

AVIF 不仅仅是"另一种图像格式"。它是多年视频压缩研究的成果,经过优化适用于静态图像。AV1 编解码器最初是为 4K 和 8K 视频流传输而创建的,这解释了它在处理照片时的卓越效率。

AVIF 和 AV1 编解码器的创建历史

从视频到图像

AV1(AOMedia Video 1)自 2015 年开始开发,作为专有视频编解码器 H.265/HEVC 的开放免费替代方案。目标是创建无需版税的下一代编解码器。

关键里程碑:

• 2015 - 开放媒体联盟成立
• 2018 - AV1 规范定稿
• 2019 - AVIF 图像规范发布
• 2020 - Chrome 成为第一个支持 AVIF 的浏览器
• 2021 - Firefox 添加 AVIF 支持
• 2023 - Safari 获得完整的 AVIF 支持

为什么 AV1 如此高效

AV1 包含 100 多项创新压缩技术:

• 块预测 - 比 JPEG 或 WebP 更灵活
• 超级块 - 自适应图像分割,块大小从 4×4 到 128×128 像素
• 扭曲运动 - 复杂失真补偿
• 胶片颗粒合成 - 以最小的尺寸影响保留胶片颗粒感

这些技术是为视频开发的,但也非常适用于照片。

JPG 和 AVIF 的技术差异

压缩算法比较

JPG(JPEG) 使用 1992 年开发的离散余弦变换(DCT):

• 固定的 8×8 像素块
• 单一预测模式
• 有损压缩,无法无损
• 不支持 Alpha 通道

AVIF 使用 AV1 编解码器的现代技术:

• 自适应块大小从 4×4 到 128×128 像素
• 超过 60 种帧内预测模式
• 支持有损、无损及其组合
• 完整支持 Alpha 通道

详细特性比较

实际尺寸缩减示例

典型照片的转换结果:

同时,AVIF q60 的视觉质量与 JPG q85 相当 - 由于先进的算法,压缩伪影更不明显。

AVIF 格式的优势

卓越的压缩

AVIF 与 JPG 相比可减少 30-50% 的文件大小,同时保持相似的视觉质量。对于大型网站,这意味着:

• 每月节省数 TB 的流量
• 减少服务器和 CDN 的负载
• 降低托管和数据传输成本

支持 HDR 和广色域

AVIF 是第一个广泛支持 HDR 的网页格式:

• 10 位和 12 位色深 - 4096 或 16384 个亮度级别,而不是 JPG 中的 256 个
• 广色域(BT.2020) - 更多色调,尤其是绿色和红色
• PQ 和 HLG - 现代显示器的 HDR 标准

对于 HDR 显示器和现代智能手机的用户,AVIF 照片看起来明显更饱和和逼真。

透明度和图层

与 JPG 不同,AVIF 支持 Alpha 透明通道:

• 半透明效果和阴影
• 背景已移除的图像
• 在任何背景上叠加图形

同时,文件大小仍然小于具有类似透明度的 PNG。

更少的压缩伪影

AV1 算法产生不太明显的伪影:

• 没有块状效果(没有清晰的 8×8 块边界)
• 更好地保留渐变(更少的色带)
• 更准确地传达细节和纹理
• 更自然地处理物体边缘

何时需要 JPG 转 AVIF 转换

网站优化

AVIF 特别适用于:

Hero 图像 - 主页横幅占页面加载的很大一部分。将其大小减少 50% 可显著改善加载时间和 LCP。

在线商店 - 数千张产品卡片照片。每张图像节省 50% 对总数据量至关重要。

画廊和作品集 - 大量高分辨率图像需要最大程度的优化。

新闻门户 - 带有大量插图的文章加载更快,改善用户行为指标。

对 Core Web Vitals 的影响

Google 使用 Core Web Vitals 作为排名因素。AVIF 直接影响这些指标:

LCP(Largest Contentful Paint) - 主要内容的渲染时间。如果最大的元素是图像,将其大小减少 50% 会成比例地加速 LCP。

FID/INP - 交互延迟。需要加载的数据更少 - 主线程释放得更快。

对于图像密集型网站,转向 AVIF 可将 PageSpeed Insights 分数提高 10-20 分。

转换过程:编码工作原理

JPG 转 AVIF 转换阶段

1. JPG 解码 - 解压缩源文件,恢复已存在压缩伪影的像素。

2. 图像分析 - 编码器确定每个区域的最佳块分割和预测模式。

3. 帧内预测 - 为每个块根据相邻像素选择 60 多种预测模式中最好的一种。

4. 变换和量化 - 预测与实际数据之间的差异以给定的质量级别进行变换和量化。

5. 熵编码 - 使用 CABAC 方法压缩结果以最小化文件大小。

6. AVIF 形成 - 数据与元数据一起打包到 HEIF 容器(ISO Base Media File Format)中。

编码速度

由于 AV1 算法的复杂性,AVIF 编码比 WebP 和 JPG 慢。典型编码时间比:

对于一次性转换来说这不是问题,但在处理数千张图像时,AVIF 需要大量计算资源。

AVIF 浏览器兼容性

当前支持(2024)

不支持: Internet Explorer、Safari 16.4 之前的版本、所有浏览器的旧版本。

全球覆盖率

根据 Can I Use 的数据,全球约 85-90% 的浏览器支持 AVIF。

软件支持

AVIF vs WebP:如何选择

直接比较

选择建议

在以下情况下使用 AVIF:

• 最大压缩对项目至关重要
• 您的受众使用现代浏览器
• 需要 HDR 或广色域支持
• 准备实现 WebP/JPG 回退

在以下情况下使用 WebP:

• 最大兼容性很重要
• 需要快速即时生成图像
• 受众包括旧浏览器用户

最佳策略: AVIF -> WebP -> JPG(渐进增强)

在网站上实现 AVIF

带回退的 HTML picture 标签

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" width="800" height="600">
</picture>

浏览器将选择第一个支持的格式。旧浏览器将获得 JPG。

基于 Accept 的服务器端交付

Nginx 或 CDN 可以自动向支持的浏览器提供 AVIF:

Accept: image/avif,image/webp,image/*

Cloudflare、Fastly 和其他 CDN 提供自动转换和最佳格式交付。

质量设置优化

平衡大小和视觉质量的推荐质量值:

• 质量 60-70 - 网页最佳,比 JPG 节省约 50%
• 质量 80-85 - 高质量,节省约 30-40%
• 质量 90+ - 最小损失,但尺寸优势较小

AVIF 格式的限制

编码速度

AVIF 编码比 JPG 慢 10-50 倍。这对以下情况至关重要:

• 即时图像转换服务
• 实时处理用户上传
• 按需生成缩略图

解决方案:离线预转换,缓存结果。

有限支持

约 10-15% 的浏览器不支持 AVIF:

• Safari 旧版本(16.4 之前)
• Internet Explorer(已过时)
• 过时的移动浏览器

解决方案:必须回退到 WebP 或 JPG。

最大图像尺寸

AVIF 规范将尺寸限制为 65535×65535 像素。实际上这不是问题,但对于千兆像素图像应考虑这一点。

软件支持

并非所有程序都支持 AVIF:

• Photoshop 旧版本需要插件
• 许多 Windows 10 查看器无法打开 AVIF
• 某些 CMS 需要额外的模块

随着每次软件更新,情况正在迅速改善。