高性能网站web开发之图片治理 _Web前端

高性能网站web开发之图片管理

一、缩小图片大小

当图片很多的时候，减少图片大小是提高下载速度最直接的方法。
1. 使用PNG8 代替GIF( 非动画图片) ，因为PNG8 在效果一样的情况，图片大小比GIF 要小。
?
2. 用fireworks 处理PNG 图片，在我们产品中很多PNG 图片是美工直接用photoshop 导出的，后来让美工用fireworks 处理PNG( 大概的方式是选择保存为PNG8, 删除背景色) 。处理后100K 的图片大小基本减少了3/4 ，但图片质量也会有少许降低，要看自己是否能接受。

3. 使用Smush.it(http://www.smushit.com/ysmush.it/ ) 压缩图片，Smush.it 是YUI 团队做1 个在线压缩图片的网站，该网站在不影响原图片的质量下去掉图片中一些元数据，所以可以放心使用该网站进行压缩，但这个压缩比例也是比较有限的。

4. 也可使用Java 生成高品质缩略图如：源代码

二、合并图片和拆分图片

1. CSS Sprites 合并图片以减少请求数来提高性能大家都知道。但不要把图片合并太多，太多太大了，就会因为这1 个图片影响这个页面的显示了。

2. 有时候我们需要把1 个大图片拆分成多个小图片，比如产品首页图片比较少，就1 个很大的banner 图片，因浏览器都可以并发下载图片，所以如果不拆分，只使用1 个大图片的话，下载速度反而会比较慢

三、透明图片处理

IE6 不能显示透明的PNG 图片，是很多开发人员特别头疼的事，分别介绍下几种方式的优缺点。

1. 使用AlphaImageLoader ，IE6 支持filter, 使用下面的CSS 代码，可以让IE6 支持PNG

  #some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  }

优点：使用简单
缺点：性能损耗很大,AlphaImageLoader 会花费很多资源去处理透明图片，使用AlphaImageLoader,IE 使用内存会迅速上升。
而且AlphaImageLoader 所有处理都在同1 个线程中同步进行，所以当AlphaImageLoader 多的时候，会阻塞UI 的渲染。
使用_filter ，IE7 也可以识别，其实IE7 是可以识别PNG 透明图片的，如果在IE7 下使用上面代码，IE7 不会直接使用图片，而是使用 AlphaImageLoader 。
注：个人建议尽量避免使用 AlphaImageLoader

2. JS 处理
使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/), 可以很简单的对界面上所有的透明图片进行同一处理。
优点：使用简单( 比AlphaImageLoader 还简单)
缺点：当页面上需要处理的图片比较多的时候，速度也比较慢，而且不能动态改变图片。

3. VML
IE6 支持VML ，VML 可以使用透明图片，代码如下：
修改html 代码头部

<
html?
xmlns
="http://www.w3.org/1999/xhtml"
?xmlns:v
>

??????????
<
head
>
 
???????
<
style?
type
="text/css"
>

????????????v\:*
{
behavior
:
url(#default#VML)
;
}

???????????
</
style>

??????????
</
head
>
? 
??????????
<
body
>

?????????????
<
v:image?
src
="image.png"
?
/>

??????????
</
body
>

????????
</
html
>

优点：性能好，速度快
缺点：使用复杂，而且不支持firefox 等浏览器，需要判断不同的浏览器输出不同的HTML 代码。

四、多域名下载图片

因每个浏览器对同1 个域名同时只能发送固定的请求，比如 IE6 好像是2 个，所以可以对图片资源开通多个域名进行请求，
比如img1.abc.com,img2.abc.com 。但域名不要开启太多，因为解析域名和打开新的连接都需要消耗时间，域名多了，说不定反而会更慢。一般2-4 个域名就够了。

五、IE6 下缓存背景图片

IE6 背景图片缓存是个麻烦事，很多人知道使用下面的 JS 来让IE6 缓存背景图片

try{
     document.execCommand("BackgroundImageCache", false, true);
}catch(e){}

但是这样做的效果并不是非常好，当出现鼠标移动改变背景图片的时候，IE6 老是会发送1 个图片请求( 尽管该背景图片已经下载) ，虽然返回结果是304 ，但还是要花费不少时间。在这种情况下，可以使用下面1 个变通的方式来处理，
在页面上直接使用1 个DIV 元素来加载该图片，这样加载图片就能真正被缓存，鼠标移动也不会发送请求了。

?? ? ? ?
六、预加载图片

使用下面代码可以在页面加载完毕后预加载下1 个页面的图片，当进入下1 个页面就不用再下载图片了。

window.onload=function(){
   var img = new Image();
   img.src = "images/image.png";
   img = null;
};

七、延迟 加载图片

经常上 tudou 网，发现 tudou 首页加载图片的功能很有意思， tudou 首页从 " 娱乐 " 这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了 " 娱乐 " 这个板块，才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。

tudou 的实现原理：

1、先把所有需要延迟加载的图片的 src 都设置成同 1 个小图片的连接 (sprite.gif) ，把真正图片的连接放进图片的 alt 属性中，如下代码：

<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
</a>

2、? 绑定 window.scroll 事件，在该事件里面的重设所有 class 为 lazyImg 的图片的 src 值

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
    默认看到的图片：<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
    <div id="lazyBox" style="margin-top:100px;">
       滑动滑动条才能看到的图片：
       <img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://www.baidu.com/img/baidu_logo.gif" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
       <img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://img1.gootrip.com/gootrip/_20upload/photo/2008-03-07/70525_1.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
  </div>
  <div style="height:1000px;"></div>
  <script type="text/javascript">
      var hasShow = false;
      $(window).bind("scroll",function(){
          if(hasShow==true){
              $(window).unbind("scroll");
              return;
          }
          var t = $(document).scrollTop();
          if(t>50){
              // 滚动高度超过50，加载图片
              hasShow = true;
              $("#lazyBox .lazyImg").each(function(){
                  $(this).attr("src",$(this).attr("alt"));
              });
          }
      });
  </script>       
</body>
</html>

把上面代码 copy 到本地运行下就可以看到效果了。