高效能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; 
};

 以上就是 壓縮，WEB開發的圖片壓縮內容，更多相關文章請關注PHP中文網（www.php.cn）！