如何減小網(wǎng)頁(yè)中圖片的尺寸？

應(yīng)當(dāng)注意網(wǎng)頁(yè)中每個(gè)圖片的尺寸，檢查是否可以將圖片的調(diào)色板設(shè)置為256色或者更少。當(dāng)然，這也取決于圖像和文件的格式。網(wǎng)站上有照片、截圖和屏幕截圖等，每種類(lèi)型都需要認(rèn)真處理。這是一項(xiàng)乏味的幾乎沒(méi)人想要從事的工作。下面大家介紹下減小網(wǎng)頁(yè)中圖片的尺寸的幾種方法？

打開(kāi)Firefox并訪(fǎng)問(wèn)你的網(wǎng)站。在瀏覽器的右下角，可以看到截圖的小圖標(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)的處理。這樣做的好處是，網(wǎng)站中的圖片越小，加載時(shí)間越短，用戶(hù)體驗(yàn)越好。

圖片聚合技術(shù)是減少網(wǎng)頁(yè)圖片尺寸的最好的方法，假設(shè)你有一個(gè)論壇，論壇中的人們喜歡使用表情圖標(biāo)來(lái)表示自己的感情。因?yàn)楸砬閳D標(biāo)很多，你就需要很多不同的圖片文件，這增加了每個(gè)頁(yè)面的HTTP請(qǐng)求數(shù)。大量的文件下載大大降低了網(wǎng)站的加載時(shí)間。

想想一個(gè)48*16像素的圖片平均分成3列，每一列都是16X16像素的表情圖標(biāo)：一個(gè)是悲傷的表情，一個(gè)是高興的表情，一個(gè)是生氣的表情等等。這種單獨(dú)文件包含了3張圖片的方式就是圖片聚合。使用CSS的“background-image”和“background-position”屬性就可以確定想要顯示的圖片。例如，在頁(yè)面上顯示高興的表情。這樣，我們可以將所有的表情都放到一個(gè)單獨(dú)的文件中，極大地減少了HTTP的請(qǐng)次數(shù)和時(shí)間。自然，圖片聚合的越多，你的受益就越大。