GIF转AVIF在线转换
动态AVIF在图片标签中的播放效果与GIF相同,但采用AV1视频编码压缩,同样的循环动画放在网页上只需一小部分字节。
视频格式转换器
或将MP4, MOV, MKV … 文件拖放到此处 ·
单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除
文件在我们的服务器上处理,并在 30 分钟后删除。
数值越低,画质越好,文件越大。18 与源文件看起来几乎一样,23 为默认值,28 及以上会出现明显的模糊。
每秒帧数。除非平台有特定要求,否则保持源帧率;GIF 使用 15–20 fps 就足够了。
仅用于 PowerPoint 文件和单张静态图片:每张幻灯片或图片在画面上停留的时长。
“自动”会为 MP4/MOV 使用 AAC,为 WebM 使用 Opus。若新格式支持,“复制原音频”会原样保留原始声音。
192 kbps 对音乐来说已听不出差别;128 kbps 足够用于语音。
动画的宽度(像素),高度按宽高比自动计算。480 px 适合聊天;720 px 或更大可得到高画质 GIF,但文件会大很多。
GIF 最多支持 256 种颜色。颜色越少文件越小,但渐变和肤色处会出现色带。
用细密的图案混合调色板中的颜色,以掩盖色带。Sierra 效果最平滑;“无”得到的文件最小。
动画是无限循环,还是只播放一次后停止。
可选。填写秒数(如 75)或分:秒(1:15)。留空则从开头开始。
可选。格式与开始时间相同。留空则保留到结尾。
转换后的文件将等于或略小于此大小。
使用方法
- 1
添加GIF文件
最多可上传 20 个动态 GIF,每个不超过 95 MB。较短的 MP4 或 WebM 片段也可以直接转成动态 AVIF。
- 2
设置宽度
动态输出的宽度默认为 480 px。如果希望保持原尺寸,请在高级设置中填入 GIF 本身的宽度;循环播放默认为无限循环。
- 3
转换为AVIF
点击转换为 AVIF,然后下载 .avif 文件,即可直接用于网站的 picture 元素中。
为什么网站要把GIF转换为AVIF
GIF 把每一帧都存成独立的 256 色图像。几秒钟的产品演示或录屏操作演示就可能有好几 MB,在落地页上,这一张图往往比所有代码加起来还大。Google 的 Lighthouse 审核里有一项专门针对这类文件的检查:“对动画内容使用视频格式”。
AVIF 由开放媒体联盟于 2019 年定稿,是基于 AV1 视频编码、封装在 HEIF 容器中的静态图片格式。动态 AVIF 就是 AV1 图像序列:后面的帧由前面的帧预测得到,与视频文件完全一样,所以只有帧与帧之间的变化才占用数据量。
GIF与动态AVIF对比:新格式带来了什么
| from ↓ · to → | 每帧超过 256 色 | 平滑的 Alpha 边缘 | 运动预测帧 | 10-bit color | 所有图片查看器都能打开 |
|---|---|---|---|---|---|
| GIF | – GIF to 每帧超过 256 色: no | – GIF to 平滑的 Alpha 边缘: no | – GIF to 运动预测帧: no | – GIF to 10-bit color: no | GIF to 所有图片查看器都能打开: yes |
| 动态 AVIF | 动态 AVIF to 每帧超过 256 色: yes | 动态 AVIF to 平滑的 Alpha 边缘: yes | 动态 AVIF to 运动预测帧: yes | 动态 AVIF to 10-bit color: yes | – 动态 AVIF to 所有图片查看器都能打开: no |
GIF
图形交换格式
GIF 由 CompuServe 于 1987 年推出,至今仍是短小循环动画中支持最广泛的格式。它是无损的,但每帧只能使用 256 色调色板,因此照片和渐变会出现色带和抖动。它只支持开/关(1 位)透明,曲线形状的边缘会有锯齿。动画 GIF 往往比同一段 MP4 或 WebP 大得多。所有浏览器、聊天应用和社交平台都能播放 GIF。
- 压缩方式
- 无损
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 1987 · CompuServe
AVIF
AV1 图像文件格式
AVIF 用 AV1 视频编码压缩保存静态图像和图像序列,由开放媒体联盟于 2019 年定稿。在相同视觉质量下,它的文件通常比 JPEG 和 WebP 都小,并支持透明、动画、广色域和 HDR。编码速度比旧格式慢,在低质量设置下非常细腻的纹理可能显得被抹平。所有主流浏览器现在都能显示 AVIF,但许多桌面应用、社交平台和旧设备无法打开它。
- 压缩方式
- 有损或无损
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 2019 · Alliance for Open Media
站长在追求页面体积时会把 GIF 转成 AVIF:首屏循环动画、产品演示和界面操作演示仍然保持 img 标签自动播放的效果,文件体积大幅下降,256 色造成的色带也会消失。
什么情况下适合用动态AVIF替代GIF
适合使用 AVIF 的场景
- 自己网站上的首屏和功能展示循环动画
- 带渐变和阴影的产品界面演示
- 以加载时间和 Core Web Vitals 评分的页面
- 需要柔和透明边缘的动画
适合保留 GIF 的场景
- 邮件通讯和邮件签名
- 只预览 GIF 的论坛和聊天应用
- 上传到较旧的 CMS 系统
- 之后还要编辑帧的接收方
提供动态AVIF并设置备用格式
当前版本的 Chrome、Edge、Firefox 和 Safari 都能播放动态 AVIF;Firefox 是最后加入动画支持的,从 113 版开始。把它放在 picture 元素中,并以 GIF 作为回退,不需要额外成本,还能照顾旧版浏览器。AVIF 编码比生成 GIF 慢,因此较长的片段转换时间会明显比转成 WebP 更久。
如果这段循环动画是要发到聊天应用而不是自己的网站,视频文件更稳妥:GIF转MP4的结果在各处都能播放。AVIF、HEIC 与 WebP 详解详细对比了这三种新一代图片格式。
GIF转AVIF常见问题
动态AVIF会像GIF一样循环播放吗?
可以。循环播放选项默认设为无限循环,浏览器在 img 标签中会像播放 GIF 一样重复播放 AVIF 图像序列,没有控件,也没有声音。如果是片头动画,希望停在最后一帧,请选择播放一次。
为什么我的AVIF只显示第一帧?
说明该查看器支持静态 AVIF,但不支持 AVIF 图像序列。较旧的图片查看器,以及 2023 年发布的 113 之前的 Firefox 版本都是这样。请用最新版 Chrome、Edge、Firefox 或 Safari 打开文件来检查动画。
AVIF会保留GIF的透明背景吗?
AVIF 格式支持完整的 Alpha 通道,透明效果远好于 GIF 只有“透明或不透明”的像素。发布前请在彩色或棋盘格背景上检查结果,因为原 GIF 中预先合成进去的底色仍然会显示出来。
可以把动态AVIF上传到WordPress吗?
2024 年发布的 WordPress 6.5 在媒体库中加入了对 AVIF 的支持,前提是服务器的图像库也支持。较旧的安装会拒绝上传,这时可以继续使用 GIF,或改用 GIF转WebP,WordPress 从 5.8 起就支持 WebP。
如何显示AVIF并以GIF作为备用?
把两者放进同一个 picture 元素:先用 type 为 image/avif 的 source 标签指向 AVIF,再用 img 标签指向 GIF。支持 AVIF 解码的浏览器会加载体积小的文件,其他浏览器则回退到 GIF,不会出现破图。