Home > Internet > 如何给你的博客提速(4):图片优化
2009June . 13th

如何给你的博客提速(4):图片优化

由于各人对个性的追求,很多博主都喜欢用图片来美化自己的页面,但你知道不好好优化图片,会令页面打开的速度慢很多吗?今天我们谈谈怎么去优化图片。

1、控制jpg图片的质量
由于质量高的jpg格式图片比较清晰,色彩更鲜艳,不少人就用这种图片来美化header,其实这对速度的影响是很大的。因为打开一个页面首先加载的就是header,header加载时间太长的话,很容易使第一次来的访客反感。还有一种情况是页面上的小图标,有些站长过于追求美观,于是页面上的小图标也用高质量的图片来做,这是很没必要的,怎么处理这种问题呢?请看下节。

2、尽量使用gif格式
刚才说到用高质量的jpg图片来做小图标,我个人很不建议这样做,jpg格式在在展示色彩丰富的大图片是效果很好,但做网页图标的话,gif才是最好的格式。因为在展示像素级的细节是,gif的效果比jpg好了不知多少倍。你可以尝试一下,截取一幅含有12px或14px文字的图,分别保存为256色的gif和质量为80的jpg,对比一下文字的显示效果,gif肯定俾jpg清晰很多,而体积却小了不少。所以,在制作小图标或带有小字体的图片时,优先使用gif格式。这里还有说到一个颜色数的问题,gif格式能显示的颜色数量最多为256色,其实对不包含大量色彩渐变的图片来说,已经是非常足够了,因此,在制作颜色比较少的gif时,尝试一下降低颜色数,只要效果能过得去就行了。

3、如何插入装饰性图片
这里要讲的不是简单的用img标签插入图像,用这种方法插入页面小图标等装饰性图片弊端是非常大的。首先,用img标签插入的图片不能通过简单的方法实现变换效果,在这里,美化效果要打个折扣。其次,用img插入的图片,如果图片不在浏览器缓存里,而且不重复出现的话,会大大增加http请求数。因为img标签理论上是出现一次载入一次的。其三,用img标签不利于调整图片位置,如果一个图片,需要在header靠右和footer靠左这两个位置出现两次,你就需要为它写两次css。其四,用img标签插入图片不利于整合,整合图片可以大大减少http请求数,到底整合图片有什么技巧呢?看下节。

4、页面背景图片的处理方法
很多人喜欢用图片做页面元素的hover变换效果,但是却没有把相关的图片整合,导致一些变换效果有事会因为图片载入失败而失色。我们可以把针对某个效果的图片都整合成一个文件,在css里用background-position属性调整图片位置。这种做法的好处是背景只需要一次http请求,图片可以重复调用,也有利于图片变换。看到这里,你知道装饰性图片应该怎么插入了吗?对,用css。

5、插图尽量使用外链
由于服务器性能的限制,一般非独立主机都会限制单ip的http请求数,如果一个页面里http请求太多的话,页面往往要等很久才能完全载入。特别是图片,如果太长时间不能加载的话,浏览器就会断开与服务器的链接,这是就需要在点击一下显示图片才能显示出来。因此我强烈建议各位空间有限、流量有限的站长们,尽量用外链图片来做文章插图。比较好的支持外链的相册有picasa、flickr和国内的yupoo等。这样做不但能减轻服务器压力,节约流量,更重要的是,我不相信大部分站长用的服务器比那些专业的在线相册快。

本文在chinaz发表,欢迎大家去加点浏览量:http://www.chinaz.com/Webbiz/Exp/0613O4U2009.html

  1. 2009June . 13th - 5:08 PM

    原来gif比jpg要好呀

  2. 2009June . 13th - 5:23 PM

    我那个就有点慢了~~ :mrgreen:

  3. 2009June . 13th - 10:45 PM

    但是外链图片 总归感觉不爽的,不是自己的东西。哈哈

  4. 2009June . 13th - 11:09 PM

    外链图片好啊用GOOGLE的~~~

  5. 2009June . 13th - 11:31 PM

    可以试试这个工具,效果不错:http://www.mangguo.org/web-resizer-online-image-cut-compress-tool/

  6. 2009June . 14th - 9:30 AM

    @Showfom
    做小图标之类gif是最好的
    @神兽
    你的是国外空间嘛,建议用google的cnd插件加速一下,其实已经不慢了
    @平平
    图片在你的相册里,怎么会不是你的呢?
    @Brhum
    完全同意

  7. 2009June . 14th - 11:25 AM

    google的cnd插件

    这是什么插件哦??

    另外图片用png,用jpg色差很大

  8. 2009June . 14th - 12:07 PM

    gif好是好,可总是有不尽人意的地方~~

  9. 2009June . 14th - 12:24 PM

    @kerby
    Use Google Libraries,对国外主机加速明显。safari和ie6对png支持的不太好哦
    @安
    所以要根据需要选择最合适的格式嘛

  10. 2009June . 14th - 6:00 PM

    我很喜欢PNG的图,即使是IE6没有透明,我用白色背景也不会受影响。

  11. 2009June . 14th - 6:11 PM

    @LAONB
    ie6可以支持png-8哦

  12. 2009June . 14th - 10:18 PM

    总结的很好,不过yupoo就是个垃圾!

  13. 2009June . 14th - 10:43 PM

    yupoo之前听说不错的,可能为了营收不得以这样吧。博主说的也很好,去试试,嘿嘿,博客速度还是很重要的啊。

  14. 2009June . 15th - 1:56 AM

    外链会快点吗?
    前些时间flickr的外链让我费不少功夫
    现正矛盾

  15. 2009June . 15th - 9:04 AM

    @博译论
    理论上会快点,实际上网络连接速度才是最重要的。我的picasa速度很快哦

  16. 2009June . 15th - 2:55 PM

    他娘的,你和我都使用picasa相册的外链,我的图片老是叉(如果没有缓存都无法显示)

  17. 2009June . 15th - 3:06 PM

    @haven
    不是这么玄吧?你的链接有没有错误?

  18. 2009June . 15th - 9:30 PM

    没用外链,直接上传服务器~

  19. 2009June . 15th - 9:31 PM

    picasa限制是?

  20. 2009June . 15th - 9:46 PM

    @leecay
    总大小1g,每个子相册里500个图片

  21. 2009June . 16th - 1:01 PM

    @bolo 貌似可以考虑一下,毕竟服务器空间和流量都有限制~

  22. 2009June . 16th - 5:36 PM

    这个要好好学习,看来还是外链最好。

  23. 2009June . 17th - 1:14 PM

    我一般用gif,然后是png,但图片很少也就不计较了

  24. 2009June . 18th - 3:00 PM

    我准备图片转出去 就是没找到好相册 :neutral:

Subscriber selector

Close