高性能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;
};
相关文章
_pycache__ 文件夹是 Python 编译器用来存放编译后的 Python 文件的，在项目中不需要提交这些文件，因为它们可以通过编译源代码重新生成，这篇文章主要介绍了如何在 git 中取消 __pycache__ 文件,需要的朋友可以参考下2023-01-01
开发时有些文件根部就会动,可能是运行的环境或者缓存,可能是其他的文件,但是又不能删除,影响开发的观感,那么怎么在侧边栏栏隐藏文件呢,下面小编给大家分享VSCode 如何隐藏侧边栏文件或文件夹,感兴趣的朋友一起看看吧2024-03-03
超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式2021-06-06
vscode默认的语言是英文，这给使用者带来了一定的挑战，现在小编就来告诉你如何将vscode设置成中文。2020-01-01
这篇文章主要介绍了架构思维中一次缓存雪崩的灾难复盘真实案例的分享，希望可以对大家在工作中有所启发，祝大家多多进步早日升职加薪2022-01-01
很多年前大学里学过的进制转换还是挺简单的，没想到多年不用了，都忘了，刚好看到这篇文章，特分享下，方便需要的朋友2013-02-02
就我所知道的语言来说，在键盘上集中分布跨度更大的语音，通常就是我们所指的丑陋的语言（阅读和编写代码都很困难），例如 shell 和 perl。2011-10-10
gb2312的详细介绍，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家介绍了一款前端开发工具nvim代替VSCode的配置使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
PyCharm 是一款功能强大的 Python 编辑器，具有跨平台性。这篇文章给大家介绍2019最新的Pycharm激活码，需要的朋友一起看看吧2019-10-10
最新评论