芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
15

CSS Sprites,图片切割与优化技术

作者 芒果/分类 代码/发布于 2009-05-10 22:59

2005 年的时候 CSS 禅意花园 (CSS Zengarden) 的园主 Dave Shea 对 CSS Sprites 技术的作过详细介绍。CSS Sprites 技术提倡把所有背景图片合并到一个图片文件中,并使用 CSS 的 background-image 和 background-position 属性来定位和调用。

这种方法看似繁琐,但却是非常有实用价值的。

首先,CSS Sprites 能较少 HTTP 请求次数。
我们知道,HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放,每一次调用都会产生 HTTP 请求,一定程度上增加了服务器的负担。而单个背景图的设计方法,只需请求一次即可取回背景图片。很多大型网站,包括雅虎,新浪等,都采用了 CSS Sprites 技术。

其次,CSS Sprites 能防止背景图片延迟加载。
有时在点击以图片作背景的按钮时会发现,鼠标悬停的时刻才会触发浏览器下载背景图片,这是非常差劲的用户体验。但如果将图片存放与单个文件,就能避免延迟加载。因为在打开网页的首次请求中,图片已经加载完毕。

然而,使用单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐,缺乏灵活性。在雅虎开发小组的 YUI 产品中,采用了加大图片距离的方法,同时也增加了图片的体积。

总之,CSS Sprites 有利也有弊。在追求性能的前提下,CSS Sprites 是值得推广的网页设计方法。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-sprites-image-cut-and-optimize-skill/" title="CSS Sprites,图片切割与优化技术" rel="bookmark">CSS Sprites,图片切割与优化技术 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 15 条群众意见

  1. ?
    狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全) /2009-06-18 16:50

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #1
  2. ?
    克兰印象 » 60+CSS技巧教程资源大全 /2009-07-26 11:03

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #2
  3. ?
    60+CSS技巧教程资源大全 | 帕兰映像 /2009-08-18 06:53

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #3
  4. ?
    学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog /2010-01-28 16:51

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #4
  5. ?
    还是再推荐一下这个CSS技巧教程资源大全 | SiteComment /2010-02-25 21:08

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #5
  6. ?
    网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全 /2010-05-08 16:43

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #6
  7. ?
    60+CSS技巧教程资源大全 /2010-05-12 21:58

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #7
  8. 老饕 /2010-08-06 22:58

    呵呵,我要详细学习一下! 回应

    #8
  9. 老饕 /2010-08-06 22:59

    喔~~你那个随机链接用的是评论数吗? 回应

    #9
  10. 芒果老饕/2010-08-07 11:18

    请详细参考 http://mangguo.org/wordpress-random-post-call-code/ 回应

    #10
  11. ?
    学无止境的CSS(xHTML+CSS技巧教程资源大全) | 前端殿堂 /2011-04-29 15:43

    […] CSS Sprites, 图片切割与优化技术 这篇文章不是告诉你什么是CSS Spries,也不是告诉你如何使用CSS Sprites,而是 —— 为什么要使用CSS Sprites? 四,CSS优化我个人对CSS优化的看法是: 在语义化的前提下,对代码进行精简。如果是大型网站,则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。 […] 回应

    #11
  12. 淘宝网女装批发 /2011-08-08 17:49

    我要找的就是这个 回应

    #12
  13. ?
    CSS 前景图片合并技术 | 在路上 /2012-03-05 10:53

    […] 芒果在 CSS Sprites,图片切割与优化技术中介绍过背景图片的合并方法。但不只有背景图片能合并,前景图片同样可以。 […] 回应

    #13
  14. ?
    学无止境的CSS(xHTML+CSS技巧教程资源大全) | 徐福坤,个人博客 /2012-05-19 17:18

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #14
  15. ?
    朝心 » 60+CSS技巧教程资源大全 /2015-10-15 10:58

    […] CSS Sprites, 图片切割与优化技术 […] 回应

    #15

下面我简单说几句