高性能WEB開發(fā) 圖片壓縮篇
更新時間：2010年05月13日 23:59:16 作者：
高性能WEB開發(fā) 圖片篇，圖片在一定的程度上，影響著頁面的加載速度。
一、縮小圖片大小
當圖片很多的時候，減少圖片大小是提高下載速度最直接的方法。
1. 使用PNG8代替GIF(非動畫圖片)，因為PNG8在效果一樣的情況，圖片大小比GIF要小。
2. 用fireworks處理PNG圖片，在我們產(chǎn)品中很多PNG圖片是美工直接用photoshop導出的，
后來讓美工用fireworks處理PNG(大概的方式是選擇保存為PNG8,刪除背景色)。
處理后100K的圖片大小基本減少了3/4，但圖片質(zhì)量也會有少許降低，要看自己是否能接受。
3. 使用Smush.it(http://www.smushit.com/ysmush.it/)壓縮圖片，Smush.it是YUI團隊做1個在線壓縮圖片的網(wǎng)站，
該網(wǎng)站在不影響原圖片的質(zhì)量下去掉圖片中一些元數(shù)據(jù)，所以可以放心使用該網(wǎng)站進行壓縮，
但這個壓縮比例也是比較有限的。
二、合并圖片和拆分圖片
1. CSS Sprites合并圖片以減少請求數(shù)來提高性能大家都知道。但不要把圖片合并太多，太多太大了，
就會因為這1個圖片影響這個頁面的顯示了。
2. 有時候我們需要把1個大圖片拆分成多個小圖片，比如產(chǎn)品首頁圖片比較少，就1個很大的banner圖片，
因瀏覽器都可以并發(fā)下載圖片，所以如果不拆分，只使用1個大圖片的話，下載速度反而會比較慢
三、透明圖片處理
IE6不能顯示透明的PNG圖片，是很多開發(fā)人員特別頭疼的事，分別介紹下幾種方式的優(yōu)缺點。
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');
}
優(yōu)點：使用簡單
缺點：性能損耗很大,AlphaImageLoader會花費很多資源去處理透明圖片，使用AlphaImageLoader,IE使用內(nèi)存會迅速上升。
而且AlphaImageLoader所有處理都在同1個線程中同步進行，所以當AlphaImageLoader多的時候，會阻塞UI的渲染。
使用_filter，IE7也可以識別，其實IE7是可以識別PNG透明圖片的，如果在IE7下使用上面代碼，IE7不會直接使用圖片，而是使用AlphaImageLoader。
注：個人建議盡量避免使用AlphaImageLoader
2. JS處理
使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很簡單的對界面上所有的透明圖片進行同一處理。
優(yōu)點：使用簡單(比AlphaImageLoader還簡單)
缺點：當頁面上需要處理的圖片比較多的時候，速度也比較慢，而且不能動態(tài)改變圖片。
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 >
優(yōu)點：性能好，速度快
缺點：使用復雜，而且不支持firefox等瀏覽器，需要判斷不同的瀏覽器輸出不同的HTML代碼。
四、多域名下載圖片
因每個瀏覽器對同1個域名同時只能發(fā)送固定的請求，比如IE6好像是2個，所以可以對圖片資源開通多個域名進行請求，
比如img1.abc.com,img2.abc.com。但域名不要開啟太多，因為解析域名和打開新的連接都需要消耗時間，域名多了，說不定反而會更慢。一般2-4個域名就夠了。
五、IE6下緩存背景圖片
IE6背景圖片緩存是個麻煩事，很多人知道使用下面的JS來讓IE6緩存背景圖片
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
但是這樣做的效果并不是非常好，當出現(xiàn)鼠標移動改變背景圖片的時候，IE6老是會發(fā)送1個圖片請求(盡管該背景圖片已經(jīng)下載)，
雖然返回結(jié)果是304，但還是要花費不少時間。在這種情況下，可以使用下面1個變通的方式來處理，
在頁面上直接使用1個DIV元素來加載該圖片，這樣加載圖片就能真正被緩存，鼠標移動也不會發(fā)送請求了。
六、預(yù)加載圖片
使用下面代碼可以在頁面加載完畢后預(yù)加載下1個頁面的圖片，當進入下1個頁面就不用再下載圖片了。
window.onload=function(){
var img = new Image();
img.src = "images/image.png";
img = null;
};
當圖片很多的時候，減少圖片大小是提高下載速度最直接的方法。
1. 使用PNG8代替GIF(非動畫圖片)，因為PNG8在效果一樣的情況，圖片大小比GIF要小。
2. 用fireworks處理PNG圖片，在我們產(chǎn)品中很多PNG圖片是美工直接用photoshop導出的，
后來讓美工用fireworks處理PNG(大概的方式是選擇保存為PNG8,刪除背景色)。
處理后100K的圖片大小基本減少了3/4，但圖片質(zhì)量也會有少許降低，要看自己是否能接受。
3. 使用Smush.it(http://www.smushit.com/ysmush.it/)壓縮圖片，Smush.it是YUI團隊做1個在線壓縮圖片的網(wǎng)站，
該網(wǎng)站在不影響原圖片的質(zhì)量下去掉圖片中一些元數(shù)據(jù)，所以可以放心使用該網(wǎng)站進行壓縮，
但這個壓縮比例也是比較有限的。
二、合并圖片和拆分圖片
1. CSS Sprites合并圖片以減少請求數(shù)來提高性能大家都知道。但不要把圖片合并太多，太多太大了，
就會因為這1個圖片影響這個頁面的顯示了。
2. 有時候我們需要把1個大圖片拆分成多個小圖片，比如產(chǎn)品首頁圖片比較少，就1個很大的banner圖片，
因瀏覽器都可以并發(fā)下載圖片，所以如果不拆分，只使用1個大圖片的話，下載速度反而會比較慢
三、透明圖片處理
IE6不能顯示透明的PNG圖片，是很多開發(fā)人員特別頭疼的事，分別介紹下幾種方式的優(yōu)缺點。
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');
}
優(yōu)點：使用簡單
缺點：性能損耗很大,AlphaImageLoader會花費很多資源去處理透明圖片，使用AlphaImageLoader,IE使用內(nèi)存會迅速上升。
而且AlphaImageLoader所有處理都在同1個線程中同步進行，所以當AlphaImageLoader多的時候，會阻塞UI的渲染。
使用_filter，IE7也可以識別，其實IE7是可以識別PNG透明圖片的，如果在IE7下使用上面代碼，IE7不會直接使用圖片，而是使用AlphaImageLoader。
注：個人建議盡量避免使用AlphaImageLoader
2. JS處理
使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很簡單的對界面上所有的透明圖片進行同一處理。
優(yōu)點：使用簡單(比AlphaImageLoader還簡單)
缺點：當頁面上需要處理的圖片比較多的時候，速度也比較慢，而且不能動態(tài)改變圖片。
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 >
優(yōu)點：性能好，速度快
缺點：使用復雜，而且不支持firefox等瀏覽器，需要判斷不同的瀏覽器輸出不同的HTML代碼。
四、多域名下載圖片
因每個瀏覽器對同1個域名同時只能發(fā)送固定的請求，比如IE6好像是2個，所以可以對圖片資源開通多個域名進行請求，
比如img1.abc.com,img2.abc.com。但域名不要開啟太多，因為解析域名和打開新的連接都需要消耗時間，域名多了，說不定反而會更慢。一般2-4個域名就夠了。
五、IE6下緩存背景圖片
IE6背景圖片緩存是個麻煩事，很多人知道使用下面的JS來讓IE6緩存背景圖片
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
但是這樣做的效果并不是非常好，當出現(xiàn)鼠標移動改變背景圖片的時候，IE6老是會發(fā)送1個圖片請求(盡管該背景圖片已經(jīng)下載)，
雖然返回結(jié)果是304，但還是要花費不少時間。在這種情況下，可以使用下面1個變通的方式來處理，
在頁面上直接使用1個DIV元素來加載該圖片，這樣加載圖片就能真正被緩存，鼠標移動也不會發(fā)送請求了。
六、預(yù)加載圖片
使用下面代碼可以在頁面加載完畢后預(yù)加載下1個頁面的圖片，當進入下1個頁面就不用再下載圖片了。
復制代碼 代碼如下:
window.onload=function(){
var img = new Image();
img.src = "images/image.png";
img = null;
};
相關(guān)文章
_pycache__ 文件夾是 Python 編譯器用來存放編譯后的 Python 文件的，在項目中不需要提交這些文件，因為它們可以通過編譯源代碼重新生成，這篇文章主要介紹了如何在 git 中取消 __pycache__ 文件,需要的朋友可以參考下2023-01-01
開發(fā)時有些文件根部就會動,可能是運行的環(huán)境或者緩存,可能是其他的文件,但是又不能刪除,影響開發(fā)的觀感,那么怎么在側(cè)邊欄欄隱藏文件呢,下面小編給大家分享VSCode 如何隱藏側(cè)邊欄文件或文件夾,感興趣的朋友一起看看吧2024-03-03
超文本傳輸協(xié)議（Hypertext Transfer Protocol，HTTP）是一個簡單的請求-響應(yīng)協(xié)議，它通常運行在TCP之上。它指定了客戶端可能發(fā)送給服務(wù)器什么樣的消息以及得到什么樣的響應(yīng)。請求和響應(yīng)消息的頭以ASCII形式給出；而消息內(nèi)容則具有一個類似MIME的格式2021-06-06
vscode默認的語言是英文，這給使用者帶來了一定的挑戰(zhàn)，現(xiàn)在小編就來告訴你如何將vscode設(shè)置成中文。2020-01-01
這篇文章主要介紹了架構(gòu)思維中一次緩存雪崩的災(zāi)難復盤真實案例的分享，希望可以對大家在工作中有所啟發(fā)，祝大家多多進步早日升職加薪2022-01-01
很多年前大學里學過的進制轉(zhuǎn)換還是挺簡單的，沒想到多年不用了，都忘了，剛好看到這篇文章，特分享下，方便需要的朋友2013-02-02
就我所知道的語言來說，在鍵盤上集中分布跨度更大的語音，通常就是我們所指的丑陋的語言（閱讀和編寫代碼都很困難），例如 shell 和 perl。2011-10-10
gb2312的詳細介紹，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家介紹了一款前端開發(fā)工具nvim代替VSCode的配置使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
PyCharm 是一款功能強大的 Python 編輯器，具有跨平臺性。這篇文章給大家介紹2019最新的Pycharm激活碼，需要的朋友一起看看吧2019-10-10