雪碧图像水平还是垂直？

Question

我正在为我的项目使用Sprite图像。我们应该遵循横向还是纵向？我的意思是说并排（占据更多宽度）或一个再见（占据更多高度）。

在精灵中添加图像是否有任何宽度/高度限制？是否包含任何装载概念？

Answer 1

如果使用水平或垂直方向，则无关紧要。只是不要让它们太大。大多数1500x1500用于一个精灵 - 然后改为另一个精灵。 如果你考虑手机，那么试着不要让精灵大于800x800左右。 对于图像类型，如果你使用一些流行的图形编辑器选项，我会建议png（如果有完整的颜色和透明度），为网络保存＆＃39;＆＃39;它会更小。

Sprites主要用于降低图像的httprequests - 如果你使用许多小图像，它总是很好的方式将它们存储在一个更大的（只是不要忘记设置缓存标题）所以所有浏览器将尝试缓存它们（和移动设备在最少的会议）。

Answer 2

根据this article，它取决于。

要考虑的一个方面是解码的精灵地图图像将使用多少内存消耗。以下是水平堆叠或垂直堆叠是否更优化的指导原则：

• 对于精灵中的所有图像，找到最宽图像的宽度和 最高图像的高度。
• 如果最大宽度大于最大高度，则a 水平堆叠将产生更优化的精灵表。 否则，垂直堆叠更为理想。

然后继续显示垂直或水平精灵中相同图像的示例及其文件大小，这是非常令人惊讶的。它建议使用谷歌Chrome的开发者工具“Native Memory Profiler”。

垂直精灵

水平精灵

在这种情况下，水平精灵最好。