我最近开始使用图像精灵，它们绝对有助于减少http请求。但是，在某个点上，这是否成为了不良实践呢？
特别是在需要添加大量额外标记来支持它们的情况下，例如使用它们作为列表项目符号，我必须添加两到三个额外的span来使所有内容对齐等。
还有一个令人烦恼的问题是，您无法使用重复的图像，因此总是要在一个大图像作为精灵的一部分或者一个小的1像素图像用于重复下载。
我真的很想听听对这两种情况的意见以及使用精灵时的任何其他一般考虑事项/指南。
CSS - 过度使用图像精灵
4
- David
2
你应该展示一些代码以更好地理解你的观点。 - morgar
1你可以使用重复的图像，但是你不能在同一个精灵中同时使用水平和垂直重复的图像。 - user578895
3个回答
2
它们经常会引起移动设备的性能问题。我不确定原因（从未深入研究过此问题），但我认为这是因为移动Webkit在页面上的每个实例中加载相对较大的图像的新副本到内存中。由于移动设备通常只有非常少量的RAM，它很快就会导致页面变慢。
我以前遇到过这个问题，在同一页上有约300个“图标”精灵，每个精灵图像包含大约50个不同的图标。返回到每个图标一个图像（或2-3个悬停状态）的“正常”方法解决了这个特定页面的性能问题。
此外，许多浏览器（移动和其他）通常在您略微调整页面内容大小时（例如在浏览器本身上使用“缩放”）不会完全尊重精灵的裁剪。您通常会看到要使用的那个精灵旁边的小块。
至于您的项目符号示例，您永远不应该需要超过一个额外的div/span。您将在上设置
话虽如此，我经常使用精灵因为它们很方便，但要注意一些问题。通常，我有
我以前遇到过这个问题，在同一页上有约300个“图标”精灵，每个精灵图像包含大约50个不同的图标。返回到每个图标一个图像（或2-3个悬停状态）的“正常”方法解决了这个特定页面的性能问题。
此外，许多浏览器（移动和其他）通常在您略微调整页面内容大小时（例如在浏览器本身上使用“缩放”）不会完全尊重精灵的裁剪。您通常会看到要使用的那个精灵旁边的小块。
至于您的项目符号示例，您永远不应该需要超过一个额外的div/span。您将在
margin-left，并在其创建的空白空间中定位您的“项目符号div”。话虽如此，我经常使用精灵因为它们很方便，但要注意一些问题。通常，我有
sprites.png，sprites_h.png和sprites_v.png用于水平和垂直重复的片段。- user578895
0
编写两个简单的测试页面，其中一个使用精灵图，另一个不使用。使用类似http://www.webpagetest.org/的工具在几个不同的浏览器中测量性能。一旦您获得了数据，就可以做出决策。
- Rich Bradshaw
0
我会按相关元素将精灵分成不同组，例如导航和内容相关的精灵，这样你就可以从精灵中受益，并在代码中保持逻辑顺序。不要忘记可读性和易理解的代码应该是首要任务（特别是在 CSS 中，它可能会变得非常混乱），除非你正在处理一个像 Google 这样的大型项目。
- arturopuente
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接