如何压缩一系列PNG进行加载？答案

【问题标题】：How to compress a series of PNG for loading?如何压缩一系列PNG进行加载？
【发布时间】：2015-11-19 23:18:36
【问题描述】：

我有一系列用于游戏角色的 PNG，例如 stand.png, run1.png, run2.png。

我想加载它们以在 JavaScript 画布中绘制一系列动作。由于.png 的大小，如果一个字符大约有 50 帧，我必须为一个字符加载将近 2 MB。

那么有什么想法可以通过diff 算法之类的方法来压缩这些相似的 PNG 吗？

【问题讨论】：

我想使用 GIF，但似乎无法在 JavaScript 中获取或控制单帧 GIF。
如果您正在寻找压缩/小文件大小，GIF 可能不是最佳选择……
您是否尝试过通过Pngcrush 和/或PNGOUT 运行您的PNG？我发现它们通常会减少 PNG 的一些文件大小，尤其是在组合使用时。（有时 PNGOUT 会将图像调色，但不会很好地压缩；然后，Pngcrush 可以使用 PNGOUT 的调色板并更好地压缩位。）
使用精灵来减少对单个图像的大量请求的开销。 developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
其实我喜欢的是减少这些相似图片的冗余。因为动作的帧包含大量冗余，所以两帧之间只有微小的差异。

【解决方案1】：

首先删除字符周围的所有空格（透明）。这可能会导致图像大小不同，您必须将偏移量和大小存储在文件中。一个简单的 JSON 文件来描述你的角色精灵就可以完成这项工作。

检查精灵之间的相似之处。 Run1.png 和 Run2.png 的上半部分可能相同，只是偏移了，因此将其剪掉并将其存储为一个图像，并将两个跑步腿图像分开。

JPG 图像不存储透明像素，但可以非常紧凑。考虑将透明像素存储在单独的 8 位压缩 png 图像或自定义二进制格式中。 4 位适用于大多数透明度要求。然后您可以将颜色信息存储在 jpg 中，从而节省大量数据。

确保您不发送只是镜像或旋转其他精灵的精灵。在客户端做镜像和旋转。

如果每个精灵都很小并且您希望使用 png 格式，请考虑使用 8 位颜色查找格式而不是 32 位 RGBA。如果您有相同的精灵但只是颜色不同，您可以为它们创建单独的托盘而不是单独的图像，并且在客户端只需用新托盘替换像素颜色。

如果角色携带某物，例如枪，请取出枪并将其存储在单独的图像中。在加载时将其添加回来或将其分开并在渲染时添加。

【讨论】：

【解决方案2】：

您可以在一个 png 上绘制所有角色状态，并将该 png 文件（png sprite）加载到浏览器。例如，您可以在此站点 http://css.spritegen.com/ 上执行此操作。然后就可以在画布上绘制部分 png 精灵了。

【讨论】：