建站常識
加速圖片顯示
2007-06-06 15:01:00
加速的關(guān)鍵，不是降低重量，而是減少個數(shù)。如果重量在200K以內(nèi)，只要網(wǎng)絡(luò)不是特別慢，效率都差不多。但是，如果圖片個數(shù)多一倍，效率將明顯低一個檔次。
傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無所謂，計(jì)算機(jī)統(tǒng)一都按Byte計(jì)算。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求，所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。因?yàn)橐粡垐D片的傳輸時間，通常遠(yuǎn)小于請求等待的時間。
減少圖片的三個技巧(CSS Sprite)：
1. 圖片限制(Image Slicing)
典型如文本編輯器，小圖標(biāo)特別多，打開時一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會有這個問題，比如百度空間、163博客、Gmail都是這么做的。
Image Slicing’s Kiss of Death
2. 單圖轉(zhuǎn)滾(Single-image Rollovers)
觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請求新圖片，因?yàn)榫W(wǎng)絡(luò)問題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術(shù)模擬動態(tài)效果。
ColorScheme Ratings
3. 延長背景(Extend Background Image)
如果圖片的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨(dú)搞出來，圖片能少一個就少一個。其實(shí)，這個理論還可以擴(kuò)展到四角容器里，好處是能大大簡化HTML Structure。
Extend Background Image
綜合案例
Google Korea（1和2技巧）
CSS Menus（2和3技巧）
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感？
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站！
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容？
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊？
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看，這個網(wǎng)站就成功了一大半！
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么？有什么作用？
- [2022-05-17 11:29:32] 作為消費(fèi)者，應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇？
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢？
延伸閱讀
- [2019-06-09 11:36:02] 運(yùn)動的圖形圖片在網(wǎng)站上的體現(xiàn)
- [2007-11-05 11:32:00] 活動網(wǎng)站設(shè)計(jì)點(diǎn)評之LG顯示器
- [2009-06-04 16:23:00] Web設(shè)計(jì)師需要的10個高質(zhì)量的ICON圖片資源網(wǎng)站
- [2019-04-03 16:19:56] 使用什么樣子的圖片可以讓網(wǎng)站更加豐富
- [2009-08-01 22:33:00] 好的產(chǎn)品設(shè)計(jì)并非始于圖片，而是對人的理解
- [2007-09-20 22:49:00] 如何解決IE地址欄前小圖標(biāo)不顯示問題
- [2008-02-13 11:29:00] 圖片與文本誰更重要？
- [2014-07-18 22:39:45] 織夢advancedsearch頁面顯示自定義字段
- [2018-03-28 10:04:17] 科普網(wǎng)站設(shè)計(jì)、制作中的圖片版權(quán)
- [2009-08-04 14:19:00] 如何在小空間放置大圖片
- [2008-02-14 12:42:00] 網(wǎng)站中的圖片設(shè)計(jì)
- [2009-06-09 22:34:00] 圖片投射方法在會員官網(wǎng)視覺風(fēng)格調(diào)研中的運(yùn)用
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島做網(wǎng)站多少錢 青島網(wǎng)站SEO 青島高端網(wǎng)站建設(shè) IT資訊 網(wǎng)站設(shè)計(jì)趨勢 插畫 青島高端網(wǎng)站建設(shè)公司哪家好 企業(yè)建站 SEO優(yōu)化 網(wǎng)站建設(shè)的步驟有哪些 青島輪胎網(wǎng)站設(shè)計(jì)公司 H5 網(wǎng)站動畫 搜索引擎 青島不錯的英文網(wǎng)站建設(shè)公司 營銷型網(wǎng)站建設(shè) 用戶界面 手機(jī)網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計(jì) 青島網(wǎng)頁設(shè)計(jì) GOOGLE php程序 建站常識 英文網(wǎng)站建設(shè) 網(wǎng)站SEO 良好的導(dǎo)航 青島網(wǎng)站建設(shè)基礎(chǔ)知識 青島網(wǎng)站制作 青島輪胎網(wǎng)站設(shè)計(jì) 色彩心理學(xué)
