濟(jì)南網(wǎng)站建設(shè)中，網(wǎng)站存在可以使網(wǎng)站視覺得到一個(gè)很好的提升，可以增加網(wǎng)站用戶體驗(yàn)度，可以提高用戶瀏覽網(wǎng)站的興趣，但是網(wǎng)站存在大量的圖片會(huì)影響網(wǎng)站的打開速度，增加網(wǎng)站頁面體積大小，那么我們應(yīng)該怎么處理圖片才能保證既不影響網(wǎng)站的美觀度，有能夠讓網(wǎng)站打開速度做到最快呢，網(wǎng)站中存在圖片是必要的一個(gè)過程，網(wǎng)站圖片處理技巧上面每個(gè)網(wǎng)站建設(shè)人員都有自己不同的理念，我們根據(jù)不同的圖片類型，不同分析，總結(jié)出每種類型圖片處理的技巧有哪些。

一、網(wǎng)站中所有的背景圖都放在一張圖片上面，降低圖片加載時(shí)長(zhǎng)，提高網(wǎng)站打開速度

        一個(gè)網(wǎng)站中都會(huì)有各式各樣的背景圖片，比如網(wǎng)站圖標(biāo)，欄目圖標(biāo)，欄目背景圖等，都會(huì)多多少少的用到網(wǎng)站背景圖，在使用html語言進(jìn)行網(wǎng)頁布局的時(shí)候，有兩種辦法可以把背景圖片顯示到網(wǎng)頁上面，一種是直接使用需要展示的圖片，然后通過background屬性顯示，另一種辦法是使用一個(gè)整張的大圖片，使用background的repeat屬性定位背景圖片的顯示位置。實(shí)際證明使用后者的方法顯示背景圖片可以有效的提高圖片加載速度，因?yàn)樗械谋尘皥D片都是放在一張圖片上面，當(dāng)網(wǎng)頁進(jìn)行加載的時(shí)候，會(huì)一下全部加載完這張圖片，然后當(dāng)再遇到使用這張圖片的時(shí)候，就無需重復(fù)加載，提高了圖片打開速度。下圖所表示的一張圖片上面放置了所有的網(wǎng)站所需圖片，然后可通過代碼background: url("image/bg.gif") no-repeat 10px 20px ;定位調(diào)用。

二、網(wǎng)站中的圖片盡量使用GIF格式的圖片，以降低圖片的體積大小

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

三、網(wǎng)站中存在jpg的圖片，需要在儲(chǔ)存jpg圖片的時(shí)候，選用品質(zhì)高、格式基線已優(yōu)化模式

        在網(wǎng)頁切圖的過程中，如果必須使用jpg的圖片，如網(wǎng)站banner，網(wǎng)站廣告圖片這種高質(zhì)量的圖片的圖片的時(shí)候，在儲(chǔ)存圖片的時(shí)候，我們要選擇品質(zhì)高、格式基線已優(yōu)化、分辨率72的選項(xiàng)，這兩種選擇可以在一定程度上減少JPG圖片格式的體積，做過平面設(shè)計(jì)的人員可能會(huì)知道對(duì)于印刷性的圖片應(yīng)該選用品質(zhì)最佳、格式基線標(biāo)準(zhǔn)、分辨率300的選項(xiàng)，因?yàn)橹挥羞@種選項(xiàng)才能保證在印刷的過程中不會(huì)出現(xiàn)圖片模糊的現(xiàn)象，不過我們做網(wǎng)頁的圖片不能使用這么高的配置，我們應(yīng)該保證圖片不失真的前提下，做到圖片體積最小。

四、網(wǎng)站中存在png的圖片，如果png背景透明，應(yīng)該加入防止IE6 png背景透明失效的JS代碼

        有時(shí)候我們?cè)谶M(jìn)行網(wǎng)站建設(shè)中，面對(duì)比較絢麗的效果，會(huì)用到使用PNG格式的圖片，其實(shí)gif格式圖片也可以做到背景透明的效果，不過由于gif的色彩值的限制影響，像類似陰影效果的透明背景，gif就做不到了，只能通過png格式圖片做陰影透明的效果。在使用png作為透明背景圖片的時(shí)候，我們發(fā)現(xiàn)在IE6中，png透明的效果不顯示了，成了一些藍(lán)色的塊狀顯示，這時(shí)我們需要在網(wǎng)頁中加入防止IE6 png格式透明失效的JS代碼，具體代碼將在文章結(jié)束提供下載。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('*');
</script>
<![endif]-->

五、網(wǎng)站中相同背景的圖片，使用背景平鋪的方法顯示

        在網(wǎng)站布局中，有些背景圖片在一個(gè)范圍內(nèi)都是一樣的效果，比如網(wǎng)站的導(dǎo)航，欄目的導(dǎo)航等，這時(shí)我們可以使用背景圖片的平鋪方法進(jìn)行顯示，把需要平鋪的背景圖片用photoshop切成寬度為1px的大小，然后使用background的repeat-x的方法，再設(shè)置上限定寬度的屬性，就可以讓該圖片在設(shè)定的范圍內(nèi)達(dá)到橫向平鋪的效果，減少了網(wǎng)站加載圖片的速度，減少網(wǎng)站頁面打開時(shí)長(zhǎng)。

六、網(wǎng)站中純色的背景圖片，應(yīng)該使用CSS的方法控制，盡量減少圖片的使用

        有一些純色的背景圖片，我們完全可以沒有必要使用圖片的方法進(jìn)行顯示，使用css屬性也可以達(dá)到同樣的效果，畢竟CSS的加載速度要比圖片的加載速度要快很多的，還有像邊框之類也可以使用CSS的屬性，這樣也同樣可以提高網(wǎng)站的打開速度。

        濟(jì)南網(wǎng)站建設(shè)中圖片的處理技巧應(yīng)該根據(jù)網(wǎng)站實(shí)際的切圖進(jìn)行具體的操作，能不用圖片的地方我們就用CSS代替，能用GIF的圖片的時(shí)候就不要使用JPG或者PNG格式的圖片，如果非要使用JPG或者PNG格式的圖片也應(yīng)該在圖片處理細(xì)節(jié)上面多加考慮，避免出現(xiàn)瀏覽器不兼容的現(xiàn)象。想要建設(shè)一個(gè)比較漂亮，有視覺沖擊力的網(wǎng)站，網(wǎng)站圖片的使用是必不可少的，不過我們應(yīng)該把每種類型的圖片處理到最好，才能把網(wǎng)站建設(shè)的最完美。

本文附件下載：

IE6背景圖片透明JS下載

您可能對(duì)以下文章也感興趣：

濟(jì)南網(wǎng)站建設(shè)中網(wǎng)站前臺(tái)代碼怎么寫才最簡(jiǎn)潔合理

濟(jì)南網(wǎng)站制作中網(wǎng)站兼容性問題最全面方法介紹

濟(jì)南網(wǎng)站制作中網(wǎng)站金字塔布局詳解

網(wǎng)站ICO圖標(biāo)在百度里面顯示方法