当您编码一个全新的网站时，我认为这是一个非常高效的工作流程，用于处理 CSS 雪碧.
- 完全忽略雪碧。使每个背景图像成为其自身的独立图像，并在 CSS 中进行相应的引用。
- 当您相当确定设计已“完成”时，使用 SpriteMe 书签小工具创建雪碧。更新：SpriteMe 页面已失效，但我已 在此处存档了工作版本.
- 将 CSS 中旧的背景属性注释掉（不要删除），并添加新的基于雪碧的版本
#logo { /* background: url(images/logo.png) no-repeat; */ background: url(images/sprite.png) -10px -579px no-repeat; } - 不要担心注释会使您的 CSS 膨胀，您应该 压缩您的 CSS，然后再在实际网站上提供服务，这样会删除这些注释。
现在，如果您发现自己需要更新雪碧中的图像，则过程可以是
- 更新单个图像。
- 注释掉雪碧的 CSS 背景图像并取消注释常规背景图像
- 使用 SpriteMe 重新制作雪碧，替换
- 再次交换注释
有人抱怨使用雪碧会使更新图像变得更加困难。我认为此过程使它变得容易得多。我认为一个更简单的过程是拥有一个雪碧的 PSD，这样您就可以直接更新它，而无需触碰 CSS。如果您能够做到这一点，那就太好了。我个人感觉拥有单个图形更加井井有条。SpriteMe 还会为您提供带有所有雪碧位置的 CSS，因此，如果您需要更改图像的大小或添加/删除图像，您将自动获得这些新数字。
如果您有自己的雪碧工作流程，请分享！
相关： 设置对角线雪碧 相当聪明。这样，您可以将雪碧用作更大框的背景图像，而不必担心雪碧中的其他图形显示出来。这样做会因为额外的空白而导致雪碧文件大小更大。
关于编辑雪碧：如果您无论如何都有单独的背景图像，您可以轻松地编辑这些图像并将它们插入到雪碧中，替换旧版本，然后重新保存。除非您要更改大小。
“……您应该在实际网站上提供服务之前压缩您的 CSS。”
在我看来，这并不是人们应该做的事情。相反，提供 GZipped 文件并保持可见性。从开发人员的角度来看，我更喜欢这样做。
为什么不两者都做呢？或者您是否有任何证据表明这无效？我曾经同意这一点，因为我喜欢提供可查看的 CSS。我认为这个网站特别适合这样做。但我后来发现，当查看其他人的东西时，CSS 更常被查看，通过 Firebug 或 Web Inspector 之类的工具，实际 CSS 文件的格式如何并不重要。
说得好！
我做的第一件事是右键单击查看页面源代码……
有没有办法解压缩 HTML/CSS 文件以便可以阅读？
@Tom
您可以复制并粘贴到此处
http://www.codebeautifier.com/
您还可以将您的文件缩小为类似 style-min.css 的东西，并让 style.css 保持在线。
如果可能，压缩并使用 gzip。网站的成功远远比让其他人获得可读的源代码体验更重要。
如果用户确实需要阅读代码，Web Inspector 会使其变得可读。
我同意将其压缩并使用 gzip 提供服务。
谢谢 Chris！
您知道，最好使用对角线雪碧，而不是 SpriteMe 生成的雪碧吗？
只有在您需要将背景图像应用于比图像本身更大的区域时，才会使用对角线雪碧。如果您经常遇到这种情况，请尝试一下。并且一定要阅读链接文章以了解详细信息。
我不明白对角线雪碧
1. 容器太高？是的，可以解决这个问题。但水平雪碧也可以解决。
2. 容器太宽？是的，可以解决这个问题。但垂直雪碧也可以解决。
3. 容器太高或太宽？是的，可以解决这个问题。
4. 容器太高和太宽？不能解决这个问题。
如果您已经知道要面临的问题，则可以通过其他方式更轻松地解决问题（并节省文件大小）。就我个人而言，我很少遇到“太高或太宽”的问题——如果某些东西不是固定尺寸的，那么我不一定知道两个维度中的哪一个将是确定的：可能是太高或太宽，在这种情况下，这根本没有太大帮助。
所以究竟是什么问题？
我认为它确实可以解决这个问题。例如，如果雪碧位置位于框的左上角，则该框可以无限宽和无限高（向右和向下），而不会显示该雪碧中的另一个图像部分。当然，这取决于框中的位置和您选择的对角线。如果您想将雪碧放在右上角，则需要反转雪碧布局的角度。
嗯……我明白了。
我并没有考虑将图像放置在角落（现在您提到这一点），虽然这可能是雪碧最常用的位置。
好吧，我的世界现在一切都好。: )
谢谢
对角线雪碧很有趣，但不仅仅是文件大小会增加，还有内存使用量会增加。
http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/
“CSS 雪碧最大的问题是内存使用量。除非雪碧图像构建得当，否则您最终会浪费大量空间。我喜欢的示例来自 WHIT 电视网站，他们使用此图像作为雪碧。请注意，这是一张 1299×15,000 PNG。它压缩得很好——实际下载大小约为 26K——但浏览器不会渲染压缩的图像数据。当此图像被下载并解压缩时，它将在内存中使用大约 75MB（1299 * 15000 * 4）。如果该图像没有任何 Alpha 透明度，这可能会优化为 1299 * 15000 * 3，尽管通常会以渲染速度为代价。即使这样，我们仍然要谈论 55MB。该图像的绝大部分都是空白的；那里没有东西，没有有用的内容。仅仅加载 WHIT 的主页面就会使浏览器的内存使用量增加至少 75+MB，仅仅因为那个图像。”
当然，雪碧网站非常离谱，但它说明了这一点。
非常有趣的东西，特别是关于 26k 图像使用 75MB 内存。
data URI 怎么样？有人尝试过吗？我正在考虑，但想了解更多信息。
我在这里有一些关于此的信息
哟，我一直读到关于使用 data:uri 的优点。想法？如果它们真的比其他方法好，我肯定会改用它们，但我喜欢雪碧，也不想停止使用它们。
Nicholas Zakas 有关于 Data URIs 的一些很棒的信息
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
@albert，
data:uris 通常是一个更好的解决方案。Nicholas Zakas 提到的两篇文章值得一读（我认为他还有一个项目可以为您编译 data URIs）。
我想不出任何雪碧比 data:uris 更好的情况。如果任何大量的流量跨越海洋，这尤其如此。
保存一个。
jQuery 的 ThemeRoller 提供了反例。它们为图标和展开三角形生成图像。您最多可以有 5 或 6 种不同的图标颜色。通过将单一颜色的图标放在单个雪碧中，您可以获得非常高效的 CSS。
问题是 ThemeRoller 是设计为使用雪碧来创建图标的。如果您只是遵循 Chris 的工作流程，data uris 可能是更好的选择。
仅供参考
这与我自己的雪碧工作流程类似，但我感觉最耗时的部分是处理重新制作的雪碧。我不仅要为新图像添加 CSS，还要调整雪碧中每个图像的 CSS。
我很想尝试 Photoshop 的技巧，虽然这样可以节省更新精灵图的时间，但我肯定会失去 SpriteMe 在精灵图创建时节省的大量时间。
在将所有精灵图源图像放入一个 PSD 中时，为什么不直接使用智能对象？编辑将保留在各个文件中，但精灵图的最终布局将被保留。
当然，如果任何内容发生尺寸变化，这些都不适用。
我想补充 #1 的内容
每个单独的图像都应保存为全质量 24 位 PNG 格式，以避免精灵图生成器进行“双重压缩”。
我并不经常使用精灵图，但当我使用时，我会使用这样的工作流程。之前从未听说过 SpriteMe 浏览器书签。感谢分享！
我开始使用 http://lib.coderizer.ee/spritemaker/ 来制作我的精灵图……真的很好用。
在为多个元素使用精灵图时，还可以考虑在一个块中声明所有使用该精灵图的元素的精灵图图像。例如 -
然后只需在后面为每个元素使用 background-position。这可能会节省一些字节，并使管理精灵图元素更加容易。
不知道是否有人提过，但可以看看这个脚本：http://codecanyon.net/item/css-auto-sprites/85409 它使“精灵图制作”变得容易很多。非常酷
嘿，Chris，
那个精灵图工具是不是会在精灵图上添加很多不必要的空白？看起来效率很低。
我认为它会在每个精灵图之间添加大约 10 像素的间距，这本身就是一种良好的实践。它是垂直进行的，所以如果你有成千上万个精灵图，你可能会做得更好，自己安排网格。然而，“速度”是工作流程的重要组成部分，因此使用大约 30 秒即可完成的自动化工具，还是手工制作可能需要数小时的东西，需要认真考虑。
考虑一下上面相关文章中提到的对角线精灵图制作器。它通过将图像按对角线放置，大大减少了精灵图的高度。
我总是自己制作 *sprite.psd，因为我参与的大多数项目在投入生产之前都会经历很多更改/修改。
此外，这样当客户要求我提供 *所有* 切片（我历来都很难跟上）时，我可以直接提供源文件，这样每个人都会感到高兴和欣喜。
此外，我一直听说水平精灵图加载速度更快，所以我通常将它们布局为将不同的图像并排放置，而相关的图像（按钮状态、自定义表单输入背景等）则垂直放置。
我倾向于为重复 x 和重复 y 图像制作特定的精灵图。
不确定这是否是最好的方法，只是我的习惯而已，伙计。
为了生成精灵图，我使用 SmartSprites (http://csssprites.org/)。它根据 CSS 中的注释生成一个精灵图图像，这些注释说明要将哪些图像更改为精灵图，并输出一个新的样式表（使用精灵图）。在我看来，这比 SpriteMe 或类似工具要好得多。:)
向你最喜欢的浏览器开发人员施压，要求他们实现 -MOZ-IMAGE-RECT!!!!!!!!!!!!!!!!!
使用链接的 CSS 压缩器要小心。它会删除 CSS3 渐变！
我经常使用 spriteme，唯一的问题是它完全忘记了伪类（如悬停和活动）的 background-position 更改……
你是如何处理这种情况的？
我们保留了一个 Fireworks PNG，其中包含所有单独的元素和网格线，位于 img/source 文件夹中，并处于版本控制中。一个垂直精灵图用于图标和其他将水平显示的元素，带安全间距，如果需要，还会有一个水平精灵图用于灵活高度的元素。这样，任何人都可以安全地修改精灵图，并且你可以从 FW 文件中获取精确的位置信息。