图片大小会影响CSS渲染/绘画效果吗？

Question

我正在开发JS / HTML游戏，其中所有对象都是HTML元素（主要是<img>）。它们的top和left CSS属性（有时与其他属性一起，例如边距，变换等）由JS代码动态修改（每秒30-80次）。当我从使用.png文件切换到.gif（22 fps-> 35 fps）时，我注意到了巨大的性能改进，但是仍然：

进一步减小文件大小（降低10％至30％）是否可以显着提高CSS转换性能？我将对其进行测试，但是我正在谈论的是〜250个gif文件；而且我也不想失去太多质量。

Answer 1

减少必须处理的数据量（=文件大小）通常会对性能产生积极的影响，但是必须始终对它的影响程度进行测试和衡量，因为它始终取决于您的代码与所有周围框架，浏览器如何协同工作，甚至底层硬件如何进行计算。 在最坏的情况下，您必须创建大量调整大小的新像素，特别是如果必须再次增加图像的显示尺寸时，甚至可能会导致性能下降。 除非您自己在系统中进行了测试和测量，否则对您的更改的好坏没有绝对的答案。

关于减小GIF文件大小：

• 这是一个积极的因素，当您将图像的宽度和高度减少一半时，实际文件大小可以减少75％左右。
• 使用GIF图像时，减少GIF图像中使用的不同颜色的数量也会减小尺寸。从图像编辑器工具导出gif时，通常可以选择颜色的数量。在Photoshop中，您可以使用“导出为Web”选项，该选项将尝试设置用于网页的最佳设置。

关于游戏性能和图像：

• 如果您已经知道如何调整图像大小（固定大小，如+ 50％和+ 100％），则将CSS Image Sprites与预先调整大小的图像配合使用可以带来很好的改善，因为您不必调整图像的大小。图像，但仅使用Sprite工作表的现有部分。这样可以减少图像处理的处理量，从而提高性能。
• 如果要同时获得性能，质量和小的文件大小，最好的方法是用矢量图形替换尽可能多的栅格图形。大多数现代2D游戏都使用大量矢量图形。
• 矢量图形更易于调整大小，因为只需重新计算和填充样条线，调整栅格图形的大小会导致每个新像素的计算。
• 所有常见的现代浏览器都支持svg格式，并且可以通过CSS调整大小。如果您想尝试一下，InkScape是一个免费的开源工具来创建矢量图形。

希望这会有所帮助。

Answer 2

为什么不使用JPEG？它很紧凑。是的，图像大小会影响性能。

还请选中“ CSS Image Sprites ”，您可以将一个图像包含所有可能的图标/图像，并可以使用CSS处理视图。加载单个图像将获得更好的性能。