我們知道在制作網頁/過程中圖片占了一個十分重要的地位.盡管網速越來越快,但是圖片太大依然是造成網頁載入速度過慢的最重要原因之一.

那么到底在gif,png,jpg這些格式我們要選擇哪一種作為候選格式,而哪種圖片格式可以讓圖片更小,卻擁有更好的圖片質量呢?

1.圖片格式

gif

gif最突出的地方就是他支持動畫,同時gif也是一種無損的圖片格式,也就是說你在修改圖片之后,圖片質量并沒有損失.再者gif支持半透明(全透明或是全不透明).
根據google的說法,gif適用于很小或是較簡單的圖片(10×10以下或是3種顏色以下的圖片).

png

首先,png包括了png-8跟真彩色-png(png-24 or png-32).那png相對于gif最大的優勢是:

• 通常體積會更小
• 支持alpha(全透明)

但是我們知道png是不支持動畫的.

同時需要留意ie6是可以支持png-8的,但是在處理png-24的透明時會顯示會灰色.相關例子可以參考sitepoint.

通常圖片保存為png-8會在同等質量下獲得比gif更小的體積,而全透明的圖片我們現在只能使用png-24.但是請留意在保存圖片在png-8與gif中進行比較.因為定律并不一直正確.

jpg

jpg所能顯示的顏色比gif,png要多的多,同時得到很好的壓縮,所以jpg很適用于保存數碼照片.但是注意它是一種失真壓縮,這意味著你每次修改圖片都會造成像素失真.

看了上面的介紹你應該對使用哪種格式保存哪種圖片有了大概的了解.簡單的說就是:

一句話:小圖片或網頁基本元素(如按鈕),考慮png-8或gif.照片則考慮jpg.

2.圖片的壓縮

首先,我們如果是在photoshop中制作的圖片或是網站素材,在保存圖片時,切記選擇”文件-存儲為web和設備所用格式”.因為這樣往往在同等質量下能獲得更小的圖片體積(相比直接”存儲為”).請看下圖:

 
smush it!
在按照上面方法存儲圖片之后,其實還是可以繼續壓縮圖片大小的,而且我談論的是不對圖片質量造成損失的方法.

smush it!包含在著名的著名插件yslow之中,并確保已經安裝了firebug.使用方法很簡單,只需要在yslow中打開”tool”下的all smush it! 將會跳轉到一個新頁面,對當前網頁的圖片進行壓縮.而這些壓縮都是在不損失圖片質量下進行的.所以你大可放心.
 
6-15更新:由于”實踐是檢驗真理的惟一方式“,那么我現在用smush it!對本網站及vikiworks.com分別進行測試,結果顯示ediyang.com首頁的圖片壓縮了6.52k,而vikiworks.com的首頁壓縮結果十分驚人,竟是46k,截圖如下:
 
由此可見smuch it!真的是圖片壓縮的一大利器.
如果你想要單獨壓縮某一張圖片,你可以到
http://developer.yahoo.com/yslow/smushit/index.html
只要填寫圖片的網址就可以進行壓縮了.

tips:先在ps中保存為web格式圖片,然后再使用smush it!壓縮圖片.