高性能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;
};
当图片很多的时候，减少图片大小是提高下载速度最直接的方法。
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;
};
相关文章
vs2022使用git同步报错以及解决每次推送要输入密码问题
本文主要介绍了vs2022使用git同步报错以及解决每次推送要输入密码问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要为大家介绍了怎样写commit log记录以及及如何提交有哪些约定，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
我们在使用vscode的时候常会遇见各种问题,下面这篇文章主要给大家介绍了关于vscode终端输出中文乱码问题解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了详解IDEA git分支回退指定的历史版本，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
当一个软件打开一个文本时,它要做的第一件事是决定这个文本究竟是使用哪种字符集的哪种编码保存的。2008-09-09
这篇文章主要介绍了Gitee的下载安装配置及使用,本文通过详细步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要为大家介绍了Vertica集成Apache Hudi的重磅使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-03-03
一些数据库系统或者某些数据表只允许用户添加数据，而不能修改或者删除以往的记录，此时我们就必须在程序进行控制。有些程序员通过不显示以往的数据来保证，下面我们介绍一种既可以看到原始记录，有不容许用户修改这些记录的方法2008-11-11
这篇文章主要介绍了关于图片存储格式的整理（JPEG）,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了WebStorm 遇到的问题总结的相关资料,需要的朋友可以参考下2017-03-03
最新评论