加速圖片顯示_網(wǎng)頁(yè)設(shè)計(jì)教程
推薦:劉亮:什么網(wǎng)站才算是好站?一網(wǎng)站的發(fā)展歷史及其當(dāng)前在行業(yè)內(nèi)的地位(這方面的判定需要很長(zhǎng)時(shí)間的積淀)二網(wǎng)站的整體印象1打開速度和外觀設(shè)計(jì)(需要對(duì)比較流行的模版程序有所了解)
原文:http://blog.rexsong.com/?p=746#comments
加速的要害,不是降低重量,而是減少個(gè)數(shù)。假如重量在200K以內(nèi),只要網(wǎng)絡(luò)不是非凡慢,效率都差不多。但是,假如圖片個(gè)數(shù)多一倍,效率將明顯低一個(gè)檔次。
傳統(tǒng)切圖講究精細(xì),圖片規(guī)格越小越好,重量越小越好,其實(shí)規(guī)格大小無(wú)所謂,計(jì)算機(jī)統(tǒng)一都按Byte計(jì)算。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求,所以,圖片越多請(qǐng)求次數(shù)越多,造成延遲的可能性也就越大。因?yàn)橐粡垐D片的傳輸時(shí)間,通常遠(yuǎn)小于請(qǐng)求等待的時(shí)間。
減少圖片的三個(gè)技巧(CSS Sprite):
1. 圖片限制(Image Slicing)
典型如文本編輯器,小圖標(biāo)非凡多,打開時(shí)一張張跑出來(lái),給用戶的感覺(jué)很不好。假如能用一張圖解決,則不會(huì)有這個(gè)問(wèn)題,比如百度空間、163博客、Gmail都是這么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 單圖轉(zhuǎn)滾(Single-image Rollovers)
觸發(fā)切換圖片的需求,傳統(tǒng)方案得重新請(qǐng)求新圖片,因?yàn)榫W(wǎng)絡(luò)問(wèn)題經(jīng)常造成停留或等待。假如能把多種狀態(tài)合并成一張圖,就能完美解決,然后再使用背景圖技術(shù)模擬動(dòng)態(tài)效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延長(zhǎng)背景(Extend Background Image)
假如圖片的某邊可以背景平鋪無(wú)限延長(zhǎng),則不需要每個(gè)角、每條邊單獨(dú)搞出來(lái),圖片能少一個(gè)就少一個(gè)。其實(shí),這個(gè)理論還可以擴(kuò)展到四角容器里,好處是能大大簡(jiǎn)化HTML Structure。
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
綜合案例
Google Korea(1和2技巧)
http://demo.rexsong.com/200705/google_korea/
CSS Menus(2和3技巧)
http://demo.rexsong.com/200705/css_background_menus/
分享:你的網(wǎng)站及格了嗎?針對(duì)中小網(wǎng)站的評(píng)分機(jī)制經(jīng)常有些朋友問(wèn):我想做個(gè)XX站你看能做不?或者問(wèn):我想買XX站,你看買了能做起來(lái)不?頻繁回答類似問(wèn)題,并且準(zhǔn)確度還蠻高,其實(shí)就是每次看一個(gè)站,就是給他簡(jiǎn)
- 中國(guó)互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬(wàn) 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會(huì):打假,打出阿里的新未來(lái)
- 實(shí)踐分享:ACCESS數(shù)據(jù)庫(kù)導(dǎo)入mysql數(shù)據(jù)庫(kù)
- ACCESS數(shù)據(jù)庫(kù)轉(zhuǎn)ORACLE數(shù)據(jù)庫(kù)分享
- CDN.net免費(fèi)CDN申請(qǐng)使用教程:100GB流量香港日本新加坡節(jié)點(diǎn)
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺(tái)教程(二) 消息管理與群發(fā)
- 中國(guó)IPv4地址今年將告罄 IPv6期待打破政策局
- 移動(dòng)廣告野蠻成長(zhǎng):75%投放在iOS平臺(tái)
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬(wàn)部iPhone遭蘋果退貨 損失10億元
網(wǎng)頁(yè)設(shè)計(jì)教程Rss訂閱網(wǎng)站制作教程搜索
網(wǎng)頁(yè)設(shè)計(jì)教程推薦
猜你也喜歡看這些
- 深入CSS結(jié)構(gòu):合理運(yùn)用div和span
- 利用CSS改善網(wǎng)站可訪問(wèn)性
- 伴隨著Web標(biāo)準(zhǔn)發(fā)展
- 到底什么是Web2.0 - Web2.0學(xué)習(xí)指南
- 2005年web標(biāo)準(zhǔn)發(fā)展回顧
- 網(wǎng)站重構(gòu)CSS的優(yōu)化技巧
- 第12天:校驗(yàn)及常見錯(cuò)誤
- 一個(gè)簡(jiǎn)單又不簡(jiǎn)單的Css設(shè)計(jì)實(shí)例
- 使用Web標(biāo)準(zhǔn)建站第3天:定義語(yǔ)言編碼
- 符合Web標(biāo)準(zhǔn)的超鏈接
- 相關(guān)鏈接:
- 教程說(shuō)明:
網(wǎng)頁(yè)設(shè)計(jì)教程-加速圖片顯示
。





