CSS Sprite Sheets：最佳实践，工具和有用的应用程序
使用CSS Sprite而不是较小的单个图像的集合，可以提高网页的性能并使内容更井井有条。 让我们看一下精灵制作工作流程的一些最佳实践和有用的工具。
精灵名称可能会让您想起游戏精灵； 如今的复古游戏机游戏，甚至是基于浏览器的游戏：
用CSS术语来说，精灵角色扮演的角色大致相同。 Sprite是一个大文件，其中包含网站的多个图像，从而节省了加载时间和网站空间。
最佳实践
使用CSS Sprite Sheets的基本要点是服务器只需要发送一个包含所有图像的图像文件，而不必发送大量单独的图像文件-通过CSS，您可以将文件中的任何小片段显示为元素的背景。
有人认为，使用单个图像可以“愚弄”整个页面，认为页面加载速度更快。 加载时弹出的图像可能看起来进展良好。 这是一个错误的好处，但是始终希望真正更快的加载页面。
如前所述，此方法的另一个缺点是每个单独的图像都是单独的图像文件。 因此，服务器必须将每个图像作为单独的HTTP请求进行计数。 保持站点上的HTTP请求数量尽可能低很重要，因为浏览器只能同时向任意一台服务器发出有限数量的请求。
将您的图像合并到一个文件中，不仅会大大减少HTTP请求的数量，还会减少图像的总文件大小。
Webdesigntuts +使用Sprite Sheets，稍后了解如何使用SpriteMe查看它们！
不同的方法：之前还是之后？
创建Sprite工作表时，有两种常用方法–在构建网站之前或之后进行制作。
创建站点时，可以将所有图像从地面向上放置到Sprite表中。 您将根据自己的需要更新CSS。 这就是我们所谓的before方法。
或者，您可以将所有图像创建为单独的文件，这使编辑它们更加简单。 建立网站并准备好所有图像后，您可以快速轻松地手动进行编译，也可以使用多种工具之一为您完成所有工作（稍后将对此进行详细介绍）。 这就是我们所说的事后方法。
如果您不熟悉Sprite工作表或不熟悉网页设计，则绝对推荐使用“ After”方法。
如果您不熟悉Sprite工作表或不熟悉Web设计，则绝对推荐使用after方法。 您可以为每个单独的图像分别保留任何PSD或文件，进行任何更改，然后运行您选择的应用程序。 而且，如果不确定如何为图像编写所有CSS，那么大多数sprite生成应用程序也会生成随附CSS。
这些应用程序中的大多数都是完全免费的，还有另一个好处！
让我们看看一些技巧和工具，以帮助您使用Sprite Sheet。 然后由您选择最合适的方法。
注意：以下大多数提示都假定您会事先制作精灵。
提示1：保持井井有条
在Photoshop中布置图像（或用于布置Sprite工作表的任何图像）时，最好尝试尽可能清晰，轻松地组织事物。 尝试始终舍入到最接近的10像素，或者如果每个图像的尺寸都差不多，则为每个图像使用一定的空间。 编写所有附带CSS时，您不必一直测量坐标，而且您不太可能忘记所涉及的数字。
使用“更简单”的图形还意味着在Photoshop中使用“捕捉到”网格或绘制网格线以使事情井井有条且易于理解将更加容易。
提示2：等到一切正常
如果将所有图像放入Sprite工作表中，花很多时间写出所有CSS，然后确定其中一张图像需要编辑，则可能会导致严重的问题。 如果必须更改图像大小，则可能需要更改和重新调整精灵表的布局-这意味着您必须花绝对的时间来更改所有随附CSS。
这是您可能更感兴趣的是从单个图像开始，然后使用应用程序为您完成所有艰苦工作的另一个原因。 之后，如果您需要进行一些编辑，只需重新运行该应用程序即可。 你还能想要什么？
提示3：贴标至关重要
如果使用Photoshop或其他类似的图像编辑器，则最好对每个精灵的图层进行良好的标记和分组，这样一来，如果您（或其他任何人）以后需要理解它，一切都将非常清晰。
您的标签应简洁明了，任何人和所有人都应易于理解。
对于大多数设计人员来说，这应该是相当普遍的做法，但不要拖延标签-在创建子画面后立即这样做。 试想一下，如果您有一个巨大的Sprite表并且找不到合适的图层，可以节省多少标签时间-最终可能会变得非常沮丧。
同样，标签对于SpriteCSS至关重要。 肯定需要标签来确认代码选择了哪个sprite-并且以上所有原则仍然适用。 如果您正在设计要在Themeforest等网站上出售的模板，那么任何CSS（更不用说Sprite Sheet CSS）都应该清楚地标上标签，因为潜在的用户可能对CSS的了解不如您。
帮助工具
有大量工具可让您轻松生成精灵表。 当您使用一系列单独的图像进行创建和设计时，请最终将它们全部编译为一张精灵表-“之后”方法。
以下是一些最好的Sprite Sheet生成器：
- 罗盘
价格：免费！
Compass包含一个出色的Sprite和样式表生成器，可根据存储在文件夹中的单个图像构建Sprite。 还与Sass相关； 一个CSS预处理程序，可以使您CSS更清晰，更有条理并且更易于维护。 更多信息： http ： //enva.to/z12V70
http://compass-style.org/ - 柠檬汽水
价格：免费！
Lemonade使用Sass极其简单易用，如上所述。 您需要做的就是在Sass或SCSS文件中添加一行代码，然后就完成了-生成了一个精灵。 但是，开发人员现在已经着手开发Compass和Sass-因此，不要指望很快就对Lemonade进行任何更新。
http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html - 精灵我
价格：免费！
一个很棒的基于bookmarklet的精灵表生成器和查看器。 它可以用来查看任何网站上使用的任何精灵。 最好的功能是您可以使用单个图像设计网站，然后运行SpriteMe。 它将快速生成一个可以导出的Sprite表，并且还为新Sprite生成关联CSS。 甚至将精灵插入当前页面。 如果您习惯于处理单个图像，则这将提供最简单的过渡到处理精灵表的方法。 稍后，我将详细介绍如何使用SpriteMe。
http://spriteme.org/ - 烟花CS6
价格：绝对不是免费的！
Adobe Creative Suite中最新版本的Fireworks包括Sprite Sheet生成。
更多信息： http : //enva.to/IURM73
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html
工具： SpriteMe简介
SpriteMe是可从www.spriteme.org获得的免费书签。 它使用起来非常简单，并且对您习惯的设计方法几乎没有影响。 它将在屏幕的侧面打开一个叠加层，您可以在其上从使用它的网站上下载图像或Sprite表格，或者更重要的是为您生成Sprite表格和随附CSS。
使用SpriteMe，您可以查看网站上已有的当前Sprite表，例如Webdesigntuts +！
背景图像使页面看起来不错，但也会使其变慢。 每个背景图像都是一个额外的HTTP请求。 有一个解决方法：将背景图像合并到CSS Sprite中。 但是创建精灵很困难，需要奥术知识和大量的反复试验。 SpriteMe只需单击一下按钮即可消除麻烦。 -www.spriteme.org
就像我之前说过的，如果您习惯使用单个图像方法，喜欢使用该方法，或者不打扰与精灵表相关的辛苦工作，那么SpriteMe就是答案。
尽管Webdesigntuts +网站已经有了Sprite工作表，但SpriteMe仍可以通过合并它们来改善工作情况！ 您可以看到CSS的导出方式-对齐已经完成。 您要做的就是复制，粘贴和更改URL！
就像创建带有单个图像的设计，然后运行SpriteMe一样简单。 它会从您的站点获取所有背景图像，将它们分组为精灵，然后生成精灵表供您下载。 接下来，它“将精灵插入当前页面”，并为您“重新计算CSS背景位置”。 如果您想要更好的SpriteMe使用指南，请访问www.spriteme.org 。
查看SpriteMe的“储蓄表”以清楚地了解Sprite Sheets如何为许多网站节省了大量空间和页面加载时间（大多数情况下...）
结论
我希望我已经说服您Sprite Sheets是前进的方向-节省空间，降低HTTP请求并建立一个更快，更有组织的网站。
至于生成它们的方法，我绝对会推荐“之后”方法，并依靠我们讨论过的一种工具来完成所有艰苦的工作。