成(chéng)都(dōu)網站建設：網站圖片處理終極技巧

有的網站打開(kāi)好(hǎo)久，圖片才出來，有時(shí)候網速不太給力的時(shí)候，還(hái)會(huì)直接顯示一個叉，針對(duì)這(zhè)樣(yàng)的情況，夏銘科技是怎麼(me)做的呢？

1.網站中所有的背景圖都(dōu)放在一張圖片上面(miàn)，降低圖片加載時(shí)長(cháng)，提高網站打開(kāi)速度

一個網站中都(dōu)會(huì)有各式各樣(yàng)的背景圖片，比如網站圖标，欄目圖标，欄目背景圖等，都(dōu)會(huì)多多少少的用到網站背景圖，在使用html語言進(jìn)行網頁布局的時(shí)候，有兩(liǎng)種(zhǒng)辦法可以把背景圖片顯示到網頁上面(miàn)，一種(zhǒng)是直接使用需要展示的圖片，然後(hòu)通過(guò)background屬性顯示，另一種(zhǒng)辦法是使用一個整張的大圖片，使用background的repeat屬性定位背景圖片的顯示位置。實際證明使用後(hòu)者的方法顯示背景圖片可以有效的提高圖片加載速度，因爲所有的背景圖片都(dōu)是放在一張圖片上面(miàn)，當網頁進(jìn)行加載的時(shí)候，會(huì)一下全部加載完這(zhè)張圖片，然後(hòu)當再遇到使用這(zhè)張圖片的時(shí)候，就(jiù)無需重複加載，提高了圖片打開(kāi)速度。

2.網站中的圖片盡量使用GIF格式的圖片，以降低圖片的體積大小

網站建設中最常見的圖片的格式可分爲jpg、gif、png三種(zhǒng)格式，其中gif格式是在所有圖片中體積最小的一種(zhǒng)格式，因爲gif格式的圖片是以265種(zhǒng)色彩組成(chéng)，是最符合網站圖片的一種(zhǒng)格式，同樣(yàng)一張圖片體積大小，gif格式要比其他兩(liǎng)種(zhǒng)格式容量小80%左右，在保證圖片不失真的情況下，盡量使用gif格式的圖片，在Phtopshop中，可以使用ctrl+alt+shift組合鍵把任意格式的圖片儲存爲gif格式圖片，其中gif格式圖片屬性。

3.網站中存在jpg的圖片，需要在儲存jpg圖片的時(shí)候，選用品質高、格式基線已優化模式

在網頁切圖的過(guò)程中，如果必須使用jpg的圖片，如網站banner，網站廣告圖片這(zhè)種(zhǒng)高質量的圖片的圖片的時(shí)候，在儲存圖片的時(shí)候，我們要選擇品質高、格式基線已優化、分辨率72的選項，這(zhè)兩(liǎng)種(zhǒng)選擇可以在一定程度上減少JPG圖片格式的體積，做過(guò)平面(miàn)設計的人員可能(néng)會(huì)知道(dào)對(duì)于印刷性的圖片應該選用品質最佳、格式基線标準、分辨率300的選項，因爲隻有這(zhè)種(zhǒng)選項才能(néng)保證在印刷的過(guò)程中不會(huì)出現圖片模糊的現象，不過(guò)我們做網頁的圖片不能(néng)使用這(zhè)麼(me)高的配置，我們應該保證圖片不失真的前提下，做到圖片體積最小。

4.網站中相同背景的圖片，使用背景平鋪的方法顯示

在網站布局中，有些背景圖片在一個範圍内都(dōu)是一樣(yàng)的效果，比如網站的導航，欄目的導航等，這(zhè)時(shí)我們可以使用背景圖片的平鋪方法進(jìn)行顯示，把需要平鋪的背景圖片用photoshop切成(chéng)寬度爲1px的大小，然後(hòu)使用background的repeat-x的方法，再設置上限定寬度的屬性，就(jiù)可以讓該圖片在設定的範圍内達到橫向(xiàng)平鋪的效果，減少了網站加載圖片的速度，減少網站頁面(miàn)打開(kāi)時(shí)長(cháng)。

尚狐網絡-成(chéng)都(dōu)網站建設領導者。