- 浏览: 285999 次
- 性别:
- 来自: 黑龙江
文章分类
- 全部博客 (151)
- 工具配置 (11)
- 前端技巧 (29)
- 分享 (4)
- action (1)
- ORM (2)
- mysql (17)
- html5 (1)
- java EE (1)
- 数据库理论 (5)
- 密码安全 (2)
- maven (7)
- java (14)
- linux (10)
- 电脑知识 (2)
- spring mvc (1)
- apache (2)
- php (2)
- 分布式 (1)
- memcache (2)
- ActiveMQ (1)
- jetty (2)
- foxmail拒信 (1)
- dos (1)
- eclipse (4)
- mybatis (2)
- tomcat (1)
- shell (0)
- Jmeter (3)
- windows (1)
- redis (6)
- StringUtils (1)
- svn (1)
- jsoup (2)
- zookeeper (3)
- log4j (3)
- git (3)
- solr (1)
- elasticsearch (1)
- 佛祖 (1)
- spring boot (2)
- openldap (0)
最新评论
-
boreas_baosj:
绑定多个事件的时候怎么传递参数呢???
jquery中的bind事件,详解,传参 -
sauzny:
usiboy 写道NIO确实可以提高Socket通讯上的效率, ...
Tomcat并发数优化的方法总结 -
usiboy:
NIO确实可以提高Socket通讯上的效率,但对于JVM的调优 ...
Tomcat并发数优化的方法总结
CSS Sprites 图片整合技术
- 博客分类:
- 前端技巧
把网站中用到的所有小图标整合在一张图片上,减少浏览器对服务器的请求。
当您往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。CSS Sprites(图片整合技术) 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。如下图所示:
美国YAHOO在页面制作中所用到的图片整合技术,这样做虽然需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。
实现方法:
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置,给背景定位。background-position:-8px
-95px;
浅谈CSS Sprites技术以及图片优化
〔背景图整合〕
关于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等。
发表评论
-
js中setInterval与setTimeout用法
2014-01-17 10:01 783setTimeout 定义和用法: setTime ... -
uploadify上传文件
2013-07-16 11:15 2298发现网上很多人写的都好像是旧的方法,好像已经过时了… ... -
js 正则验证
2013-01-16 14:25 908/判断输入内容是否为空 function IsNull() ... -
js对字符串的处理,以及验证
2013-01-16 14:06 1125JS自带函数concat将两个或多个字符的文本组合起来,返回一 ... -
Jquery中bind和live的区别
2012-11-28 13:35 2962Jquery中绑定事件有三种方法:以click事件为例 ... -
(MD)正则表达式中的特殊字符
2012-11-01 14:52 1767字符 含意 \ 做为 ... -
jquery ajax的参数详解
2012-10-31 13:00 1060参数名 类型 描述 ... -
JQUERY的父,子,兄弟节点查找方法
2012-10-31 11:00 44891jQuery.parent(expr) 找父亲节点,可以传入 ... -
jquery的md5插件
2012-10-20 18:24 1123(function($){ var rotate ... -
list-style功能:设置列表项目相关内容。
2012-10-16 15:32 956list-style功能:设置列表项目相关内容。 语法 ... -
JS父页面获取子页面返回值
2012-10-11 16:47 2811父页面<html><head> ... -
对textarea的内容进行详细监听(键盘+鼠标)
2012-09-27 17:56 1159$("#textarea").bin ... -
base64:URL背景图片与web页面性能优化
2012-09-26 18:07 2113一、base64百科 Base64是网络上最常见的用于传输8 ... -
word-wrap同break-word的区别
2012-09-23 15:09 966自动换行word-break:break-all和word-w ... -
Jquery弹出层BlockUI的用法(BlockUI是个插件)
2012-09-18 11:02 2306例子一: <head runat="serv ... -
jQuery中ajax中事件执行顺序
2012-09-18 10:51 9081.ajaxStart(全局事件) 2.beforeSend ... -
CSS2.0无图片实现圆角
2012-09-13 18:49 868CSS2.0无图片实现圆角 -
jquery中的ready和window的onload之间的“藕断丝连”
2012-09-10 03:00 829遇到了一个死循环,经高人指点,置之死地而后生~ -
textarea中的MaxLength属性在ie中失效问题
2012-09-09 17:18 1337代码解决 -
jquery弹出窗口锁屏代码
2012-09-09 17:17 1022还在改进中
相关推荐
论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?”简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。... CSS Sprites 的目的就是通过整合图片,减少对服务器的请
css sprites 、css精灵 、css整合小图片工具,可以把网站中的小图片整合成一张图片,减小服务请求次数
CSS Satyr(CSS 塞特斯)是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。支持批量添加图片/拖动排列/自动生成
css图片整合软件 cssSprites css图片整合软件 cssSprites
CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为...说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用C
CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位...
众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。
CSS Sprites(图片整合技术) 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。想必很多人已经在用这个技术,我给大家简单介绍一下,总结一下我使用css sprite时的一些技巧。 CSS Sprites...
CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. CSS Sprites最适合用来做的, 恩, 比如: 清单导航的CSS鼠标翻转效果 大量小图标集中的...
可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。CSS Sprites 样式生成工具也很不错,但是它只对一整幅图片进行操作的。而我们草根基本上很少有人自己去设计一套图标或UI,一般都是通过网站上收集的。...
可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。CSS Sprites 样式生成工具也很不错,但是它只对一整幅图片进行操作的。而我们草根基本上很少有人自己去设计一套图标或UI,一般都是通过网站上收集的。...
美国YAHOO在页面制作中所用到的图片整合技术,首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位,感兴趣的朋友可以了解下具体的实现方法
可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。CSS Sprites 样式生成工具也很不错,但是它只对一整幅图片进行操作的。而我们草根基本上很少有人自己去设计一套图标或UI,一般都是通过网站上收集的。...
随着网络技术的发展,网速的提升,大家越来越重视页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,因为每加载一张图片都会产生一次浏览器请求数,发起的请求数越多那么页面加载的速度也越...