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

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

1.圖片格式

gif

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

png

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

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

但是我們知道png是不支持動(dòng)畫的.

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

通常圖片保存為png-8會(huì)在同等質(zhì)量下獲得比gif更小的體積,而全透明的圖片我們現(xiàn)在只能使用png-24.但是請(qǐng)留意在保存圖片在png-8與gif中進(jìn)行比較.因?yàn)槎刹⒉灰恢闭_.

jpg

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

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

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

2.圖片的壓縮

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

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

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

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