雪碧图像水平还是垂直？

Question

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

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

Answer 1

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

精灵主要用于降低图像的httprequests - 如果你使用许多小图像,它总是很好的方式将它们存储在一个更大的(只是不要忘记设置缓存标题)所以所有浏览器将尝试缓存它们(和移动设备至少为会话).

Answer 2

根据这篇文章，这取决于。

要考虑的一个方面是解码的子画面映射图像将使用多少内存。以下是有关水平堆叠或垂直堆叠是否更理想的准则：

• 对于精灵中的所有图像，找到最宽图像的宽度和最高图像的高度。
• 如果最大宽度大于最大高度，则水平堆叠将产生更佳的精灵板。否则，垂直堆叠会更好。

然后继续以垂直或水平精灵显示相同图像的示例及其文件大小，这非常令人惊讶。建议使用Google Chrome浏览器的开发人员工具“本机内存探查器”。

垂直精灵

水平精灵

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