• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    高性能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;
    };
    您可能感兴趣的文章:
    • android图片压缩的3种方法实例
    • android bitmap compress(图片压缩)代码
    • PHP实现图片压缩的两则实例
    • C#图片压缩的实现方法
    • java实现文件上传下载和图片压缩代码示例
    • Java 图片压缩实现思路及代码
    • Android图片压缩上传之基础篇
    • css js 图片压缩批处理命令(基于YUI Compressor)
    • Android中3种图片压缩处理方法
    • java图片压缩工具类
    上一篇:高性能WEB开发 web性能测试工具推荐
    下一篇:高性能WEB开发 为什么要减少请求数,如何减少请求数!
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    高性能WEB开发 图片压缩篇 高性能,WEB,开发,图片,压缩,