GIF 与视频一览
GIF 在几乎每项技术指标上都被视频超越,但在少数情境下凭借通用的自动播放胜出。简短版:
| 方面 | GIF | 视频(MP4/WebM) |
|---|---|---|
| 文件大小(5 秒片段) | 10–30 MB | 0.5–2 MB |
| 颜色 | 最多 256 | 全彩 |
| 音频 | 无 | 有 |
| 帧率 | 10–25 FPS | 24–60+ FPS |
| 邮件和聊天中的自动播放 | 有 | 常被阻止 |
| 最适合 | 表情反应、表情包、邮件、聊天 | 网页、演示、长片段 |
GIF 仍然擅长什么
GIF 的优势不是技术性的——而是情境性的。GIF 在简单性和通用性比效率更重要的地方胜出:
- 邮件: HTML 邮件客户端在视频支持上差异极大。邮件中唯一获得广泛支持的动画格式是 GIF。一个动态 GIF 在 Apple Mail、Outlook(有限制)和大多数网页邮件客户端中自动播放。邮件中的视频需要一个后备,并常被阻止或显示为一张海报帧。
- 聊天和消息: Slack、Discord、iMessage 和大多数消息平台支持带自动播放和循环的 GIF 内联显示。在聊天中支持视频的平台往往以不同方式处理它——需要点按才播放、显示控件,或显示缩略图而非自动播放。
- 社交媒体表情反应和表情包: GIF 在社交平台上的文化使用根深蒂固。GIPHY、Tenor 和平台原生的 GIF 搜索工具专门提供 GIF。分享一段简短的循环反应,是通过这些平台构建的 GIF 基础设施来实现的。
- 简单的 UI 动画: 加载指示器、按钮状态动画和简单的图标动画,可以作为 GIF 交付,而无需 JavaScript 或 CSS 依赖。在受限环境(邮件、老旧 CMS、嵌入情境)中,这种简单性很有价值。
- 没有自动播放限制: 一些浏览器会限制视频自动播放,除非视频被静音、用户已与页面交互,或满足特定权限。GIF 在没有这些要求中任何一项的情况下自动播放。
视频明显更好的地方
在上述特定情境之外,视频在每一项技术指标上都胜过 GIF:
- 文件大小: 一个 480p 的 5 秒 GIF 可能是 10–30 MB。同一片段作为 H.264 视频可能是 500 KB – 2 MB。作为带 VP9 的 WebM,还要更小。对于加载时间重要的网页,GIF 对任何超过 2–3 秒的内容都大得不可接受。
- 颜色质量: GIF 每帧限于 256 色。照片和复杂渐变看起来色调断层并带状失真。视频编解码器在没有这种限制的情况下处理全彩内容。
- 时长: GIF 文件大小随时长和帧数线性增长。任何合理质量的 30 秒 GIF 都大得不切实际。视频高效地处理长时长。
- 音频: GIF 没有音频支持。如果动画需要声音,用视频。
- 帧率: GIF 实际上通常限于 10–25 FPS(文件大小约束更高的帧率)。视频高效地支持 24、30、60 乃至更高的帧率。
现代替代方案:WebP 动画与 AVIF
WebP 支持动画,并以同等视觉质量产生比 GIF 小约 30–60% 的文件。AVIF 动画支持正在兴起。对于你控制整个页面环境的网页用途,两者在技术上都优于 GIF。
限制和让 GIF 存活的那一个相同:聊天应用、邮件客户端和社交平台不支持动态 WebP 或 AVIF。GIF 基础设施在那些特定情境中根深蒂固。
对于你控制 HTML 且知道受众使用现代浏览器的网页,用动态 WebP 代替 GIF 是直截了当的改进。如有需要,用
网页用途的简短 GIF 准则
如果你在网页上使用 GIF,把它的影响降到最低:
- 把时长保持在 3 秒以内: 超过那个时长,在网页上视频几乎总是更好的选择。
- 把帧率降到 10–15 FPS: 大多数动画不需要 24+ FPS。更低的帧率能极大地减小文件大小。
- 限制调色板: GIF 允许每张图像 2–256 色的调色板。对于简单动画,减到 64 或 128 色往往以文件大小的一小部分产生可接受的结果。
- 减小尺寸: 一个以 400 像素宽显示的 GIF 不需要在文件中是 800 像素宽。导出前把它调整到显示尺寸。
- 使用懒加载: GIF 一进入视口就开始动画。对于折叠以下的 GIF,使用 loading="lazy" 来推迟下载。
从图像创建 GIF
PhotoTools 的 GIF 制作工具把一组图像转换成一个循环的 GIF。放入 JPG 或 PNG 帧,设置帧延迟(每帧显示的时间),选择输出宽度,并下载动态 GIF。处理在你的浏览器中进行,而不把文件上传到服务器。
这对于从一组静态帧创建简单的产品演示、分步视觉指南和简短的动态图形很有用。对于任何需要来自视频源的流畅运动的东西,带 GIF 导出的屏幕录制软件通常更实用。