精灵形象设计/策略

Question

昨天我提出了这个问题：background repeat tiled bgImage inside an sprite image?

因此，长期不可能重复精灵图像内的背景，

创建精灵时最好的*策略是什么？

我的意思是，选择：

• 我应该尝试将所有图像放在一个精灵中吗？ （包括可以重复的大背景）
• 图标的一个精灵。背景部分？
• 其他

*）当我说最好的意思是最可访问/可用/性能

Answer 1

我总是创建three sprite sheets。

优先; ，对于那些not repeating的图像，如箭头，按钮等。

对于那些repeating y-axis的图片，

秒; 。

对于那些repeating x-axis。

的图片，

第三;

或 如果设计中没有重复图像，则sprite sheets

不需要其他图像

x轴的精灵http://imageshack.us/photo/my-images/401/xaxissprites.png/

y轴http://imageshack.us/photo/my-images/28/yaxissprites.jpg/

的精灵

Answer 2

精灵很老了！您可以使用更新的技术。但是当你使用精灵时。我会为图标制作一个精灵，为其他图像制作一个精灵。

但您也可以使用数据uri的/ base64编码来处理图像。这是图像的新技术。并且更换精灵。使用sprite，您有http请求。使用数据uri，您没有http请求。它让你的网站更快！而网站的速度更重要。

这里有一篇关于Click here的文章。在这里你可以创建数据uri。 Here。但ie7不支持数据uri。对于ie7，您可以回退到单张图像。

使用数据uri并忘记精灵。 Sprites是2011年的一项技术。数据URI完全是2012年！ ： - ）

Answer 3

在我看来，必须首先为您的用户定义精灵。如果您的用户看到他们的权限不同的页面，您必须按权限划分您的精灵。第二个是背景和图标，按钮分组。每个图像文件都有一个标题。在标题中，它们包含大小，色彩映射和任何其他附加信息。标题大多增加文件1KB - 3KB的平均值。所以我们可以认为图像越少，数据传输越少。总之，我建议你使用一个精灵。

其他人认为是这方面的工具。您可以使用精灵表工具生成精灵并编写CSS。这些工具生成最小图像大小（使用一些算法来命令精灵）并根据精灵表上的精灵位置自动生成CSS文件。如果您使用的是mac，则可以使用Sprite Master进行此操作。