`
xttifqqk
  • 浏览: 47081 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

浅谈CSS Sprites技术以及图片优化

阅读更多
CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。
  http://www.mjjzz.com/article.asp ?id=735

   关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、 CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张 背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。

图片优化

  一、对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积。 
  二、Photoshop相比起Fireworks,导出同等质量的PNG图片,体积会稍大。而Fireworks虽然做了相应压缩优化,但没有达到最优秀的压缩。 
  三、我所知的设计软件,对于PNG图片的处理都没做到最优秀的压缩,图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。 
  四、图片体积及尺寸方面,建议体积保持在100K以内(较为符合国情最佳请求SIZE),size为800px(最佳尺寸)。(从某权威人事中得知,具体无从考证) 

CSS Sprites图片切割术

  一、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。 
  二、不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。 
  三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。 
  四、size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。
  五、在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。 
  六、在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。
  七、图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。 
  八、区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。 
  九、黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。 

相关的图像优化工具
  网上流传的优化工具繁多常见的如:
  ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。

1、用css切割图片:
目的:
 1).减少连接次数。
 2).在做类似滑动门的时候,避免出现有一段加载的空白间隙。
代码:
background:url(image/bg.png) -10px -20px no-repeat;
2、一个非常有用但不常用的CSS属性.
  a{outline:none;}
分享到:
评论

相关推荐

    css sprites图片背景优化技术

    css sprites图片背景优化技术 ,多个背景在一张图上,提高网站访问效率,减少连接数。

    CSS Sprites技术

    CSS Sprites技术bg2css_v3.2.1

    浅谈CSS Sprites切图技术

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

    CSS Sprites生成工具

    CSS Sprites生成工具

    CSS Sprites 的小工具

    CSS Satyr(CSS 塞特斯)是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。支持批量添加图片/拖动排列/自动生成

    css sprites样式生成工具 3.2.1

    程序名称:CSS Sprites 样式生成工具(bg2css) 主要功能:方便使用CSS Sprites时对图片生成样式 安装条件:需先安装Adobe的AIR环境AdobeAIRInstaller.exe,这个我也传到csdn空间了,可以搜索下!

    CSS Sprites

    CSS Sprites适合新手学习,介绍了怎么将多张图片做成一张图片都,通过CSS来调用

    css sprites技术 CSS Sprites图片切割术与图片优化深入理解

    原来这个叫CSS Sprites技术,主要是个人爱好啦,我对前台这些个东西比较感兴趣,所以会去了解多一点。 废话不多说,直接上我做的小例子: 这是一张多个小背景的图片合并而成的图片,当我们想要在页面上只显示其中...

    css sprites

    css sprites 、css精灵 、css整合小图片工具,可以把网站中的小图片整合成一张图片,减小服务请求次数

    CSS Sprites实例演示 代码

    CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示CSS Sprites实例演示 CSS Sprites实例演示

    CSS Sprites 样式生成工具,快速定位背景图片

    CSS Sprites 样式生成工具(bg2css) 3.2.1 (需要AIR环境,可到 Adobe站点 下载安装。)

    CSS sprites

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

    CSS Sprites实现图片分组动画效果

    CSS Sprites就是可以将许多图片集成在一张大图上,然后利用CSS的图片定位技术将其分割开来。这款CSS3图片效果就是可以将分割完的小图片实现分组的动画效果,我们只需要点击按钮即可切换到相应的分组状态,并伴随动画...

    CSS Sprites样式生成工具.zip

    CSS Sprites样式生成工具.zip

    css sprites把很多小图集成在一张图片上

    css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上

    CSS Sprites简介以及优缺点

    CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是...

    CSS Sprites 样式生成工具(bg2css)

    CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,也就是CSS Sprites(图片合并)技术。

    CSS Sprites工作原理

    CSS Sprites工作原理CSS Sprites工作原理

    CSS Sprites 技巧

    CSS 脚本 整张图片根据位置截取所需图片 背景图片定位 网站优化

Global site tag (gtag.js) - Google Analytics