如何将动画 gif 添加到图像精灵？答案

【问题标题】：How to add animated gif to an image sprite?如何将动画 gif 添加到图像精灵？
【发布时间】：2012-09-03 16:01:01
【问题描述】：

我使用图像/css sprite 来优化我正在处理的网页，其中一个经常需要的东西是某种动画加载图标，通常是动画 .gif 文件。

是否可以将动画 gif 添加到图像精灵（不必为整个精灵使用 gif）？如果是这样，我该怎么做？还有其他图像格式支持动画吗？

【问题讨论】：

标签： css sprite

【解决方案1】：

是否可以将动画 gif 添加到图像精灵（并且没有为整个精灵使用 gif)？

不，这是不可能的。整个精灵表要么是 GIF，要么不是。您不能在单个精灵中混合文件类型。您可以改为将所有 GIF 精灵放入一张表中（如果它们的帧都可以彼此整除），然后将所有 PNG/JPG 精灵放入第二张表中，并分别使用它们。

还有其他图片格式支持动画吗？

支持动画的唯一其他格式（据我所知）是APNG，但仅在 Firefox 中受支持。（Chrome 有一个支持它的有缺陷的扩展程序。）

【讨论】：

查看新编辑：“还有其他图像格式支持动画吗？”
你如何将动画 gif 添加到精灵？
你需要某种 GIF 编辑器（我知道 Photoshop can do this）。然后你必须将帧复制到那个 GIF 文件中。但是，将 GIF 放在单独的文件中可能更容易。我相当肯定这就是 Facebook 和 Google+ 等网站处理 GIF 的方式。
好的。您也可以尝试 Google re: 多个 GIF 一起使用。 google.ca/search?hl=en&q=multiple+animations+in+one+gif

【解决方案2】：

我很早就开始尝试 CSS sprite，但对我来说，使用它们的最大（也是迄今为止唯一的）好处是减少了客户端需要发送到服务器的请求量。

我没有尝试过，但我假设对于相同的最终结果（无论如何在优化上下文中），可以将动画 gif 添加到 HTML 内嵌数据 URI 方案：https://en.wikipedia.org/wiki/Data_URI_scheme

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。
虽然该技术可以满足 CSS sprite 用户正在寻找的许多最终场景，但本主题仍然是关于 CSS sprites。我认为数据 URI 实现的完整示例会将“CSS sprites”的原始主题偏离到“数据 URI”，这本身就是一个很大的主题。所以我认为在这种情况下，参考（维基百科链接）就足够了。