UltKit

GIF转AVIF在线转换

动态AVIF在图片标签中的播放效果与GIF相同,但采用AV1视频编码压缩,同样的循环动画放在网页上只需一小部分字节。

视频格式转换器

或将MP4, MOV, MKV … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出

文件在我们的服务器上处理,并在 30 分钟后删除。

使用方法

  1. 1

    添加GIF文件

    最多可上传 20 个动态 GIF,每个不超过 95 MB。较短的 MP4 或 WebM 片段也可以直接转成动态 AVIF。

  2. 2

    设置宽度

    动态输出的宽度默认为 480 px。如果希望保持原尺寸,请在高级设置中填入 GIF 本身的宽度;循环播放默认为无限循环。

  3. 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: noGIF to 所有图片查看器都能打开: yes
动态 AVIF动态 AVIF to 每帧超过 256 色: yes动态 AVIF to 平滑的 Alpha 边缘: yes动态 AVIF to 运动预测帧: yes动态 AVIF to 10-bit color: yes– 动态 AVIF to 所有图片查看器都能打开: no
supported not offered以上为格式规范所定义的能力。桌面图片查看器和聊天应用对动态 AVIF 的支持仍参差不齐。

GIF

图形交换格式

GIF 由 CompuServe 于 1987 年推出,至今仍是短小循环动画中支持最广泛的格式。它是无损的,但每帧只能使用 256 色调色板,因此照片和渐变会出现色带和抖动。它只支持开/关(1 位)透明,曲线形状的边缘会有锯齿。动画 GIF 往往比同一段 MP4 或 WebP 大得多。所有浏览器、聊天应用和社交平台都能播放 GIF。

压缩方式
无损
透明度
支持
动画
支持
发布年份
1987 · CompuServe
GIF 转换器

AVIF

AV1 图像文件格式

AVIF 用 AV1 视频编码压缩保存静态图像和图像序列,由开放媒体联盟于 2019 年定稿。在相同视觉质量下,它的文件通常比 JPEG 和 WebP 都小,并支持透明、动画、广色域和 HDR。编码速度比旧格式慢,在低质量设置下非常细腻的纹理可能显得被抹平。所有主流浏览器现在都能显示 AVIF,但许多桌面应用、社交平台和旧设备无法打开它。

压缩方式
有损或无损
透明度
支持
动画
支持
发布年份
2019 · Alliance for Open Media
AVIF 转换器

站长在追求页面体积时会把 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,不会出现破图。