Css 为什么不精灵较大的图像是网页内容？

在图像中使用CSS精灵时，典型的经验法则是，您应该只对较小的图像（如图标）使用CSS精灵，并且实际的图像内容应该始终通过

元素来表示我的问题是：为什么？spring的优势不也值得用于内容图像吗

---

我读过的一个原因是启用

alt

文本的使用，使其语法更正确，屏幕阅读器更容易访问。然而，当这是一个问题时，难道你不能简单地使用一个微小的透明图像，将所有的语法糖放在呈现真实视觉内容的精灵上吗？

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

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

sprite用于保存HTTP请求，但您不应浪费服务器端计算时间，也不应在sprite文件中放入昂贵且不可用的图片。

您可以，但：

内容图像不像像图标这样的UI类型图像那样经常被重复使用。想象一下一个报纸网站：如果他们在每个故事中使用的每一个内容图像都是一个精灵的一部分，那么这个精灵会很快变得巨大，甚至会被只看一个故事的用户下载

网站内容通常由不懂CSS的人来维护。期望内容编辑器编辑一个主sprite图像文件，重新保存到JPG，然后仅仅为了在页面上放置一个图像而插入一些CSS，这有点不合理

如果您对大量大型图像文件进行精灵化，精灵文件将变得非常大。当用户第一次访问页面时，下载可能会花费不可接受的长时间，或者可能会占用用户太多的带宽，而用户最终只能看到sprite中的一幅图像

显然，这些都是概括——在特定情况下，对更大/更富内容的图像进行精灵化可能非常有意义

---

在为精灵使用带有微小透明图像文件的

标记时，您可以为任何精灵图像执行此操作-它通常用于将精灵图像剪裁和定位到

背景位置

允许的范围之外。

精灵用于减少对服务器的请求量。大量小请求的影响会使服务器的运行速度慢于一个更大的请求。但是如果精灵的图像（我喜欢称之为精灵贴图）太大，也会降低性能。另一件重要的事情是，你可能会担心每一张图片都会被搜索引擎命名、管理和索引。

精灵应该用于整个网站的通用图标，而不是页面特定的内容。当你在大图像上使用精灵的时候，你会得到很多被浪费的空白

根据这一点，这也是一个问题：

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

---

我能想到的另一个原因是搜索引擎；如果你有一个带有描述性alt标记的图像，或者一个带有

figcaption

的

图形元素，搜索引擎将能够找到、分类并显示它。
根据我在这方面继续做的研究，另一个潜在的问题是内存消耗。尽管精灵可能被压缩到可以快速下载的程度，但它们在客户端计算机内存中填充的内存占用是在浏览器渲染它们之后，这意味着它可能相当大，即使对于文件大小相当小的精灵也是如此

我还没有看到一个明确的答案，关于这个内存占用是否比加载相同数量的没有精灵的图像时看到的要大。在接下来的几周里，我将针对提出这个问题的项目对此进行测试，因此，一旦得出结论，我将返回并更新此答案。
缓存比sprite更重要，因为它会影响多个页面上的图像，而不是单个页面上的图像。节省HTTP请求开销确实是sprites的主要好处，但为什么不能将其应用于内容图像以及更通用的站点范围的图像呢？根据页面的不同，这仍然可以节省很多钱！假设服务器计算时间不是问题，因为精灵将由页面设计器生成。我不希望设计者制作与内容相关的精灵，因为它应该是动态内容。一种方法是在页面制作过程中自动生成精灵（精灵地图需要用内容更新）。但是这使得sens只适用于包含大量图片的页面，而且它不会像经典的ui sprite地图那样从缓存中受益。我不想在这里寻找缓存的好处。在合理范围内，无论您是制作精灵还是制作标准图像，这些都适用。我只关心整合大量http请求所带来的节约。谈论缓存的适用性是直截了当的。声明网页的所有内容图像都应该是动态的，这是一个过于宽泛的声明，我不想说。我想说的是，设计和构建网站的人往往与将内容放入网站的人不同。正如Paul D.Waite所说，“网站内容通常由不懂CSS的人来维护”。奥布维