为什么不用sprite较大的图像作为页面内容？

Question

对于使用CSS sprites进行图像时，典型的经验法则是，您应该只对较小的图像（如图标）执行此操作，并且实际图像内容应始终通过<img>元素表示。 我的问题是：为什么？对于内容图片来说，spriting的优势是否也值得？

我读过的一个原因是允许使用alt文本，在语法上更正确并且屏幕阅读器可以访问。然而，当这是一个问题时，难道你不能轻易地使用一个微小的透明图像与精灵上面的所有语法糖，呈现真实的视觉内容吗？

Answer 1

你可以，但是：

1. 内容图片不像图标那样重复使用UI类型的图像。想象一下一个报纸网站：如果他们在每个故事中使用的每个内容图像都是精灵的一部分，那么精灵很快就会变得庞大，即使是只看过一个故事的用户也会下载。

2. 网站内容通常由不懂CSS的人维护。期望内容编辑器编辑主精灵图像文件，重新保存为JPG，并弹出一些CSS只是为了将图像放在页面上，这有点不合理。

3. 如果你精灵很多大图像文件，精灵文件会变得非常大。当用户第一次访问该页面时，下载可能需要花费不可思议的长时间，否则可能会耗尽过多的带宽，而这些用户最终只能看到该精灵中的一个图像。

显然，这些都是概括性的 - 在特定情况下，更精细地拍摄更大/更多内容的图像可能是完全合理的。

使用带有微小透明图像文件的<img>标签用于精灵时，您可以对任何精灵图像执行此操作 - 它通常可用于剪切和定位精灵图像超出background-position允许的范围。 / p>

Answer 2

我能想到的另一个原因是搜索引擎;如果您的图片包含描述性alt标记或带有figure的{​​{1}}元素，搜索引擎将能够查找，分类并显示它。

Answer 3

精灵通常用于静态内容（许多页面上常见的图像）。 内容图片通常只出现在一个页面中，因此您无法将其添加到精灵文件中。

如果你想要实时精灵生成，使用你的所有图片制作自定义精灵文件，我认为生成成本比它保存的重复HTTP调用要昂贵得多。

精灵在这里是为了保存HTTP请求，但你不应该浪费服务器端的计算时间来制作它，也不应该在你的精灵文件中放置昂贵且无用的图片。

Answer 4

Sprites应该用于整个网站的常见图标，而不是用于特定于页面的内容。当您使用精灵拍摄大图像时，会浪费很多白色空间。

根据http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/，这也是一个问题：

  

另一个（但不那么重要）缺点是如果使用精灵   页面使用许多中存在的整页缩放功能进行缩放   浏览器，浏览器可能需要做额外的工作来获得正确的   这些图像边缘的行为 - 基本上是为了避免相邻   精灵中的图像来自“泄漏”。这不是问题所在   小图像，但对于较大的图像可能会受到影响。

Answer 5

精灵用于减少对服务器的请求量。许多小请求的影响正在减慢服务器的一个以上的更大请求。但是如果精灵的形象，我喜欢称它为精灵图，太大了，它也会减慢性能。另一件重要的事情就是让你感到遗憾的是，每张图片都有可能为搜索引擎提供一些名称，管理和索引。

Answer 6

从我继续研究的这个问题来看，另一个潜在的问题是内存消耗。尽管精灵可以被压缩到足以快速下载，但是它们填充在客户端机器的内存中的足迹是在浏览器渲染它们之后，这意味着它可能非常大，即使对于文件尺寸相当小的精灵来说也是如此。

我还没有看到关于这个内存占用量是否大于加载相同数量的没有精灵的图像时的内存占用量的确定答案。我将在未来几周测试提示这个问题的项目，所以一旦得出结论，我将返回并更新这个答案。