更新時(shí)間：2015-10-23應(yīng)當(dāng)注意網(wǎng)頁(yè)中每個(gè)圖片的尺寸，檢查是否可以將圖片的調(diào)色板設(shè)置為256色或者更少。當(dāng)然，這也取決于圖像和文件的格式。網(wǎng)站上有照片、截圖和屏幕截圖等，每種類型都需要認(rèn)真處理。這是一項(xiàng)乏味的幾乎沒(méi)人想要從事的工作。下面成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)為大家介紹下減小網(wǎng)頁(yè)中圖片的尺寸的幾種方法？
下面提供一個(gè)快捷的方法，打開(kāi)Firefox并訪問(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í)間越短，用戶體驗(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í)間。自然，圖片聚合的越多，你的受益就越大。
這項(xiàng)技術(shù)最早源于計(jì)算機(jī)游戲行業(yè)，適用于一些不經(jīng)常更新的圖片，例如笑臉、箭頭、背景圖片以及項(xiàng)目符號(hào)。
我們不推薦在菜單上使用這種技術(shù)，因?yàn)閳D片可能時(shí)不時(shí)的發(fā)生變化，因此每次你必須小心地進(jìn)行修改，否則很容易出錯(cuò)，在網(wǎng)頁(yè)中我們要盡量減少圖片的使用，通過(guò)Css文件來(lái)顯示更多的圖片效果，具體頁(yè)面設(shè)計(jì)方式請(qǐng)參照《網(wǎng)站滾動(dòng)翻頁(yè)和單屏頁(yè)面的區(qū)別》，通過(guò)以上方法我們可以很輕松的減小網(wǎng)頁(yè)中圖片的尺寸。
