1.網(wǎng)站中所有的背景圖都放在一張圖片上面,降低圖片加載時長,提高網(wǎng)站打開速度。
一個網(wǎng)站中都會有各式各樣的背景圖片,比如網(wǎng)站圖標(biāo),欄目圖標(biāo),欄目背景圖等,都會多多少少的用到網(wǎng)站背景圖,在使用html語言進(jìn)行網(wǎng)頁布局的時候,有兩種辦法可以把背景圖片顯示到網(wǎng)頁上面,一種是直接使用需要展示的圖片,然后通過background屬性顯示,另一種辦法是使用一個整張的大圖片,使用background的repeat屬性定位背景圖片的顯示位置。實(shí)際證明使用后者的方法顯示背景圖片可以有效的提高圖片加載速度,因為所有的背景圖片都是放在一張圖片上面,當(dāng)網(wǎng)頁進(jìn)行加載的時候,會一下全部加載完這張圖片,然后當(dāng)再遇到使用這張圖片的時候,就無需重復(fù)加載,提高了圖片打開速度。
2.網(wǎng)站中的圖片盡量使用GIF格式的圖片,以降低圖片的體積大小。
網(wǎng)站建設(shè)中最常見的圖片的格式可分為jpg、gif、png三種格式,其中g(shù)if格式是在所有圖片中體積最小的一種格式,因為gif格式的圖片是以265種色彩組成,是最符合網(wǎng)站圖片的一種格式,同樣一張圖片體積大小,gif格式要比其他兩種格式容量小80%左右,在保證圖片不失真的情況下,盡量使用gif格式的圖片,在Phtopshop中,可以使用ctrl+alt+shift組合鍵把任意格式的圖片儲存為gif格式圖片,其中g(shù)if格式圖片屬性。
3.網(wǎng)站中存在jpg的圖片,需要在儲存jpg圖片的時候,選用品質(zhì)高、格式基線已優(yōu)化模式。
在網(wǎng)頁切圖的過程中,如果必須使用jpg的圖片,如網(wǎng)站banner,網(wǎng)站廣告圖片這種高質(zhì)量的圖片的圖片的時候,在儲存圖片的時候,我們要選擇品質(zhì)高、格式基線已優(yōu)化、分辨率72的選項,這兩種選擇可以在一定程度上減少JPG圖片格式的體積,做過平面設(shè)計的人員可能會知道對于印刷性的圖片應(yīng)該選用品質(zhì)最佳、格式基線標(biāo)準(zhǔn)、分辨率300的選項,因為只有這種選項才能保證在印刷的過程中不會出現(xiàn)圖片模糊的現(xiàn)象,不過我們做網(wǎng)頁的圖片不能使用這么高的配置,我們應(yīng)該保證圖片不失真的前提下,做到圖片體積最小。
4.網(wǎng)站中相同背景的圖片,使用背景平鋪的方法顯示。
在網(wǎng)站布局中,有些背景圖片在一個范圍內(nèi)都是一樣的效果,比如網(wǎng)站的導(dǎo)航,欄目的導(dǎo)航等,這時我們可以使用背景圖片的平鋪方法進(jìn)行顯示,把需要平鋪的背景圖片用photoshop切成寬度為1px的大小,然后使用background的repeat-x的方法,再設(shè)置上限定寬度的屬性,就可以讓該圖片在設(shè)定的范圍內(nèi)達(dá)到橫向平鋪的效果,減少了網(wǎng)站加載圖片的速度,減少網(wǎng)站頁面打開時長。