8 回答
它减少了 HTTP 请求的数量,从而提高了站点性能。
CSS Sprites 是减少图像请求数量的首选方法。将您的背景图像组合成一个图像,并使用 CSS background-image 和 background-position 属性来显示所需的图像片段。
CSS sprite 可以节省时间,因为它可以节省服务器请求,因为服务器请求非常耗时。使用 CSS 精灵通常会显着减少网页的加载/渲染时间。有时它们无法使用,例如背景图像在二维中重复,但是当您可以使用它们时,几乎总是值得付出努力。
当然,您不应该对非常大的图像组进行精灵化,尤其是在它们不太可能被显示的情况下。不要将整个照片库拆分成一张大图,例如 =)
其他几乎相同的措施是将您的脚本和样式缩小、压缩和组合成一个 js 文件和一个 css 文件。
编辑
关于您的说明,我会说不,与仅使用单独的图像相比,CSS 精灵总是意味着更多的工作,而不是更少的工作。我仍然全心全意地支持他们的使用,tho =)
CSS sprite 最适合用于具有固定宽度和高度的元素。否则,您的精灵图像中需要大的空白空间,这可以(取决于文件类型)稍微增加大小。
由于不同文件格式压缩图像的方式,有时 CSS sprite 图像的文件大小会明显小于单独图像的总文件大小。这是一个不错的奖金。
如前所述,精灵减少了 HTTP 请求开销,这有助于加载时间。我从未见过任何关于这种影响程度的数字。
Sprites 将为您的 CSS 开发人员增加一点时间。它不应该影响你的设计师。但请记住,您的开发人员只需对网站进行一次编码;每次有人查看该网站时,精灵的好处都适用。
它只会减少请求的数量,但这对服务器和客户端都有好处。服务器将不需要处理尽可能多的请求。客户端,因为它可以发出的并行请求数量有限,渲染速度会更快,因为它之前对图像的许多“请求”将从其缓存中提供,从而允许它发出它确实需要更多的请求方便。
使用 sprite 减少了请求的数量,从而也减少了网络开销。即使图像数据与单个图像相同(甚至更多),加载一些精灵图像也会更快并且使用更少的带宽。
它需要更多的工作和一些计划将单个图像组合成精灵集合图像,因此开发时间有点长。如果您在计划中开始使用它而不是之后组合单独的图像,则差异会更小。
任何有多个相同大小的背景图像相互替换(或相互补充)的场景都是精灵的理想选择。
只要后面有动态的photoshop PSD文件之类的东西,那么设计师的维护就不成问题了。但如果它是像 PNG/GIF 这样的静态文件,那么维护将需要更多时间,因为您无法再单独控制单个图像。
总的来说,精灵是一个好主意。将其用于不太可能频繁更新的固定宽度和高度图像。
Sprites are always good to use. They help speed up the loading of web pages and prevent the blinking effect on navigation hovering.