我正在制作一个精灵，它的高度达到了大约4000像素。在图形设计社区中，是否有用于最大精灵高度的通用尺寸？
CSS图像的精灵高度限制？
6
- keymack
5
你所说的精灵是什么意思？你是指一个HTML元素吗？问题是否出现在特定的浏览器/环境中？标记代码片段可能会有帮助！ - jsalonen
一个精灵是将多个图标合并成一张大图像，然后使用CSS定位来获取正确的图标。 - keymack
@jsalonen：我猜他指的是CSS Sprites，就像Jeff在http://blog.stackoverflow.com/2009/01/updated-wmd-editor/和其他地方提到的那样。 - AnonJr
知道文件大小可能比知道尺寸更有帮助（这并不是说尺寸不值得知道）。 - AnonJr
哦，现在我明白了什么是精灵。感谢AnonJr提供的链接！ - jsalonen
2个回答
11
浏览器即使您只使用很少的精灵图，并且即使图像的大部分是空白/白色，也必须解压缩整个图像并将其存储在内存中。对于桌面客户端，您只错过了成为良好公民的机会，因为使用了太多内存（浏览器已经占用了大量内存）。对于某些移动客户端（例如，iPhone处理超过25k解压后的文件），问题可能更加严重，图像根本不会被缓存，因此最好有两个小于25k的文件和两个HTTP请求，而不是一个>25k的文件和一个从未缓存的请求。
最后一个问题是，PNG压缩是基于行的，拥有宽图比高图有更少的开销（虽然在某些情况下，太宽可能理论上不好，因为每行只能有一种预测滤波器类型）。
哦，还有，如果精灵图太多，您可能会在同一图像中得到太多不同的颜色，并且错过合适的调色板图像的机会。测试所有这些组合都很繁琐，但是如果您可以，按主要颜色或渐变将精灵图分组是一个不错的启发式方法（因为渐变/模糊需要许多不同的颜色）。
- Magic Banta
3
我认为重点不应该是精灵的物理大小（宽度x高度），而应该是精灵文件的大小，并思考是否值得将精灵分成多个精灵。
通常我们会根据颜色将精灵分割，因此拥有主要为蓝色、红色或黄色的精灵。这样我们可以获得更平滑的渐变和整体图像质量，同时保持图像文件大小较小。
通常我们会根据颜色将精灵分割，因此拥有主要为蓝色、红色或黄色的精灵。这样我们可以获得更平滑的渐变和整体图像质量，同时保持图像文件大小较小。
- Dieter G
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接