CSS精灵图像的最佳实践

Question

在构建css图像精灵时，我正在寻找一些最佳实践和提示。 问题： 考虑一个包含大量图像的网站：

1. 我应该将一个大小相同的图像分组并放在一个png中吗？
2. 什么是可接受的精灵图像大小？是否建议制作不同的精灵图像，而不是一个巨大的文件？！
3. 是否有任何精灵图像中的图像数量建议？！
4. 如何在精灵图像中放置和对齐图像会有什么不同吗？我只是在http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340找到提示（保持图像有组织，它会更易于维护），但这是唯一的原因

如果有帮助： 我使用罗盘精灵实用程序，它会自动将图像文件夹转换为一个png文件，并为其创建一个css文件。图像自动对齐

Answer 1

我应该将一个大小相同的图像分组并放在一个png中吗？

虽然迈克尔对使用图像分组图像有一个很好的观点，但您可能还需要记住，最佳精灵尽可能少的空白。保存文件请求非常棒，但您不希望加载一堆未使用的像素。

什么是可接受的精灵图片大小？是否建议制作不同的精灵图像，而不是一个巨大的文件？！

想象一个带有huuuuge图标，按钮和其他图形元素集合的网站。现在，您将所有这些元素放在一个精灵中，因为您知道，请求数量少，而且全部都是。精灵是5MB大。

访问者进入页面，开始加载。文本出现，但您仍在等待Megasprite下载。根据文件大小和互联网连接，访问者必须等待很长时间才能使站点的关键（导航）元素可用。

对于一个简单的网站，一个精灵会做，但是当事情变得更精细时，使用几个精灵可能是有益的。此外，在维护时将所有图像放在一个精灵中是臀肌的一种痛苦（尽管自动化有很大帮助）。总而言之，巨大的精灵是糟糕的精灵。

如何在精灵图像中放置和对齐图像会有什么不同吗？

不是真的。但是你应该记住一些事情。首先，您希望精灵尽可能紧凑;较少使用的空间越好。但是，这可能会迫使你在CSS中做一些荒谬的细致定位。如果您愿意手动设置每个元素的背景位置没有问题，但没有人会责怪您作弊并使用更容易使用的位置。

还有一件事

你考虑过使用SVG精灵吗？文件大小小，每个分辨率都非常流畅和清晰。 CSS Tricks上有很好的文章here和here

Answer 2

问题1：

根据我在大型移动服务提供商网站上工作的经验，将图像组合在一起当然是一个好主意，但可能更好地按逻辑分组，它们所属的项目的哪个组件或部分，而不是大小。所以我会将精灵组成边框（边，圆角等）或背景图像。

这将使它们在开发过程中更易于查找和维护。

另一方面，如果您正在制作游戏并且已经创建了所有图像（例如64个动画角色图像），您可以将它们全部粘贴在一个文件中。

希望这有帮助。

迈克尔

Answer 3

什么是CSS Sprites？

CSS Sprites是一种将整个网站中使用的多个图像组合成一个大图像的方法。然后，您可以使用正确的背景位置CSS属性，使用X和Y坐标从CSS Sprite加载所需的特定图像。 CSS Sprites和网站性能

很多人都认为减少图像文件大小并单独加载每个图像会更快。事实并非如此，事实恰恰相反。这样做的原因是因为每次发出HTTP请求（无论是HTML代码还是CSS代码），实质上都会创建一个必须发生的连接才能完全加载给定页面。因此，例如，如果您有一个包含16个背景图像的页面（在您网站的CSS文件中引用），这意味着为了加载该页面，必须为每个图像发出16个单独的HTTP请求。更不用说必须为样式表，JavaScripts等提出任何额外的HTTP请求。

通过将所有16个背景图像组合成一个大的CSS Sprite，网站只需要建立一个HTTP连接而不是16个单独的连接。这也意味着任何时候需要动态加载图像（即翻转图像），由于已经作为单个CSS Sprite文件的一部分加载了图像，因此图像已经加载而没有任何延迟。

因此，您不仅可以通过减少连接数来大幅提高性能，还可以通过使用CSS图像预加载来利用CSS Sprites。 如何制作CSS精灵

在创建CSS Sprites时，您有两个选择。如果您对Adobe Fireworks或Adobe Photoshop等照片编辑程序足够熟练，那么创建CSS Sprite就没有问题。对于那些不熟悉这些程序的人，我们建议使用SpriteMe。 SpriteMe是一个书签。将它添加到书签栏后，您只需访问任何网站并单击SpriteMe书签。然后，SpriteMe将在屏幕右侧打开覆盖图，显示您需要的所有内容。您还会发现SpriteMe网站上有一个演示版，它将极大地帮助那些不那么知识渊博的人。

以下是CSS Sprite的示例（这是在Adobe Fireworks中创建的）：

CSS精灵示例

以上是CSS Sprite可能的样子。请记住，有很多不同的方法可以做到这一点。有些人喜欢在每个图像之间留出1个像素的空间，只是为了提供一些空间。其他人喜欢在图像之间留下大量空间。您还会发现一些人喜欢将行堆叠在一起的行，以最大限度地利用空间。最重要的是，确实没有错误的方法。因此，正如所说的那样，考虑上面的例子就是一个例子。

实施CSS代码

现在你已经完成了CSS Sprite的制作，现在是时候深入了解细节并将CSS代码放到适当位置，以便我们可以实际使用CSS Sprite。对于我们的示例，我们将使用上面的CSS Sprite，并向您展示我们如何使用此帖子底部的评论表单上的“提交评论”按钮。

 #commentform input[type=submit] {
width: 122px;
height: 26px;
border: 0px;
background-color: #FFFFFF;
background-color: #FFFFFF;
background: url(/images/btn-sprite.png) no-repeat 0px 201px;
 }

 #commentform input[type=submit]:hover {
cursor: pointer;
background-position: 0px 175px;
  }

基本上，在代码中使用CSS Sprites的技巧是你从CSS Sprite引用X轴和Y轴。在这种情况下，CSS代码使用background属性，引用图像URL，最后解决X和Y轴，两者恰好是0px。

按钮的悬停版本不必引用背景图像URL，因为它已在上面引用过。相反，您只需将Y轴更改为175px即可反映按钮的悬停状态高于按钮的非悬停状态。

我意识到这可能最初会让人感到困惑，但我保证，一旦你玩弄它，你会发现它实际上非常简单。如果所有CSS Sprite图像都对齐到左侧，则Y轴始终保持为0像素。这是我们倾向于将图像全部对齐到左边的一个原因，因为它需要大量的猜测工作。鉴于在这种情况下你的Y轴总是相同的，唯一会改变的是你的X轴。因此，如果非悬停按钮在Y轴上为0像素，在X轴上为201像素，则其上方的悬停按钮将在Y轴上为0像素，在X轴上为175像素。