Performance 动画gif vs视频vs画布-用于速度和；文件大小

假设一个简单的产品演示，例如

i、 e.这不是传统的高分辨率视频，可以通过以下方式实现：

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

问题是，对于用户来说，哪个性能更好？在以下两方面：

用户必须下载以查看“产品演示”的文件大小

显示“产品演示”的处理能力要求

---

如果你觉得有一种更先进的技术来完成这个或另一个指标来判断它的有用性，让我知道，我会相应地调整

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

但是，你需要考虑带宽因子。如果GIF或PNG的最终大小较大，则缓冲视频可能更好

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

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

使用外部主机（如YouTube或其他主机）对您的站点有益，带宽是从这些站点而不是从您的服务器获取的（如果您使用的提供商以各种方式对此进行限制或收费）

有关动画PNG或APNG的更多信息（因为这并不广为人知）：

这里的画布只是一个显示设备，并不是真正必要的（图像容器做同样的工作，也可以为GIF/PNG设置动画，而画布不能）

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

---

CSS3动画也是演示幻灯片等内容的一种选择。

我知道它已经得到了回答，但正如您特别提到的Supreme Text动画，我认为您希望创建类似的内容

如果是这样的话，那么这里有一篇文章解释了它是如何由崇高的文本作者本人创作的：

---

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

这是他制作的动画，托管在github上——它似乎正在积极开发中：所以，IE、Safari或Chrome不支持动画PNG？