淺談網(wǎng)站設(shè)計當(dāng)中的圖像處理技巧
?
網(wǎng)站設(shè)計師們應(yīng)當(dāng)注意網(wǎng)站中每個圖片的尺寸,檢查是否可以將圖片的調(diào)色板設(shè)置為256色或者更少。當(dāng)然,這也取決于圖像和文件格式。網(wǎng)站中有照片、線圖和屏幕截圖等,每種類型都需要認(rèn)真處理。這是一項乏味得幾乎沒人想從事的工作。
金華微信平臺的工程師們提供一個快捷的方法:打開Firefox并訪問你的網(wǎng)站。在瀏覽器的右下角,可以看到Smush.IT的圖標(biāo)。單擊它就會出現(xiàn)一個新的瀏覽器窗口。這個Web服務(wù)會獲取網(wǎng)站的所有圖片,然后進行壓縮。下載經(jīng)過優(yōu)化的打包ZIP文件替換服務(wù)器中的文件。同樣,在其他有圖片的頁面中進行相應(yīng)的處理。
?
?
?
?
?
?
假設(shè)你有一個論壇。論壇中的人們喜歡使用表情圖標(biāo)來表示自己的感情。因為表情圖標(biāo)很多,你就需要很多不同的圖片文件,這增加了每個頁面的HTTP請求數(shù)。大量的文件下載大大地降低了網(wǎng)站的加載時間。想象一個48×16像素的圖片平均分成3列,每一列都是16×16的表情圖標(biāo):一個是悲傷的表情,一個是高興的表情,一個是生氣的表情,等等。這種單獨文件包含了3張圖片的方式就是圖片聚合。使用CSS的“background—image”和“background—position”屬性就可以確定想要顯示的圖片。例如,在頁面上只顯示高興的表情。這樣,我們可以將所有的表情都放到一個單獨的文件中,極大地減少了HTTP的請求次數(shù)和時間。自然,圖片聚合得越多,你的受益也就越大。這項技術(shù)最早源于計算機游戲行業(yè),適用于一些不經(jīng)常更新的圖片,例如笑臉、箭頭、背景圖片以及項目符號。我們不推薦在菜單圖片上使用這種技術(shù),因為圖片可能時不時地發(fā)生變化,因此每次你必須小心地進行修改,否則很容易出錯。仔細(xì)的看看電腦雜志上關(guān)于這個話題的討論吧。
?
最后,關(guān)于圖片傳輸?shù)膯栴},傳輸圖片文件會消耗很多時間。另外,由于瀏覽器需要自己將圖片縮小,這也會消耗一定的時間而且效果不會太好。所以將圖片處理好之后再部署到服務(wù)器上,有很多的免費工具可以進行圖片的處理,例如GIMP和Paint.NET。