css sprite技术 – 减少网站图片请求次数

原创 2015年07月07日 11:15:14

     CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

     对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。加速的关键,不是降低重量,而是减少个数。

     传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

   CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

     优点:减少浏览器与服务器之间的通信次数

              a、一张图片的大小会比很多张分散的图片小

              b、这样可以一次加载完图片,例如做按钮的普通和hover状态时,如果用两张图片,那么在一些浏览器下,hover的时候明显有一个空白再切换图片的过程,而如果合成一张图片,通过background-position就不会有这种问题了。

              c、如果多个css样式都会用到合成的图片,那么最后将它们放到一起来设置它们的背景图片。如div1,div2 { background:url(..); } IE6下不会缓存图片,这样的话就避免了每次读到一个样式的时候都要重新加载同一张图片

版权声明:本文为博主原创文章,未经博主允许不得转载。

前端性能优化的方法和工具,减少http请求的次数和速度

一、前端性能优化的方法和工具 cdn:Content Delivery Network内容分发网络 二、代码优化 cookie:减少cookie大小 css:将样式置顶,避免样式表达式...
  • u012841667
  • u012841667
  • 2016年10月22日 20:44
  • 2679

Web项目性能优化之减少HTTP请求次数优化

本文适合的读者为刚刚毕业,技术实力不是很好,没有考虑过自己编写程序的系统性能的读者。本文简单的介绍了,Web项目中常见的性能问题:请求HTTP次数过多,以及优化的思路。...
  • yangkang029
  • yangkang029
  • 2015年12月05日 15:20
  • 1943

【前端开发】合并多个前端静态资源文件,减少HTTP请求次数

从优化请求静态资源文件(JS、CSS)的角度来说,加载多个文件会发出多次请求,为了解决这个问题,我们可以把多个文件合并成一个文件,现在有一些前端工具可以把多个文件合并成一个文件,这种方式是静态的在发版...
  • itpinpai
  • itpinpai
  • 2016年10月10日 18:16
  • 2900

css sprite图片优化技术

sprite图片优化技术 BY ADMIN · 2013 年 4 月 20 日 当站点中出现了大量的图标、按钮背景之类的东西,直接用img写在页面上是最为笨拙的办法,毕竟为...
  • zhangqinghao9203
  • zhangqinghao9203
  • 2014年04月12日 20:52
  • 710

减少HTTP请求之合并图片详解(大型网站优化技术)

减少HTTP请求之合并图片详解(大型网站优化技术)   一、相关知识讲解   看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的...
  • lihe460186709
  • lihe460186709
  • 2017年03月06日 11:25
  • 693

[大型网站优化技术] -- 减少HTTP请求之合并图片详解

原文地址: http://www.cnblogs.com/it-cen/p/4618954.html 一、相关知识讲解   看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加...
  • lmjy102
  • lmjy102
  • 2017年04月11日 10:50
  • 352

减少HTTP请求之合并图片详解(大型网站优化技术)

http://www.cnblogs.com/it-cen/p/4618954.html 一、相关知识讲解   看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度...
  • wjy397
  • wjy397
  • 2015年12月15日 08:43
  • 481

减少HTTP请求之合并图片详解(大型网站优化技术)

一、相关知识讲解  看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,...
  • qilixiang012
  • qilixiang012
  • 2015年07月04日 10:00
  • 627

减少请求最有效方法:CSS Sprites 图片合并技术

假如我们想截取高100px 宽800px 中X坐标:200px,Y坐标:0px;Width:20px;Height:20px;图片名称:1.gifbackground:url(1.gif):导入图片 ...
  • isea533
  • isea533
  • 2012年02月15日 21:28
  • 3431

自己写的一个png图片按钮效果,用css sprite,支持ie6

  • 2013年05月30日 20:20
  • 14KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css sprite技术 – 减少网站图片请求次数
举报原因:
原因补充:

(最多只允许输入30个字)