杭州蒙特網(wǎng)站制作16年，經(jīng)驗(yàn)告訴我們，首頁(yè)圖片很多的網(wǎng)站打開(kāi)會(huì)很慢，一是因?yàn)閳D片多，需要下載的文件體積就增大，二是每一個(gè)圖片下載都會(huì)對(duì)服務(wù)器有一個(gè)請(qǐng)求，增大了瀏覽器與服務(wù)端的交互次數(shù)，如果能把純色的部分用css來(lái)寫(xiě)，而不因?yàn)槭∈轮苯忧袌D，就會(huì)極大提高網(wǎng)站的運(yùn)行效率。如果遇到有漸變色的背景，可以沿著與漸變色相同方向切一個(gè)像素的條紋，用css中background的repeat-x或repeat-y來(lái)自動(dòng)填充。
導(dǎo)航欄效果圖
對(duì)于有圓角的導(dǎo)航條圖片，可以將兩邊的圓角部分單獨(dú)切出來(lái)，中間如果有漸變色，也是只切一個(gè)像素的條紋，切出來(lái)的三個(gè)條紋可以合并到一張圖片里(上、中、下)，使網(wǎng)頁(yè)中使用的時(shí)候用css中的positon屬性來(lái)定位圖片出現(xiàn)的位置。
在切割效果圖的過(guò)程中，對(duì)于圖片的保存格式也有講究，一般來(lái)說(shuō)，用圖像工具(如photoshop)制作的色彩絢麗的按鈕或圖標(biāo)一般都存成png格式，而用相機(jī)拍攝的風(fēng)景或人物、物體圖像多用jpg格式保存，gif一般用來(lái)存儲(chǔ)含有簡(jiǎn)單動(dòng)畫(huà)效果的圖像，另外需要注意一點(diǎn)的是，如果圖片中使用了透明效果，要存儲(chǔ)成png-8的格式，png的其他格式要么不支持透明，要么保存時(shí)文件要大很多，png-8是”性?xún)r(jià)比”最高的。
圖標(biāo)一般用png格式
對(duì)于用作背景或襯托效果的顏色較多的圖片，保存圖片時(shí)盡可能從清晰度和圖片大小中找到一個(gè)平衡，既保證圖片盡可能小又不失真，這點(diǎn)就要憑個(gè)人經(jīng)驗(yàn)了，因?yàn)槊總€(gè)人的標(biāo)準(zhǔn)不同，千萬(wàn)不能不壓縮圖片直接放上去，然后靠width和height來(lái)進(jìn)行限制，這樣做是自欺欺人，瀏覽器會(huì)先把大圖片下載到本地，然后用樣式強(qiáng)制將它壓縮，顯示不但不會(huì)更清楚，反而會(huì)失真，曾經(jīng)我就遇到過(guò)有個(gè)網(wǎng)站首頁(yè)都打開(kāi)了，唯有一個(gè)局部是個(gè)空白的方形，過(guò)了好幾秒才加載出來(lái)一張圖片，好奇的下載了這張圖片，竟然有2M多……這一點(diǎn)不光是首頁(yè)切圖，在網(wǎng)站的內(nèi)容上傳時(shí)最好也要養(yǎng)成良好的習(xí)慣，特別是新聞的配圖，現(xiàn)在的相機(jī)效果越來(lái)越好，拍出來(lái)的圖片動(dòng)不動(dòng)好幾兆，一定要對(duì)圖片尺寸進(jìn)行處理后再上傳，一般處理圖片的寬度為500-600像素之間，高度自動(dòng)等比例即可。
切好圖片的命名也要養(yǎng)成良好的習(xí)慣，最好的命名習(xí)慣就是見(jiàn)名知意，我見(jiàn)多數(shù)網(wǎng)站的圖片使用切圖工具軟件批量切割的，命名很不規(guī)范，比如index_01、index_02、index_02_01等有規(guī)則但無(wú)意義的圖片，也許你說(shuō)圖片命名本身的意義并不是很大，因?yàn)檫@個(gè)名字只有瀏覽器加載的時(shí)候才會(huì)用，但是，對(duì)于一個(gè)擴(kuò)展性強(qiáng)的網(wǎng)站來(lái)說(shuō)，在進(jìn)行改版和維護(hù)的時(shí)候，如果要更換某些網(wǎng)站圖片，就需要一個(gè)一個(gè)從瀏覽器中右鍵查看圖片地址，記下每一個(gè)長(zhǎng)長(zhǎng)的沒(méi)有規(guī)律的圖片名稱(chēng)，這會(huì)讓技術(shù)人員十分崩潰(也可能就是你自己)，所以，在保存圖片時(shí)就給它寫(xiě)上有意義的名字是很必要的。
當(dāng)然，蒙特網(wǎng)站制作公司還有非常多的經(jīng)驗(yàn)要與大家分享，由于時(shí)間的緣故我們就分享到這里。如果大家有網(wǎng)站制作的需要?dú)g迎隨時(shí)來(lái)蒙特交流，請(qǐng)記住蒙特?zé)峋€是151581847365。
杭州蒙特網(wǎng)站制作16年，經(jīng)驗(yàn)告訴我們，首頁(yè)圖片很多的網(wǎng)站打開(kāi)會(huì)很慢，一是因?yàn)閳D片多，需要下載的文件體積就增大，二是每一個(gè)圖片下載都會(huì)對(duì)服務(wù)器有一個(gè)請(qǐng)求，增大了瀏覽器與服務(wù)端的交互次數(shù)，如果能把純色的部分用css來(lái)寫(xiě)，而不因?yàn)槭∈轮苯忧袌D，就會(huì)極大提高網(wǎng)站的運(yùn)行效率。如果遇到有漸變色的背景，可以沿著與漸變色相同方向切一個(gè)像素的條紋，用css中background的repeat-x或repeat-y來(lái)自動(dòng)填充。
導(dǎo)航欄效果圖
對(duì)于有圓角的導(dǎo)航條圖片，可以將兩邊的圓角部分單獨(dú)切出來(lái)，中間如果有漸變色，也是只切一個(gè)像素的條紋，切出來(lái)的三個(gè)條紋可以合并到一張圖片里(上、中、下)，使網(wǎng)頁(yè)中使用的時(shí)候用css中的positon屬性來(lái)定位圖片出現(xiàn)的位置。
在切割效果圖的過(guò)程中，對(duì)于圖片的保存格式也有講究，一般來(lái)說(shuō)，用圖像工具(如photoshop)制作的色彩絢麗的按鈕或圖標(biāo)一般都存成png格式，而用相機(jī)拍攝的風(fēng)景或人物、物體圖像多用jpg格式保存，gif一般用來(lái)存儲(chǔ)含有簡(jiǎn)單動(dòng)畫(huà)效果的圖像，另外需要注意一點(diǎn)的是，如果圖片中使用了透明效果，要存儲(chǔ)成png-8的格式，png的其他格式要么不支持透明，要么保存時(shí)文件要大很多，png-8是”性?xún)r(jià)比”最高的。
圖標(biāo)一般用png格式
對(duì)于用作背景或襯托效果的顏色較多的圖片，保存圖片時(shí)盡可能從清晰度和圖片大小中找到一個(gè)平衡，既保證圖片盡可能小又不失真，這點(diǎn)就要憑個(gè)人經(jīng)驗(yàn)了，因?yàn)槊總€(gè)人的標(biāo)準(zhǔn)不同，千萬(wàn)不能不壓縮圖片直接放上去，然后靠width和height來(lái)進(jìn)行限制，這樣做是自欺欺人，瀏覽器會(huì)先把大圖片下載到本地，然后用樣式強(qiáng)制將它壓縮，顯示不但不會(huì)更清楚，反而會(huì)失真，曾經(jīng)我就遇到過(guò)有個(gè)網(wǎng)站首頁(yè)都打開(kāi)了，唯有一個(gè)局部是個(gè)空白的方形，過(guò)了好幾秒才加載出來(lái)一張圖片，好奇的下載了這張圖片，竟然有2M多……這一點(diǎn)不光是首頁(yè)切圖，在網(wǎng)站的內(nèi)容上傳時(shí)最好也要養(yǎng)成良好的習(xí)慣，特別是新聞的配圖，現(xiàn)在的相機(jī)效果越來(lái)越好，拍出來(lái)的圖片動(dòng)不動(dòng)好幾兆，一定要對(duì)圖片尺寸進(jìn)行處理后再上傳，一般處理圖片的寬度為500-600像素之間，高度自動(dòng)等比例即可。
切好圖片的命名也要養(yǎng)成良好的習(xí)慣，最好的命名習(xí)慣就是見(jiàn)名知意，我見(jiàn)多數(shù)網(wǎng)站的圖片使用切圖工具軟件批量切割的，命名很不規(guī)范，比如index_01、index_02、index_02_01等有規(guī)則但無(wú)意義的圖片，也許你說(shuō)圖片命名本身的意義并不是很大，因?yàn)檫@個(gè)名字只有瀏覽器加載的時(shí)候才會(huì)用，但是，對(duì)于一個(gè)擴(kuò)展性強(qiáng)的網(wǎng)站來(lái)說(shuō)，在進(jìn)行改版和維護(hù)的時(shí)候，如果要更換某些網(wǎng)站圖片，就需要一個(gè)一個(gè)從瀏覽器中右鍵查看圖片地址，記下每一個(gè)長(zhǎng)長(zhǎng)的沒(méi)有規(guī)律的圖片名稱(chēng)，這會(huì)讓技術(shù)人員十分崩潰(也可能就是你自己)，所以，在保存圖片時(shí)就給它寫(xiě)上有意義的名字是很必要的。
當(dāng)然，蒙特網(wǎng)站制作公司還有非常多的經(jīng)驗(yàn)要與大家分享，由于時(shí)間的緣故我們就分享到這里。如果大家有網(wǎng)站制作的需要?dú)g迎隨時(shí)來(lái)蒙特交流，請(qǐng)記住蒙特?zé)峋€是151581847365。
