图像精灵背后的想法是什么,如何接近它?

Far*_*ruz 7 css image sprite

你如何在css中使用图像精灵?

我应该把我网站上的所有图像合并到一个图像精灵中吗?这真的有益吗?

维护这些图像并在以后更改它们有多难?

Oli*_*Oli 8

我应该把我网站上的所有图像合并到一个图像精灵中吗?

当然不是.你太过于字面意思了.

我发现精灵最适合用于类似图像的组.例子包括:

  1. 图形按钮的所有状态
  2. 图标的状态
  3. 背景的所有排列(除非需要平铺两种方式)

这真的有益吗?

如果你在繁忙的网站上有很多,非常.它保存了对每个映像的请求,节省了用户时间,并为服务器节省了大量并发连接.

维护这些图像并在以后更改它们有多难?

如果你在逻辑上使用它们,那很简单.如果您需要添加其他导航项,则打开导航精灵并展开它.对于像导航这样的东西,它实际上可以更容易维护,因为您在同一文档中就像在您旁边进行比较一样.

编辑,看过一个更极端的例子,我会补充说,我永远不会那么远,因为:

  • 这是60k下载.虽然不是很大,但在连接速度很慢的情况下,在任何显示之前必须下载60k.如果您的所有可视资产都被束缚,则可能会使加载时间变得更长.

  • 你的CSS变成了一个荒谬的混合background-position命令.如果你想进行更改,你必须回到精灵并测量一切.一次又一次.

  • 如果你需要在精灵的左上角放大一些东西,上帝就会怜悯你的灵魂.你可能只是在当前的sprite下添加一个新的sprite.

  • 这可能会导致臃肿.实际上,加载所有这些图像可能会加载一些用户永远不会真正看到的大量材料.加载未使用的数据可能比连接开销更糟糕(考虑多个廉价服务器或CDN可以轻松地提供静态内容)

其他例子更简单,更有价值(IMO).


Sam*_*son 5

精灵是减少图形加载时间的有效方法(有时),总是一种减少对服务器的请求的方法.一般来说,他们可能会采取一些严肃的计划,因为您不是只想将一堆图像放到画布上并导出为jpeg.我建议你研究亚马逊等大公司目前使用的一些精灵.了解他们如何布置他们的元素,以及他们甚至考虑在精灵中使用什么类型的图像.

您还需要评估您的网站,并确定您是否可以成功实施它们.如果您不打算开始使用它们,则可能需要进行大量的反向跟踪和更新以准备它们.

  1. 亚马逊精灵
  2. 易趣雪碧
  3. Current.com雪碧(哇)
  4. 谷歌