制作css sprite图片用什么工具好?我看到很多门户网站的cssSprite背景图都很整齐。

html-css024

制作css sprite图片用什么工具好?我看到很多门户网站的cssSprite背景图都很整齐。,第1张

Css Sprite Tools

下载:onlinedown.net/soft/100396.htm

解决PNG兼容问题可以用,PNG-8 格式对于小图标影响不大。

CSS sprite 可以减少请求数、图片的总 size 和提前加载图片,但大图片合并可能导致页面显示速度变慢,如果搭配不合理也可能令图片失真。好多年前,我还不知道这玩意儿叫 CSS sprite 就写过一个相关文章:http://www.neoease.com/merge-icons-into-single-one/,现在这里算完善和补充。

减少请求数

果图片量很大,可以有效提升页面加载速度。因为一般浏览器会有一定的并发上限(如:IE9 的默认最大并发数是

6),也就是进入页面渲染阶段可以同时连接上 6 个资源同时下载。如果现在有 40 个图片,那需要经过 6 轮下载才能完成,假设每个图片下载耗时

150ms,那么需要 1 秒左右才能下载完。如果将这这些图片合并,搭配合理、网速正常的情况下也不会超过 200ms。

图片总 size

首先,不做压缩的情况下实在减少不了多少图片的体积,对于 PNG-8 或者 GIF 或许可以将体积挤压掉较多,但因为图片本身不大基本上对网络没有消耗,可忽略不计。

提前加载图片

CSS

sprite 除了为性能提供利好,还是一个强大的功能,可以用来提前加载需要的图片。这里有个经典的案例:链接有两种状态,如果不使用 CSS

sprite,hover

状态用到的图片会在鼠标移动到链接上方才去下载,短时间图片缺失,体验不佳。这种场景下,可以将链接多种状态用到的图片合并在一起,那么在链接状态切换时

就不会有暂时缺图的情况。

不建议大图片合并

如果将大图片进行 sprite 处理,可能会适得其反,因为较大的图片对网络资源有一定的消耗,本来应该尽快显示的内容必须等到合并在一起的其他图片下载完才能显示,会导致打开页面时局部图片缺失。

建议类似图片合并

建议将文件类型相同并且颜色重叠度高的图片进行合并,一方面可以尽量减少体积。另一方面,因为图片使用颜色限制(PNG-8 和 GIF 最多 256 色),太多的颜色可能导致图片失真;对于 JPG 类图片,也可能因为图片过大而压缩导致失真。

总结

回归到楼主的问题,答案是:当图片数量较多,而且搭配合理的情况下,可以有效地提升网页速度;另外,借助 CSS sprite 的特性可以进行图片提前加载处理。

1、将用到的背景图片压缩为zip格式的压缩包

2、用Css图片拼合生成器将其拼合成一张图片,然后下载该图片

3、拼合完成后会生成相应的Css规则,该文件定位了每个图片的位置及图片的宽度和高度

4、在Css样式中定位背景图片!