动画.GIF vs精灵表+；JS/CSS

对于性能、文件大小（以及我的理智性），哪一个缩放效果最好：动画

.gif

s还是带有CSS动画的精灵表（需要时还有JS）

文件大小 因此，老实说，我不确定这里哪一个更好，因为我不了解

.gif

中的帧压缩。我的猜测是，如果我能把它摆对的话，它们最终会差不多相等，但如果这是错误的，或者如果这是一个原因不同的因素，请让我知道

在我看来，这里的主要优势在于SpriteSheet，因为我可以在一张纸上包含多个动画（我们这里说的是数百个动画sprites）。基于此，我知道我可以使用

image-rect（）

轻松地在CSS中拉出单个帧。其中，对于

.gif

文件，我实际上只能包含一个动画，因为每个动画的持续时间可能不同

附录：此外，某些动画会对给定的精灵重复，因此精灵表只需有一个帧副本，而作为

.gif

则需要所有帧（至少据我所知）

演出 再次猜测一下，我的直觉告诉我，动画

.gif

s将大大加快速度，因为我不必同时管理所有动画，因为我正在为其他事情编写大量JS代码。但是，我不确定，也许浏览器会因为30多个动画

.gif

s而大受欢迎

我的理智 spritesheets是为我制作的，所以我的工作在一开始会很高（写作和动画引擎，手工编码一张/每张）。但一旦编写完成，它就可以很好地使用，并且在精灵表中进行更改只需要对代码进行最小的更改

另一方面，动画

.gif

文件不是Photoshop中的蛋糕（如果你有更好的程序，请告诉我）。每一个都必须手工制作，而且是一个漫长的过程。但是，一旦它们被制造出来，我真的不需要改变它们。我的精神状态表不太可能很快改变，所以很有可能是一张就完成了

我的问题（tl；dr） 从文件大小（包括通过web传输的HTTP头传输）、现代浏览器的性能和易于创建（最低优先级，但如果您能让我的工作更轻松，或对此提出异议，我将不胜感激）、动画

.gif

文件（从SpriteSheet构建）等方面来看，它将更好地扩展到数百个动画，或者仅仅使用CSS和我已经有的精灵表

例子

---

VS

我来看看这个：

我个人认为你会疯狂地使用精灵纸，但我想这取决于你需要带多少动画礼物

我不知道您的限制是什么，但这里有一个使用CSS3

step（）

制作精灵表动画的提琴：

---

Gif动画可以重复精灵，也可以使用部分帧更新，并将同一精灵定位在不同位置。如果你只是想显示一个非交互式的动画，我会说动画GIF有所有的优势，除了颜色，你必须使用256色调色板

---

我记得用过，那肯定很好用。我什么都不知道，但网上有消息说这是一个稍微重一点的好选择。

如果你说的是数百个精灵，那么就用.gif吧。动画越复杂，动画越多，浏览器上的负载就越高，因为将使用更多的资源“一张一张地”渲染动画，而不仅仅是播放动画.gif本身

当你考虑到跨浏览器的兼容性时，情况会变得更糟，因为IE总是会失败。我从来没有见过一个网站被很多小的.gif阻塞，但我看到网站总是被简单的javascript阻塞。我只能想象，如果成百上千的css/js动画图像一直在翻转，情况会变得多么糟糕

---

如果你不介意我问的话，这些动画是什么样的网站？它是某种动画组合还是…？

更新：

自从我第一次发布这篇文章以来，我已经有了更好的运气让精灵表动画在浏览器中工作。浏览器/计算机有改进吗，还是我做错了？我不知道。不管怎样，这个答案有点过时，但出于历史目的，我将把它留在这里。现在有更好、更新的答案更具相关性

---

GIF与GPU加速配合得很好，因为部分帧更新意味着只需要重新绘制一部分像素。与无gpules绘图不同，浏览器不必在每一帧重新绘制所有像素。使用sprite床单时，不管怎样，您都会强制使用后者，因为您没有重叠大部分透明层。因此，GIF肯定会给您带来更好的性能，特别是在现代浏览器中

---

GIF的缺点显然是限制为256色，但根据您的示例，这不应该是一个问题。但是，如果您使用精灵图纸，它肯定会成为一个问题，您将无法使用GIF。这很可能意味着更糟糕的压缩。由于您有大面积的纯色，水平方向上有大量重复，并且任何给定区域中的颜色都很少，因此您将从GIF的压缩实现中受益匪浅。

正如我所好奇的，我用javascript实现了它

（根据评论编辑图像主机）

我发现：

• 它起作用了！比预期的要好
• CPU使用率实际上很低（没有在IE6恐龙中测试它，我相信它需要“修复”）
• 可以显著地（取决于源）切断尺寸和/或提高质量
• 与之不同的是，即使放大/缩小（在两种情况下都尝试），此功能也可以工作
• 它允许可变的帧持续时间，就像gif一样
• 如果有更多的工作，它甚至可以