企業網站建設中圖片的優化方法
2019.03.29
1、控製jpg圖片的質量
網站建設時質量高的jpg格式圖片比較清晰，色彩更鮮豔，不少人就用這種圖片來美化header，其實這對速度的影響是很大的，因為打開一個頁麵首先加載的就是header，header加jia載zai時shi間jian太tai長chang的de話hua，很hen容rong易yi使shi第di一yi次ci來lai的de訪fang客ke反fan感gan，還hai有you一yi種zhong情qing況kuang是shi頁ye麵mian上shang的de小xiao圖tu標biao，有you些xie站zhan長chang過guo於yu追zhui求qiu美mei觀guan，於yu是shi頁ye麵mian上shang的de小xiao圖tu標biao也ye用yong高gao質zhi量liang的de圖tu片pian來lai做zuo，這zhe是shi很hen沒mei必bi要yao的de。
3、如何插入裝飾性圖片 這裏要講的不是簡單的用img標簽插入圖像，用這種方法插入頁麵小圖標等裝飾性圖片弊端是非常大的。首先，用img標簽插入的圖片不能通過簡單的方法實現變換效果，在這裏，美化效果要打個折扣，其次，用img插入的圖片，如果圖片不在瀏覽器緩存裏，而且不重複出現的話，會大大增加http請求數。因為img標簽理論上是出現一次載入一次的。其三，用img標簽不利於調整圖片位置，如果一個圖片，需要在header靠右和footer靠左這兩個位置出現兩次，你就需要為它寫兩次css。其四，用img標簽插入圖片不利於整合，整合圖片可以大大減少http請求數，到底整合圖片有什麼技巧呢?看下節。
4、頁麵背景圖片的處理方法 很多人喜歡用圖片做頁麵元素的hover變bian換huan效xiao果guo，但dan是shi卻que沒mei有you把ba相xiang關guan的de圖tu片pian整zheng合he，導dao致zhi一yi些xie變bian換huan效xiao果guo有you事shi會hui因yin為wei圖tu片pian載zai入ru失shi敗bai而er失shi色se。我wo們men可ke以yi把ba針zhen對dui某mou個ge效xiao果guo的de圖tu片pian都dou整zheng合he成cheng一yi個ge文wen件jian，在zaicss裏用background-position屬性調整圖片位置。這種做法的好處是背景隻需要一次http請求，圖片可以重複調用，也有利於圖片變換。看到這裏，你知道裝飾性圖片應該怎麼插入了嗎?對，用css。
5、插圖盡量使用外鏈 由於服務器性能的限製，一般非獨立主機都會限製單ip的http請求數，如果一個頁麵裏http請qing求qiu太tai多duo的de話hua，頁ye麵mian往wang往wang要yao等deng很hen久jiu才cai能neng完wan全quan載zai入ru。特te別bie是shi圖tu片pian，如ru果guo太tai長chang時shi間jian不bu能neng加jia載zai的de話hua，瀏liu覽lan器qi就jiu會hui斷duan開kai與yu服fu務wu器qi的de鏈lian接jie，這zhe是shi就jiu需xu要yao在zai點dian擊ji一yi下xia顯xian示shi圖tu片pian才cai能neng顯xian示shi出chu來lai，比bi較jiao好hao的de支zhi持chi外wai鏈lian的de相xiang冊ce有youpicasa、flickr和國內的yupoo等。這樣做不但能減輕服務器壓力，節約流量，更重要的是，我不相信大部分站長用的服務器比那些專業的在線相冊快。
6，提高圖片傳輸並行程度
使用多個而不是一個域名訪問圖片
大多數瀏覽器中，對於同一域名下的並發HTTP請求數是有限製的，一般為幾個。當頁麵中圖片數量較多時，可以考慮分配不用的域名來訪問。比如，原本的圖片托管域名為image.fractal-technology.com，可以考慮增加幾個子域名，如image-1.fractal-technology.com、image-2.fractal-technology.com等，將他們都CNAME到image.fractal-technology.com。然後在你的頁麵中，當需要訪問圖片時，隨機分配所用的域名。
7，延遲加載圖片
原理很簡單，就是對於<img>標簽，先不要寫上它的資源地址src（因為隻要寫上了，瀏覽器加載到這個img標簽，就會去下載src指向的圖片資源），可以把它的資源地址先寫在一個臨時屬性裏，下麵用到的一段js（相當於一個js小插件）中寫在了一個屬性originalSrc裏（這個屬性叫啥都可以的），然後給<img>標簽們綁定事件，這個事件就是判斷其是否出現在了瀏覽器的當前顯示區域，如果出現了，就把originalSrc指示的資源地址寫給<img>標簽的src，src寫入後瀏覽器就會去下載圖片資源，如此就實現了圖片的延遲加載。
