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

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

1.圖片格式

gif

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

png

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

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

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

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

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

jpg

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

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

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

2.圖片的壓縮

首先,我們?nèi)绻窃趐hotoshop中制作的圖片或是網(wǎng)站素材,在保存圖片時,切記選擇”文件-存儲為web和設(shè)備所用格式”.因為這樣往往在同等質(zhì)量下能獲得更小的圖片體積(相比直接”存儲為”).請看下圖:

 
smush it!
在按照上面方法存儲圖片之后,其實還是可以繼續(xù)壓縮圖片大小的,而且我談?wù)摰氖遣粚D片質(zhì)量造成損失的方法.

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

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