用CSS Sprites让网站再加速

zhiqiangOctober 9, 2007 IT技术

我对于blog的速度有着变态的需求. 网站速度与HTML请求数目有很直接的关系，所以我一直没有在网页上放过多的背景图片——注意这里有个网页加速的小技巧，对于网页上固定位置的图片，应该尽量使用CSS背景图片，而不要用img标签嵌入。

为减少页面上的背景图片数量，嵌入式图片是一个好主意，data: URL scheme可以让你把图片信息直接嵌入在CSS语句中，理论上而言这是最好的解决方案。可惜目前IE不支持！又是万恶的IE。下面是效果图(Firefox有效)：

You see this because you are using IE!

另外一个就是CSS Sprites了，很久以前就见到过，不过操作比较复杂，所以一直没有用。今天，看到一个更详细的介绍，而且Yahoo和Facebook都在用这种方式，见这里和这里。我也决定紧跟一下潮流。

CSS Sprites就是将网页上所有的背景图片都放在一张大图片上，更详细的介绍

在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现......我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

比如本站的所有背景图片已经整合成单独一张，然后通过CSS定义背景：

.bloglines, .zhuaxia, .google, {
    background-image: url(images/b.gif);
}

.bloglines { background-position: 0 -216px; }
.zhuaxia { background-position: 0 -332px; }
.google { background-position: 0 -448px; }

上面这一段代码用同一张背景图片生成了Google，Zhuaxia，Bloglines的订阅图片。效果可见右侧栏的订阅区，与各自指定图片背景效果完全一样。

上面最麻烦的一个地方在于如何生成大图片，利用PhotoShop的Merge功能可以把图片整合在一起，但每个小图片在大图片的位置参数需要一个一个去弄，比较麻烦，但是比较自由。利用CSS Sprites Generator，一切都自动搞定。这个网站支持上传图片的ZIP压缩包，然后生成一张大图片，已经以图片文件名为类名的CSS语句，自动给出每个图片对应的位置。另外还可以设置各个小图片之间的间隔，以适应内容的适度拉伸。

btw，提一下一个APACHE的mod_expires模块，这个模块可以要求服务器缓存制定类型的文件。比如下面的语句(写入.htaccess文件)要求缓存图片, css, js等一个月：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/html A600
</IfModule>

不过似乎deamhost和bluehost都没有这个模块，但阅微堂所在的CPH服务器是有的...

查看更多关于css, CSS Sprites, 缓存, 网站加速, 网页技术的内容。

你可能感兴趣的

At 2007.10.09 17:00, coredream said:

速度的确很快哦！~ 不知道您的模板是否可以分享

[Reply]
- At 2007.10.09 21:42, zhiqiang said:
  
  阅微堂的模板发布过，见这里
  
  不过那个模板发布的时候比较急，而且比较忙，一直也没怎么更新，最好看着点用...
  
  [Reply]
At 2007.10.09 17:03, cosbeta said:

嘿嘿，看来偶还是比较先进的，能尽量一张图片我都用一张图片，然后通过调整位置来实现

[Reply]
- At 2007.10.09 17:07, cosbeta said:
  
  你这里的大图片我也收下了，嘿嘿
  
  [Reply]
- At 2007.10.09 17:54, zhiqiang said:
  
  我去你那里看了一下，没有用到这个技术呀。
  
  现阶段技术上的一个缺点是大图片的合成还是不太方便。那个大图片生成网站生成的图片上小图片之间的间隔都是固定的，导致图片特别长，有2000多px。如果有东西可以手动调整各小图片之间的位置就好了。
  
  [Reply]
  - At 2007.10.10 08:51, cosbeta said:
    
    我blog上没有用，其他地方用的，之前也是看到别的网站这样用才想到这样的好处的，缺点也是明显的，就是设计的时候，position难以计算
    
    [Reply]
At 2007.10.09 18:31, 北极冰仔 said:

貌似也不是新技术了，只不过好像才刚火起来。用了这个方法你这里的图标可以放多些了，呵呵。

[Reply]
At 2007.10.09 18:32, 北极冰仔 said:

PS：你的图标间隔搞太大了，紧凑些体积会更小，不至于大到 8K

[Reply]
- At 2007.10.10 08:52, cosbeta said:
  
  间隔太小不好设置位置，反正有得必有失
  
  [Reply]
At 2007.11.01 13:59, 站客网 said:

您好，这篇文章已经收录在站客网，地址：http://www.zhankr.com/SrcShow.asp?Src_ID=37
继续努力，谢谢！

[Reply]
At 2007.11.02 09:56, 枯の灵 said:

谢谢分享

非常有用的信息哇

[Reply]
At 2007.11.14 22:01, 小试 CSS Sprites 提速 at catch the digital flow said:

[...] CSS Sprites，那么一定要好好这篇文章），紧接着 Zhang-Zi [...]

[Reply]
At 2008.01.21 22:49, 杜海凡 said:

虽然明白原理,但是还是不太好操作..原因是我根本不懂代码!

[Reply]
At 2008.06.03 17:55, CSS Sprites制作实战 - wordpress和blog技术 - jijian91和小z said:

[...] 参考：阅微堂 [...]

[Reply]

« 热烈庆祝WCG2007 PJ战胜IPX，SKY战胜MOON进入决赛

《复兴之路》 »

用CSS Sprites让网站再加速

查看更多关于css, CSS Sprites, 缓存, 网站加速, 网页技术的内容。

14条留言

阅微堂