高性能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个在线压缩图片的网站，

该网站在不影响原图片的质量下去掉图片中一些元数据，所以可以放心使用该网站进行压缩，

但这个压缩比例也是比较有限的。

二、合并图片和拆分图片

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) ; }   
  
  
              span style="color: rgb(128, 0, 0);">style >   
  
  
             span style="color: rgb(128, 0, 0);">head >     
  
  
             body >   
  
  
                v:image  src ="image.png"   />   
  
  
             span style="color: rgb(128, 0, 0);">body >   
  
  
           span style="color: rgb(128, 0, 0);">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;  
  
  
  };

原文链接:http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html

系列文章：

高性能WEB开发之Web性能测试工具推荐

高性能WEB开发之HTTP服务器

【编辑推荐】

探索移动Web网页编码设计
分享31套精美的Web和手机开发UI素材包
Web设计师：网页设计如何自学成才
Web开发者不能忽略的10个设计元素
Web开发人员必收藏的常用速查手册

名称栏目：高性能WEB开发之图片篇
链接地址：http://www.shufengxianlan.com/qtweb/news34/58934.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容