制作網(wǎng)站如何進(jìn)行圖片的優(yōu)化處理

網(wǎng)站的圖片優(yōu)化能夠更好的提高網(wǎng)站的打開(kāi)速度，該如何進(jìn)行網(wǎng)站圖片的優(yōu)化處理呢？一起來(lái)看看一下吧！

一、控制網(wǎng)站jpg圖片的質(zhì)量

網(wǎng)站建設(shè)時(shí)質(zhì)量高的jpg格式圖片比較清晰，色彩更鮮艷，不少人就用這種圖片來(lái)美化header，其實(shí)這對(duì)速度的影響是很大的，因?yàn)榇蜷_(kāi)一個(gè)頁(yè)面首先加載的就是header，header加載時(shí)間太長(zhǎng)的話，很容易使第一次來(lái)的訪客反感，還有一種情況是頁(yè)面上的小圖標(biāo)，有些站長(zhǎng)過(guò)于追求美觀，于是頁(yè)面上的小圖標(biāo)也用高質(zhì)量的圖片來(lái)做，這是很沒(méi)必要的。

二、網(wǎng)站圖片gif格式的使用

jpg格式在在展示色彩豐富的大圖片是效果很好，但做網(wǎng)頁(yè)圖標(biāo)的話，gif才是最好的格式。因?yàn)樵谶M(jìn)行像素的展示gif的效果比jpg好一些。這點(diǎn)你們?cè)谧鼍W(wǎng)站的時(shí)候可以自己嘗試一下。因此，在制作顏色比較少的gif時(shí)，嘗試一下降低顏色數(shù)，只要效果能過(guò)得去就行了。

三、網(wǎng)站背景圖片的處理

很多人喜歡用圖片做頁(yè)面元素的hover變換效果，但是卻沒(méi)有把相關(guān)的圖片整合，導(dǎo)致一些變換效果有事會(huì)因?yàn)閳D片載入失敗而失色。我們可以把針對(duì)某個(gè)效果的圖片都整合成一個(gè)文件，在css里用background-position屬性調(diào)整圖片位置。這種做法的好處是背景只需要一次http請(qǐng)求，圖片可以重復(fù)調(diào)用，也有利于圖片變換。

四、提高網(wǎng)站圖片的傳輸并行程度

使用多個(gè)而不是一個(gè)域名訪問(wèn)圖片

大多數(shù)瀏覽器中，對(duì)于同一域名下的并發(fā)HTTP請(qǐng)求數(shù)是有限制的，一般為幾個(gè)。當(dāng)頁(yè)面中圖片數(shù)量較多時(shí)，可以考慮分配不用的域名來(lái)訪問(wèn)。

五、延遲加載圖片

現(xiàn)在的網(wǎng)站都講求的是圖文并茂，所以在做網(wǎng)站取得時(shí)候通過(guò)延遲加載圖片這個(gè)方法也能很好的提高網(wǎng)站的加載速度。