我有一张精灵表，我用作div背景。尺寸为：
宽度：105920 身高：240。
这是一个单色的 png 文件，大小为620kb，所以我假设大小不是这里的问题。
当我尝试将其用作background-image: url("spritesheet.png");时，Firefox会抛出错误提示“图像损坏或截断”。 Chrome未显示任何错误消息，但未显示图像。
如果我用gimp将图像的宽度调整为10,000，一切都还可以。但显然我不能再用它了。
CSS中允许的最大图像大小是否有任何限制？难道我做错了什么 ？
答案 0 :(得分：4)
根据this question的答案，您的图片太大，Safari / iOS无法处理。其他浏览器可能有类似的限制，正如您在Firefox中找到的那样。文件大小为620kb是可以接受的，但图像的尺寸（超过2500万像素）有点太多了。
也就是说，即使浏览器可以显示您的图像，我也非常强烈建议不要使用这些尺寸的图像。出于性能原因，人们会使用精灵，但是尺寸会产生巨大性能损失的图像......你会在脚下射击自己。
答案 1 :(得分：1)
不是解决问题的方法，只是评论。当您水平定向时，使用精灵表的优点可能会丢失或大大减少。这会导致缓存未命中问题。
想象一下，你有一个10x10像素精灵。要加载包含它的图像部分，需要加载（numPixels = sprite_height * src_width）。 在您的情况下，这将是10 x 105920像素= 1,059,200像素！ - 只需缓存100像素的图像。
定位精灵表的最佳方法是垂直方向。您使用相同的公式来确定必须加载的像素数，但得到的结果却截然不同。现在结果足够小以适应小（est），快速（est）缓存。 在这种情况下：10 x 240像素= 2400像素。 - 同样，只有100像素的矫枉过正，但比上一个例子更出色的解决方案。
将工作表的方向从水平更改为垂直会导致将此精灵缓存441次所需的内存大小减小。不完全是我认为无足轻重的东西。
当在精灵表中重复绘制彼此相邻的相同精灵或精灵时，进行此更改的效果最明显。
鉴于浏览器在屏幕上使用真彩色图像，认为出于性能原因，浏览器会将您的单色图像转换为与显示器的其余部分兼容的图像似乎并不合理 - 24位/像素，虽然值（相对）变化很小。 如果确实将图像转换为24位，那么内存要求将 large 105920 * 240 * 3 = 76262400bytes。是！！这是72.73兆字节!!如果将其转换为rgba（32位）图像，则再添加1/3。
所以，我有两个建议。