網(wǎng)站設(shè)計(jì)師們應(yīng)當(dāng)注意網(wǎng)站中每個(gè)圖片的尺寸，檢查是否可以將圖片的調(diào)色板設(shè)置為256色或者更少。當(dāng)然，這也取決于圖像和文件格式。網(wǎng)站中有照片、線圖和屏幕截圖等，每種類型都需要認(rèn)真處理。這是一項(xiàng)乏味得幾乎沒人想從事的工作。金華微信平臺(tái)的工程師們提供一個(gè)快捷的方法：打開Firefox并訪問(wèn)你的網(wǎng)站。在瀏覽器的右下角，可以看到Smush．IT的圖標(biāo)。單擊它就會(huì)出現(xiàn)一個(gè)新的瀏覽器窗口。這個(gè)Web服務(wù)會(huì)獲取網(wǎng)站的所有圖片，然后進(jìn)行壓縮。下載經(jīng)過(guò)優(yōu)化的打包ZIP文件替換服務(wù)器中的文件。同樣，在其他有圖片的頁(yè)面中進(jìn)行相應(yīng)的處理。

?

?

?

?

?

?

假設(shè)你有一個(gè)論壇。論壇中的人們喜歡使用表情圖標(biāo)來(lái)表示自己的感情。因?yàn)楸砬閳D標(biāo)很多，你就需要很多不同的圖片文件，這增加了每個(gè)頁(yè)面的HTTP請(qǐng)求數(shù)。大量的文件下載大大地降低了網(wǎng)站的加載時(shí)間。想象一個(gè)48×16像素的圖片平均分成3列，每一列都是16×16的表情圖標(biāo)：一個(gè)是悲傷的表情，一個(gè)是高興的表情，一個(gè)是生氣的表情，等等。這種單獨(dú)文件包含了3張圖片的方式就是圖片聚合。使用CSS的“background—image”和“background—position”屬性就可以確定想要顯示的圖片。例如，在頁(yè)面上只顯示高興的表情。這樣，我們可以將所有的表情都放到一個(gè)單獨(dú)的文件中，極大地減少了HTTP的請(qǐng)求次數(shù)和時(shí)間。自然，圖片聚合得越多，你的受益也就越大。這項(xiàng)技術(shù)最早源于計(jì)算機(jī)游戲行業(yè)，適用于一些不經(jīng)常更新的圖片，例如笑臉、箭頭、背景圖片以及項(xiàng)目符號(hào)。我們不推薦在菜單圖片上使用這種技術(shù)，因?yàn)閳D片可能時(shí)不時(shí)地發(fā)生變化，因此每次你必須小心地進(jìn)行修改，否則很容易出錯(cuò)。仔細(xì)的看看電腦雜志上關(guān)于這個(gè)話題的討論吧。

?

最后，關(guān)于圖片傳輸?shù)膯?wèn)題，傳輸圖片文件會(huì)消耗很多時(shí)間。另外，由于瀏覽器需要自己將圖片縮小，這也會(huì)消耗一定的時(shí)間而且效果不會(huì)太好。所以將圖片處理好之后再部署到服務(wù)器上，有很多的免費(fèi)工具可以進(jìn)行圖片的處理，例如GIMP和Paint．NET。