点击或拖放 GIF 动图到这里
仅支持 .gif 格式，建议文件大小在 20MB 以内
GIF 预览
背景色：
上传 GIF 后在此预览
--:-- / --:--
视频输出
转换完成后在此预览
0%
正在生成 WebM…
完成后可立即下载，或继续导出 MP4
—
—
使用步骤
1
上传 GIF点击或拖放 .gif 文件，自动解析帧数、时长等元信息
2
设置背景色GIF 面板顶部选背景色；默认透明（棋盘格），导出时同步生效
3
调整参数设置速度、码率、循环次数与缩放尺寸
4
开始转换点击"开始转换"，在浏览器内生成 WebM 视频，进度实时显示
5
下载 WebM转换完成即可下载，默认保留透明通道，适合网页嵌入
6
导出 MP4（可选）点击"导出 MP4"调用 FFmpeg 转码，适合平台发布；注意 MP4 不支持透明
格式与透明通道说明
🟣 WebM / VP9（默认输出）
- Chrome / Firefox / Edge 均可直接播放
- 支持透明通道（Alpha）：适合网页叠加、UI 动效
- 同等画质下文件体积比 MP4 更小
- 在 HTML 中用
autoplay muted loop playsinline实现无缝循环
🟠 MP4 / H.264（FFmpeg 转码）
- 兼容性最广：微信、抖音、iOS、安卓均支持
- 不支持透明通道：透明区域以背景色填充
- 首次导出需加载 FFmpeg 核心（约 25MB）
- 同会话内二次导出无需重复加载
🎨 GIF 背景色（透明区域填充）
- 默认透明：预览显示棋盘格，WebM 输出保留 Alpha
- 选择纯色：预览背景变色，导出时以该颜色填充透明像素
- 快捷色板提供透明 / 白 / 黑 / 浅灰，或点击色块自定义
- 背景色设置不影响 GIF 本身，仅影响透明区域渲染方式
⚠️ 透明通道注意事项
- "保留透明"仅在 WebM/VP9 下有效；VP8 不支持 Alpha
- MP4 导出时无论参数如何，均以黑色填充透明区域
- 若浏览器自动降级为 VP8，Alpha 将静默丢失；建议手动指定"VP9"
- 原始 GIF 若无透明像素，Alpha 设置不影响画面
场景推荐参数
| 场景 | 速度 | 码率 | 透明 | 推荐格式 |
|---|---|---|---|---|
| 网页动效 / 叠加背景 | ×1 | 4000–8000 kbps | ✓ 保留 | WebM VP9 |
| 社交媒体发布 | ×1 | 4000–8000 kbps | 填充白/黑色 | MP4 |
| 产品展示 / 教程 | ×0.5–×1 | 6000–12000 kbps | 按需 | WebM / MP4 |
| 表情包 / 短视频素材 | ×1–×2 | 1500–4000 kbps | 填充背景色 | MP4 |
| 无缝循环背景视频 | ×1 | 2500–6000 kbps | ✓ 保留 | WebM VP9 |
注意事项
- 所有转换均在浏览器本地完成，文件不上传任何服务器，隐私安全
- WebM 默认保留透明通道（VP9 Alpha）；MP4 格式不支持透明，透明区域将以黑色填充
- MP4 导出首次需加载 FFmpeg 核心约 25MB，请确保网络正常；同一页面内二次使用无需重新加载
- GIF 帧数较多（200 帧以上）时解析较慢，建议关闭其他内存占用高的标签页
- 若 VP9 录制不被支持，浏览器会自动降级为 VP8（VP8 不保留 Alpha），建议使用 Chrome 最新版
- 自定义缩放宽度建议填偶数像素，奇数宽度可能导致 H.264 编码异常
常见问题
WebM 透明背景上传到社交平台后变黑了？
微信、抖音等平台不支持带 Alpha 通道的 WebM，上传时会自动填充黑色背景。发布到这些平台时，请选择"导出 MP4"并在背景色处选择合适颜色（如白色）填充透明区域。
MP4 导出失败或 FFmpeg 一直加载中怎么办？
FFmpeg 核心约 25MB，网络较慢时可能超时。可刷新页面重试，或下载 WebM 后用本地工具转换：VLC（界面操作）或命令行
ffmpeg -i input.webm -c:v libx264 -pix_fmt yuv420p output.mp4。如何确认 WebM 是否真的保留了透明通道？
用 Chrome 打开下载的 .webm 文件，将其放到一个有背景色的网页上（或直接在地址栏打开）。若透明区域显示浏览器默认背景（白色或棋盘格），而非视频内部黑色，则 Alpha 通道保留成功。也可在 Figma / After Effects 中导入验证。
为什么选了"保留透明"但导出的 WebM 背景还是黑色？
常见原因：① 浏览器自动降级为 VP8（VP8 不支持 Alpha），请在参数中手动指定"VP9"；② 使用了 Firefox（Firefox 的 MediaRecorder 不支持 VP9 Alpha）；③ 原始 GIF 本身没有透明像素，全部是不透明内容。建议用 Chrome / Edge 最新版，并手动选择 VP9 编码。
GIF 背景色"透明"和参数中"保留透明"有什么区别？
两个设置协同工作：
• GIF 背景色 = 透明：预览区显示棋盘格；若同时开启"保留透明"，导出 WebM 时保留 Alpha 通道
• GIF 背景色 = 纯色：预览区显示该颜色；导出时以该颜色填充 GIF 透明区域，无论 Alpha 设置如何
• 参数"填充背景色"：强制以所选背景色填充，覆盖"保留透明"设置
• GIF 背景色 = 透明：预览区显示棋盘格；若同时开启"保留透明"，导出 WebM 时保留 Alpha 通道
• GIF 背景色 = 纯色：预览区显示该颜色；导出时以该颜色填充 GIF 透明区域，无论 Alpha 设置如何
• 参数"填充背景色"：强制以所选背景色填充，覆盖"保留透明"设置
WebM 视频如何在网页中实现无缝透明循环？
在 HTML 中使用：
<video autoplay muted loop playsinline style="mix-blend-mode:normal"><source src="xxx.webm" type="video/webm"></video>。配合 CSS mix-blend-mode: multiply 或 screen，可在不同背景上实现透明叠加效果，是替代 GIF 的最佳方案，体积更小、画质更好。