图像大小对 CSS 渲染/绘画性能的影响有多大？
How much does image size affect CSS rendering / painting performance?
我正在开发 JS / HTML 游戏，其中所有对象都是 HTML 元素（主要是 <img>）。它们的 top 和 left CSS 属性 （有时与其他属性一起，如边距、转换等） 由 JS 代码动态修改（每一帧，基本上）。当我从使用 .png 文件切换到 .gif（22 fps -> 35 fps）时，我注意到性能有了巨大的提高，但仍然：
进一步减小文件大小（减少 10-30%）是否真的可以显着提高 CSS 转换性能？ 我只是测试一下，但我谈论约 250 个 gif 文件；我也不想失去太多质量。
你为什么不使用 JPEG？它很紧凑。是的，图像大小会影响性能。
此外，选中“CSS Image Sprites”，您可以拥有一张包含所有可能 icons/images 的图像，并且可以使用 CSS。您将获得更好的性能，因为您将加载单个图像。
减少必须处理的数据量（=文件大小）通常会对性能产生积极的影响，但它会产生多大的影响始终需要测试和衡量，这取决于始终关注您的代码与所有周围框架、浏览器以及底层硬件如何进行计算的协同工作情况。
在最坏的情况下，您必须创建大量调整大小并重新计算新像素，特别是如果您必须再次增加图像的显示尺寸，您甚至可能会造成性能损失。
在您自己在系统中测试和测量更改之前，没有关于更改的好坏的绝对答案。
关于减小 GIF 文件大小：
- 这里的一个积极因素是当您将图像的宽度和高度减半时，实际文件大小可以减少大约 75%。
- 使用 GIF 图像时，减少 GIF 图像中使用的不同颜色的数量也会减小尺寸。从图像编辑器工具导出 gif 时，通常可以 select 颜色数。在 Photoshop 中，您有一个选项 "Export for Web"，它会尝试设置网页使用的最佳设置。
关于游戏性能和图像：
- 如果您已经知道如何调整图像大小（固定大小，如 +50% 和 +100%），使用 CSS Image Sprites 和预先调整大小的图像可以带来很好的改进，因为您赢了' 必须调整图像大小，但只需使用精灵的现有部分 sheet。这将减少图像处理的处理量，从而提高性能。
- 如果您同时想要性能、质量和小文件大小，最好的方法是尽可能多地将光栅图形替换为矢量图形。大多数现代 2D 游戏都使用大量矢量图形。
- 矢量图更容易调整大小，因为只有样条线需要重新计算和填充，调整光栅图形的大小会导致对每个新像素进行计算。
- 所有常见的现代浏览器都支持 svg 格式，并且可以通过 css 调整大小。如果您想尝试一下，可以使用 InkScape 创建矢量图形的免费开源工具。
希望对您有所帮助。
我正在开发 JS / HTML 游戏，其中所有对象都是 HTML 元素（主要是 <img>）。它们的 top 和 left CSS 属性 （有时与其他属性一起，如边距、转换等） 由 JS 代码动态修改（每一帧，基本上）。当我从使用 .png 文件切换到 .gif（22 fps -> 35 fps）时，我注意到性能有了巨大的提高，但仍然：
进一步减小文件大小（减少 10-30%）是否真的可以显着提高 CSS 转换性能？ 我只是测试一下，但我谈论约 250 个 gif 文件；我也不想失去太多质量。
你为什么不使用 JPEG？它很紧凑。是的，图像大小会影响性能。
此外，选中“CSS Image Sprites”，您可以拥有一张包含所有可能 icons/images 的图像，并且可以使用 CSS。您将获得更好的性能，因为您将加载单个图像。
减少必须处理的数据量（=文件大小）通常会对性能产生积极的影响，但它会产生多大的影响始终需要测试和衡量，这取决于始终关注您的代码与所有周围框架、浏览器以及底层硬件如何进行计算的协同工作情况。 在最坏的情况下，您必须创建大量调整大小并重新计算新像素，特别是如果您必须再次增加图像的显示尺寸，您甚至可能会造成性能损失。 在您自己在系统中测试和测量更改之前，没有关于更改的好坏的绝对答案。
关于减小 GIF 文件大小：
- 这里的一个积极因素是当您将图像的宽度和高度减半时，实际文件大小可以减少大约 75%。
- 使用 GIF 图像时，减少 GIF 图像中使用的不同颜色的数量也会减小尺寸。从图像编辑器工具导出 gif 时，通常可以 select 颜色数。在 Photoshop 中，您有一个选项 "Export for Web"，它会尝试设置网页使用的最佳设置。
关于游戏性能和图像：
- 如果您已经知道如何调整图像大小（固定大小，如 +50% 和 +100%），使用 CSS Image Sprites 和预先调整大小的图像可以带来很好的改进，因为您赢了' 必须调整图像大小，但只需使用精灵的现有部分 sheet。这将减少图像处理的处理量，从而提高性能。
- 如果您同时想要性能、质量和小文件大小，最好的方法是尽可能多地将光栅图形替换为矢量图形。大多数现代 2D 游戏都使用大量矢量图形。
- 矢量图更容易调整大小，因为只有样条线需要重新计算和填充，调整光栅图形的大小会导致对每个新像素进行计算。
- 所有常见的现代浏览器都支持 svg 格式，并且可以通过 css 调整大小。如果您想尝试一下，可以使用 InkScape 创建矢量图形的免费开源工具。
希望对您有所帮助。