logo标签列表

动态 .GIF 和 Spritesheet + JS/CSS 的区别

cssperformancefilesizeanimated-gifsprite-sheet
38
我应该选择哪种方式来达到最佳性能、文件大小和工作效率呢：使用带有动画的Animated .gif还是使用使用CSS（必要时使用JS）的精灵图集？
文件大小
老实说，我不确定哪种方式更好，因为我不了解.gif中帧的压缩情况。如果我能正确使用它们，我的猜测是它们将大致相等，但如果我理解错误，或者由于其他原因而出现差异，请告诉我。
在我看来，这里的主要优势在于Spritesheets，因为我可以在单个图集上包含多个动画（我们正在谈论数百个动画精灵）。根据我之前提出的问题，我知道可以使用image-rect()在CSS中轻松提取单个帧。而对于.gif文件，我只能包含一个动画，因为每个动画可能持续时间不同。

附言： 另外，一些动画会对于给定的精灵重复播放，因此精灵表只需要有一份帧的副本，而 .gif 则需要所有帧（至少据我所知）。

性能

我猜测动画 .gif 会更快，因为我不必在同时进行大量 JS 代码时管理所有动画。但是，我不确定，也许浏览器在处理30多个动画 .gif 时会受到重大打击。

我的理智

精灵表是为我制作的，因此我的工作一开始会很高（编写和动画引擎，并手动编码每个表）。但一旦编写完成，它就可以长期使用，更改精灵表仅需要最少的代码更改。

另一方面，在Photoshop中制作动画 .gif 文件并不容易（如果您有更好的程序，请告诉我）。每个文件都必须手工制作，这是一个漫长的过程。但是，一旦它们被制作出来，我就不需要真正改变它们。我的精灵表不太可能很快改变，因此很可能只需制作一次。

我的问题（tl;dr）

在文件大小（包括HTTP头传输，因为它将通过网络），现代浏览器性能和创建便捷性方面，使用精灵图构建的动画 .gif 文件与仅使用CSS和已有的精灵表相比，哪个更适合扩展到数百个动画？（优先级最低，但如果您可以使我的工作更轻松或对此进行论证，我将不胜感激）

示例

Animated Sprite (60 frames) VS Same animation with spritesheet

如果我没记错，动态GIF可以使用帧差压缩，这对于所有动画的子集来说，可能会比精灵表节省一些文件大小。（我没有数据来支持这一点，但是任何你得到的数字都会被特定的动画数据集所影响。） - Phrogz
2
@Phrogz 没错，但是GIF中的帧差压缩非常糟糕，因为它只能理解像素是否改变了，而不像视频中像素可能只是稍微改变了一点。在许多实际情况下，GIF的帧差压缩比起PNG的alpha透明度/24位颜色或JPEG的压缩效率来说要不那么有用。 - Camilo Martin
8个回答
17

出于好奇，我用JavaScript实现了它。

JsFiddle演示（根据评论更改了图像主机）。

我发现：

  • 它有效！而且比预期的要好。
  • CPU使用率实际上很低（没有在IE6恐龙中测试过，我确定它需要“修复”）。
  • 大小可以显著缩小和/或质量可以提高（取决于源）。
  • 与Mikey G.的概念不同，即使您放大/缩小也可以正常工作（请尝试两者）。
  • 它允许像gif一样的可变帧持续时间。
  • 通过更多的工作，它甚至可以具有类似播放器的API（暂停/恢复、快进、跳过等）。
  • 利用其他格式：8位alpha PNG、渐进式JPEG、<canvas>、SVG、WebP...

有关更多信息，请参见JsFiddle演示页面。

@OmarIthawi 你说得没错，最近imgur对我也不友好（或许对每个人都是？）。我有点滥用了stack.imgur现在（我通过StackOverflow的专用imgur重新上传了图片），看看它是否停止禁止我的图片（我甚至没有账户，当然也没有发布任何奇怪的内容... 奇怪）。链接已更新。谢谢你告诉我 :) - Camilo Martin
@OmarIthawi 实际上，糟糕！即使缓存已清除，它仍然无法立即加载图像。但是，如果您首先导航到图像URL，然后它会在页面中加载它们。我会添加说明。 - Camilo Martin
@OmarIthawi ...经过几次尝试，现在它也对我禁止访问。Imgur怎么了，以前它还是那么好用。我会寻找替代的图像托管网站。 - Camilo Martin
2
@CamiloMartin 有人还支持IE6吗？我们正在考虑停止对IE9的支持。 - themihai
@mihai 我目前只支持IE8+，如果是为客户服务，我会尽量简化。但我知道有些人会一直受苦到2014年4月（微软停止对XP和IE6的支持），甚至更久，因为IE6太过于庞大了。它在一些国家仍然占有市场份额（不包括我的国家，我很高兴），而且大型企业和政府仍在使用它。这就是为什么我喜欢自由职业工作。需要IE6支持？找另一个开发者吧。 - Camilo Martin
15

