动画 gif 与视频与画布 - 速度和文件大小

Posted 2023-05-07

【中文标题】动画 gif 与视频与画布 - 速度和文件大小

【英文标题】：animated gif vs video vs canvas - for speed & file size

【发布时间】：2013-07-08 08:54:37

【问题描述】：

假设一个简单的产品演示，例如在http://www.sublimetext.com/ 上找到的那个

即这不是传统的高分辨率视频，可以通过以下方式合理完成：

动画 gif 视频（可以嵌入 youtube、自定义 html5 播放器，任何最具竞争力的东西） 画布

问题是，哪个对用户表现更好？两者都在：

用户必须下载文件的大小才能查看“产品演示” 显示“产品演示”的处理能力要求

如果您认为有一项卓越的技术可以完成此或其他指标来判断其有用性，请告诉我，我会做出相应调整。

【参考方案1】：

我知道它已经回答了，但正如你特别提到的 Sublime Text 动画，我假设你想要创建类似的东西？

如果是这样的话，那么这里有一篇文章解释了它是如何由 Sublime Text 作者自己创建的：

http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

这篇文章有趣的部分是他如何减小文件大小 - 我相信这是你的问题。

【讨论】：

这是他制作的加演动画，托管在 github 上——它似乎正在积极开发中：github.com/sublimehq/anim_encoder

【参考方案2】：

对于一个简单的动画，如您所指的链接中的那个，帧速率非常低，动画 GIF 的简单动画 PNG 可能是最好的解决方案。

但是，您需要在此考虑带宽因素。如果 GIF 或 PNG 的最终尺寸很大，那么缓冲视频可能会更好。

这是因为在显示之前需要下载整个 gif/png 文件（但我不确定交错的 PNG 在包含动画时如何工作）。

视频的文件大小可能较大，但由于它通常是缓冲的，因此您几乎可以立即显示动画。

使用外部主机（例如 YouTube 或其他主机）可能对您的网站有益，并且带宽来自这些网站而不是来自您的服务器（如果您使用以各种方式对此进行限制或收费的提供商） )。

有关动画 PNG 或 APNG 的更多信息（因为这不太为人所知）：https://en.wikipedia.org/wiki/APNG

这里的画​​布只是一个显示设备，并不是真正需要的（图像容器可以完成相同的工作，还可以为 GIF/PNG 制作动画，而画布不能）。

如果你使用很多向量，那么可以考虑画布。

CSS3 动画也是演示幻灯片之类的选项。

【讨论】：

那么，IE、Safari 或 Chrome 不支持动画 PNG？