建站
咨詢
售后
建站咨詢
新聞中心
一、縮小圖片大小
創(chuàng)新互聯(lián)公司十多年專注成都高端網(wǎng)站建設(shè)按需求定制網(wǎng)站服務(wù),為客戶提供專業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)服務(wù);創(chuàng)新互聯(lián)公司服務(wù)內(nèi)容包含成都網(wǎng)站建設(shè),微信小程序定制開(kāi)發(fā),軟件開(kāi)發(fā),網(wǎng)絡(luò)營(yíng)銷推廣,網(wǎng)絡(luò)運(yùn)營(yíng)服務(wù)及企業(yè)形象設(shè)計(jì);創(chuàng)新互聯(lián)公司擁有眾多專業(yè)的高端網(wǎng)站制作開(kāi)發(fā)團(tuán)隊(duì),資深的高端網(wǎng)頁(yè)設(shè)計(jì)團(tuán)隊(duì)及經(jīng)驗(yàn)豐富的架構(gòu)師高端網(wǎng)站策劃團(tuán)隊(duì);我們始終堅(jiān)持從客戶的角度出發(fā),為客戶量身訂造網(wǎng)絡(luò)營(yíng)銷方案，解決網(wǎng)絡(luò)營(yíng)銷疑問(wèn)。
當(dāng)圖片很多的時(shí)候，減少圖片大小是提高下載速度最直接的方法。
1. 使用PNG8代替GIF(非動(dòng)畫(huà)圖片)，因?yàn)镻NG8在效果一樣的情況，圖片大小比GIF要小。
2. 用fireworks處理PNG圖片，在我們產(chǎn)品中很多PNG圖片是美工直接用photoshop導(dǎo)出的，
后來(lái)讓美工用fireworks處理PNG(大概的方式是選擇保存為PNG8,刪除背景色)。
處理后100K的圖片大小基本減少了3/4，但圖片質(zhì)量也會(huì)有少許降低，要看自己是否能接受。
3. 使用Smush.it(http://www.smushit.com/ysmush.it/)壓縮圖片，Smush.it是YUI團(tuán)隊(duì)做1個(gè)在線壓縮圖片的網(wǎng)站，
該網(wǎng)站在不影響原圖片的質(zhì)量下去掉圖片中一些元數(shù)據(jù)，所以可以放心使用該網(wǎng)站進(jìn)行壓縮，
但這個(gè)壓縮比例也是比較有限的。
二、合并圖片和拆分圖片
1. CSS Sprites合并圖片以減少請(qǐng)求數(shù)來(lái)提高性能大家都知道。但不要把圖片合并太多，太多太大了，
就會(huì)因?yàn)檫@1個(gè)圖片影響這個(gè)頁(yè)面的顯示了。
2. 有時(shí)候我們需要把1個(gè)大圖片拆分成多個(gè)小圖片，比如產(chǎn)品首頁(yè)圖片比較少，就1個(gè)很大的banner圖片，
因?yàn)g覽器都可以并發(fā)下載圖片，所以如果不拆分，只使用1個(gè)大圖片的話，下載速度反而會(huì)比較慢
三、透明圖片處理
IE6不能顯示透明的PNG圖片，是很多開(kāi)發(fā)人員特別頭疼的事，分別介紹下幾種方式的優(yōu)缺點(diǎn)。
1.使用AlphaImageLoader，IE6支持filter,使用下面的CSS代碼，可以讓IE6支持PNG
- #some-element {
- background: url(image.png);
- _background: none;
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
- }
優(yōu)點(diǎn)：使用簡(jiǎn)單
缺點(diǎn)：性能損耗很大,AlphaImageLoader會(huì)花費(fèi)很多資源去處理透明圖片，使用AlphaImageLoader,IE使用內(nèi)存會(huì)迅速上升。
而且AlphaImageLoader所有處理都在同1個(gè)線程中同步進(jìn)行，所以當(dāng)AlphaImageLoader多的時(shí)候，會(huì)阻塞UI的渲染。
使用_filter，IE7也可以識(shí)別，其實(shí)IE7是可以識(shí)別PNG透明圖片的，如果在IE7下使用上面代碼，IE7不會(huì)直接使用圖片，而是使用AlphaImageLoader。
注：個(gè)人建議盡量避免使用AlphaImageLoader
2. JS處理
使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很簡(jiǎn)單的對(duì)界面上所有的透明圖片進(jìn)行同一處理。
優(yōu)點(diǎn)：使用簡(jiǎn)單(比AlphaImageLoader還簡(jiǎn)單)
缺點(diǎn)：當(dāng)頁(yè)面上需要處理的圖片比較多的時(shí)候，速度也比較慢，而且不能動(dòng)態(tài)改變圖片。
3. VML
IE6支持VML，VML可以使用透明圖片，代碼如下：
修改html代碼頭部
- html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v >
- head >
- style type ="text/css" >
- v\:* { behavior : url(#default#VML) ; }
- span style="color: rgb(128, 0, 0);">style >
- span style="color: rgb(128, 0, 0);">head >
- body >
- v:image src ="image.png" />
- span style="color: rgb(128, 0, 0);">body >
- span style="color: rgb(128, 0, 0);">html >
優(yōu)點(diǎn)：性能好，速度快
缺點(diǎn)：使用復(fù)雜，而且不支持firefox等瀏覽器，需要判斷不同的瀏覽器輸出不同的HTML代碼。
四、多域名下載圖片
因每個(gè)瀏覽器對(duì)同1個(gè)域名同時(shí)只能發(fā)送固定的請(qǐng)求，比如IE6好像是2個(gè)，所以可以對(duì)圖片資源開(kāi)通多個(gè)域名進(jìn)行請(qǐng)求，
比如img1.abc.com,img2.abc.com。但域名不要開(kāi)啟太多，因?yàn)榻馕鲇蛎痛蜷_(kāi)新的連接都需要消耗時(shí)間，域名多了，說(shuō)不定反而會(huì)更慢。一般2-4個(gè)域名就夠了。
五、IE6下緩存背景圖片
IE6背景圖片緩存是個(gè)麻煩事，很多人知道使用下面的JS來(lái)讓IE6緩存背景圖片
- try{
- document.execCommand("BackgroundImageCache", false, true);
- }catch(e){}
但是這樣做的效果并不是非常好，當(dāng)出現(xiàn)鼠標(biāo)移動(dòng)改變背景圖片的時(shí)候，IE6老是會(huì)發(fā)送1個(gè)圖片請(qǐng)求(盡管該背景圖片已經(jīng)下載)，
雖然返回結(jié)果是304，但還是要花費(fèi)不少時(shí)間。在這種情況下，可以使用下面1個(gè)變通的方式來(lái)處理，
在頁(yè)面上直接使用1個(gè)DIV元素來(lái)加載該圖片，這樣加載圖片就能真正被緩存，鼠標(biāo)移動(dòng)也不會(huì)發(fā)送請(qǐng)求了。
六、預(yù)加載圖片
使用下面代碼可以在頁(yè)面加載完畢后預(yù)加載下1個(gè)頁(yè)面的圖片，當(dāng)進(jìn)入下1個(gè)頁(yè)面就不用再下載圖片了。
- window.onload=function(){
- var img = new Image();
- img.src = "images/image.png";
- img = null;
- };
原文鏈接:http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html
系列文章：
高性能WEB開(kāi)發(fā)之Web性能測(cè)試工具推薦
高性能WEB開(kāi)發(fā)之HTTP服務(wù)器
【編輯推薦】
- 探索移動(dòng)Web網(wǎng)頁(yè)編碼設(shè)計(jì)
- 分享31套精美的Web和手機(jī)開(kāi)發(fā)UI素材包
- Web設(shè)計(jì)師：網(wǎng)頁(yè)設(shè)計(jì)如何自學(xué)成才
- Web開(kāi)發(fā)者不能忽略的10個(gè)設(shè)計(jì)元素
- Web開(kāi)發(fā)人員必收藏的常用速查手冊(cè)
當(dāng)前標(biāo)題：高性能WEB開(kāi)發(fā)之圖片篇
分享網(wǎng)址：http://m.5511xx.com/article/ccsidco.html