我想就这个问题发表一下意见。有许多情况下，您在页面上有多个动画。如果在同一页上有多个交互式动画，最好使用带有CSS动画的精灵表而不是gif。以下是我的演示：

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

正如您所看到的，精灵版本可以轻松处理“悬停”效果，而基于GIF的版本则会明显卡顿。

再次强调，这只是一个场景，但认为它可能会有用。此外，它也可以作为一个好的代码片段。

谢谢。

1
这实际上是一个 GIF 无法解决的好案例。您无法控制暂停 GIF。 - aug
以上的clubsexytime链接是适合工作场所的，如果有人想知道^^；然而，主要网站可能不适合。 - Prid
9

更新：

自从我第一次发布这篇文章以来，我在浏览器中成功地实现了精灵表动画。是浏览器/计算机变得更好了，还是我做错了？我不知道。无论如何，这个答案有点过时了，但出于历史目的，我会将其保留在这里。现在有更好、更新的答案更加相关。

GIF动画在GPU加速方面表现良好，因为部分帧更新意味着只需要重新绘制一部分像素。与没有GPU的绘图不同，浏览器不必在每一帧中重新绘制所有像素。如果使用精灵图，无论如何都会强制进行后者，因为你不能重叠大多数透明层。因此，GIF肯定会给你更好的性能，特别是在现代浏览器中。

GIF显然的缺点是被限制为256种颜色，但根据你的样本，这不应该成为问题。然而，如果使用精灵图，它肯定会成为一个问题，你将无法使用GIF。这意味着更差的压缩，很可能会发生。由于你有大面积的纯色，水平重复很多，任何给定区域的颜色很少，所以你将极大地受益于GIF对Lempel-Ziv(-Welch)压缩的实现。

5
+1 为 CSS3 的 step()。我之前没有见过这个，肯定会在其他地方找到它的用处。然而，链接的文章并没有真正讨论我的使用情况，而是讨论了如何为具有相同持续时间的动画 .gif 文件使用精灵图布局。正如我所说的，我的情况不同。 - LoveAndCoding
2

动态GIF仅提供二进制透明度（像素是透明的还是完全不透明的）。这就是为什么大多数动态GIF在透明背景上看起来很糟糕，因为您无法应用抗锯齿效果（像您的松鼠一样，在那里进行一些抗锯齿处理会产生奇妙的效果）。

如果您想具有PNG-24透明度质量，必须选择动画精灵。

此外，如果在画布上绘制它们，动画精灵的性能非常出色。查看：http://seb.ly/demos/bunnybench/bunnies_canvas.html

1
CSS精灵表相关的另一个问题是"抖动"，至少在当前的浏览器中存在此问题。您可以将GIF文件缩放到所需的任何大小（可能更小），但是如果您尝试缩放CSS精灵表，则会因四舍五入误差而出现抖动（background-position是基于缩放后的坐标而非原始坐标）。如果有其他处理缩放动画精灵表的方法，我们很愿意了解。
ImageMagick可以很好地创建动态GIF或精灵表。
1

Gif动画可以重复使用精灵，还可以使用部分帧更新，并将相同的精灵定位在不同的位置。如果你只是想显示一个非交互式动画，我会说动态gif图有所有的优点，除了颜色，因为你被限制使用256种颜色调色板。

我记得曾经使用过Microsoft GIF Animator，它确实很容易使用。关于Photoscape，我对它一无所知，但从网上来的消息是它是一个好用且稍微复杂一些的替代品。

你能将上述内容与文件大小或浏览器性能联系起来吗？你能用某种推理或来源证实其中任何一点吗？目前，这就是我的立场，但我除了一种直觉之外没有任何迹象表明这是正确的。此外，你能详细说明“可以重复精灵”和“使用部分帧更新”吗？在创建精灵时我该如何利用它，并且它有助于减小文件大小吗？ - LoveAndCoding
你知道如何在使用精灵表时重复精灵。局部更新意味着将多个精灵组合成一个进行显示，在你的动画中，腿不会移动，因此你可以为腿制作一个基础精灵，然后用其他所有元素的叠加精灵进行覆盖，这样就可以节省一些空间。你可以在JavaScript和gif动画中都这样做，但是考虑到工具的问题，gif动画可能更容易一些。我没有任何来源，如果你想要可靠的数据，最好自己进行基准测试。请记住，工具和设置可能对文件大小产生很大的影响。 - aaaaaaaaaaaa
0
如果涉及数百个精灵，则选择.gif格式。动画越复杂，动画数量越多，浏览器的负荷就越高，因为将使用更多资源来“逐帧”呈现动画，而不仅仅是让动画本身播放。
当考虑跨浏览器兼容性时，情况会变得更糟，IE总是出问题。我从未见过网站因许多小型.gif而出现问题，但我经常看到网站因简单的JavaScript而出现问题。我只能想象使用数百个CSS / JS动画图像进行翻转时会有多糟糕。
如果您不介意我问一下，这些动画是为哪种类型的网站而设计的？是某种动画作品集还是......？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接