高性能WEB开发 图片压缩篇

 更新时间:2010年05月13日 23:59:16   作者:  
高性能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;
};

相关文章

  • vscode使用editorconfig插件以及.editorconfig配置文件说明详解

    vscode使用editorconfig插件以及.editorconfig配置文件说明详解

    这篇文章主要介绍了vscode使用editorconfig插件以及.editorconfig配置文件说明详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 多种编程语言的常用按键和语法

    多种编程语言的常用按键和语法

    就我所知道的语言来说,在键盘上集中分布跨度更大的语音,通常就是我们所指的丑陋的语言(阅读和编写代码都很困难),例如 shell 和 perl。
    2011-10-10
  • 将git项目导入GitHub的方法(附创建分支)

    将git项目导入GitHub的方法(附创建分支)

    下面小编就为大家带来一篇将git项目导入GitHub的方法(附创建分支)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 提高编程技能的11个建议

    提高编程技能的11个建议

    当你不熟悉编程的时候,你可能会觉得无从下手,并且不知道如何运用学到的知识。只要你通过了这一困难的学习阶段,你就会发现一个全新的世界
    2014-08-08
  • Vscode 打字特效插件Power Mode安装使用介绍

    Vscode 打字特效插件Power Mode安装使用介绍

    本文给大家推荐的是一款Vscode的打字特效的插件Power Mode的安装使用说明,插件非常的炫酷,推荐给大家,希望大家能够喜欢
    2020-02-02
  • 高性能WEB开发(5) 减少请求,响应的数据量

    高性能WEB开发(5) 减少请求,响应的数据量

    上一篇中我们说到了 如何减少请求数,这次说说如何减少请求、响应的数据量(即在网络中传输的数据量),减少传输的数据量不仅仅可以加快页面加载速度,更可以节约服务器带宽,为你剩不少钱(好像很多机房托管都是按流量算钱的)。
    2010-05-05
  • 设计高可用和高负载的网站系统的几个注意事项

    设计高可用和高负载的网站系统的几个注意事项

    随着网站的运营,用户访问量和数据存储量会随着时间发生几何级变化,很快整个系统不堪重负,频繁出现问题。
    2011-06-06
  • UTF-8 BOM 可能导致样式错乱的解决方法

    UTF-8 BOM 可能导致样式错乱的解决方法

    utf-8 是一种在web应用中经常使用的一种 unicode 字符的编码方式,使用 utf-8 的好处在于它是一种变长的编码方式,对于 ANSII 码编码长度为1个字节,这样的话在传输大量 ASCII 字符集的网页时,可以大量节约网络带宽。
    2009-06-06
  • 永久解决VSCode终端中文乱码问题

    永久解决VSCode终端中文乱码问题

    这篇文章主要介绍了永久解决VSCode终端中文乱码问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • transform实现HTML5 video标签视频比例拉伸实例详解

    transform实现HTML5 video标签视频比例拉伸实例详解

    这篇文章主要介绍了transform实现HTML5 video标签视频比例拉伸的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论