我們都知道，對(duì)于一個(gè)網(wǎng)站而言，網(wǎng)頁的下載速度是至關(guān)重要的。它不僅直接影響到用戶的瀏覽體驗(yàn)、還關(guān)系到網(wǎng)頁在搜索引擎中的排名參數(shù)。因此，優(yōu)化網(wǎng)頁、使之能快速下載是頁面制作中很重要的考慮因素。網(wǎng)頁優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一。下面，本著把圖片大小節(jié)省到字節(jié)的精神，我們就來探討一下web圖片的優(yōu)化，歡迎大家補(bǔ)充、指正。
圖片優(yōu)化基本原則：
一、圖片裁切
切圖時(shí)盡量貼合圖形區(qū)，避免空白區(qū)域占用文件大小。
二、圖片輸出
1． 使用photoshop的“存儲(chǔ)為web所用格式”功能來輸出照片，
測(cè)試表明：輸出某張圖片為jpg格式，分別使用“存儲(chǔ)為web所用格式”和一般的“存儲(chǔ)為”，都?jí)嚎s到50%，前者得到的圖片結(jié)果為14.4kb，后者為47.1kb。
2． 在使用上述功能進(jìn)行圖片輸出的過程中，對(duì)比jpg、gif格式下的文件大小，選擇效果和大小較優(yōu)的文件格式。
一般情況下，色彩少的圖片使用png-8、gif格式文件會(huì)小些，色彩漸變豐富的圖片，則使用jpg會(huì)小些。
3． Jpg格式的圖片，需綜合對(duì)比壓縮品質(zhì)高、中、低下的效果，盡量選擇效果好且壓縮品質(zhì)較低的選項(xiàng)，以達(dá)到獲取較小文件的目的。
4． 對(duì)于無多通道透明需求的圖片，避免使用png24位格式輸出。
Gif圖片如何優(yōu)化？
有些圖片，色彩并不是很豐富，通過對(duì)比可知輸出gif會(huì)更小些；或者，因?yàn)橐迷诙喾N背景中使用，需要輸出為透明格式（非多通道），這時(shí)，就需要選用gif格式。我們都知道Jpg格式可以通過控制壓縮比來優(yōu)化，相對(duì)于JPG，gif優(yōu)化是比較容易被忽視的。看到身邊有些朋友在輸出gif時(shí)基本不作什么優(yōu)化選擇，覺得很可惜。其實(shí)，即使確定要輸出gif格式，通常也仍有繼續(xù)瘦身的余地。
我們可以做個(gè)實(shí)驗(yàn)。
請(qǐng)看看下面四個(gè)圖片，大家在肉眼、原大的情況下能看出區(qū)別來嗎？
(聲明，此實(shí)驗(yàn)圖標(biāo)取自網(wǎng)絡(luò)，作者未知，感謝！)
呵呵~~相信如果不放大到像素級(jí)來一個(gè)個(gè)點(diǎn)的對(duì)比看，是很難辨認(rèn)出有何不同的。
其實(shí)，這幾張圖片有著不同的色階。請(qǐng)看下面在Photoshop中輸出時(shí)的相關(guān)參數(shù)，注意文字中紅色線標(biāo)注的內(nèi)容。
樣圖解讀：
圖1為要輸出的原圖效果；
圖2為64色輸出的效果，輸出后文件大小為601字節(jié)；
圖3為128色輸出的效果，輸出后文件大小為853字節(jié)；
圖4為256色輸出的效果，輸出后文件大小為1.286K。
由此可見，上述四張圖中，在肉眼可辨識(shí)情況下，64色的圖片對(duì)比256色圖片，輸出后可以少掉一半還多的字節(jié)數(shù)，且效果完全能滿足視覺要求。不要小看這幾百個(gè)字節(jié)，試想網(wǎng)站里幾百張圖片，如果每張圖都節(jié)省一些，最終可以節(jié)省多少空間出來？
這是PS的輸出模式中提供的gif色彩選項(xiàng)。
根據(jù)這些選項(xiàng)，我們?cè)倏纯锤嗟腉if格式下多色階的效果和文件大小對(duì)比。
經(jīng)對(duì)比可知，其實(shí)對(duì)于此圖片而言，用32色來輸出也是可以接受的。
Gif優(yōu)化小結(jié)：對(duì)于gif而言，色彩越少，文件也就越小。在肉眼可可接受的范圍內(nèi)，盡量將gif色彩數(shù)量降低，能夠?qū)if圖大小進(jìn)行有效的優(yōu)化。道理其實(shí)很簡(jiǎn)單，關(guān)鍵就在于我們實(shí)際輸出過程中要細(xì)心、耐心。
