當(dāng)前位置:首頁 >  站長 >  建站經(jīng)驗 >  正文

網(wǎng)站速度優(yōu)化新招數(shù):使用data類型圖片

 2013-03-13 17:06  來源: 5177游戲攻略   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

隨著搜索引擎的不斷進(jìn)步,外鏈在SEO優(yōu)化當(dāng)中的占的比重呈下滑趨勢,而其他影響到用戶體驗的因素慢慢走近SEOer的視野。通過百度推出的一些產(chǎn)品(百度站長平臺、百度統(tǒng)計)我們可以看到,網(wǎng)站的加載速度已經(jīng)成為影響排名的因素之一了。并且,網(wǎng)頁盡可能快地加載還能影響到用戶體驗,從而影響到用戶在網(wǎng)站停留的時間以及跳出率。那么,優(yōu)化網(wǎng)站的加載速度就是非常必要的了。

可能略微懂些前端的站長知道,提升網(wǎng)頁加載速度的一個途徑就是減少HTTP請求次數(shù)。雪碧圖(CSS Sprites)就是這個思路的產(chǎn)物,將多張圖片合并到一張圖片,這樣就將多次請求合并為一次請求,達(dá)到了快速加載網(wǎng)頁的目的。但是雪碧圖的圖片合并為網(wǎng)頁的修改帶來了麻煩,想要刪除或者增加圖片又必須重新合并一次,這樣無疑增加了工作量降低了工作效率。那么有什么可以替代雪碧圖,同樣達(dá)到減少HTTP請求的目的呢?答案是:data類型圖片。

所謂"data"類型的Url格式,是在RFC2397中 提出的,目的對于一些“小”的數(shù)據(jù),可以在網(wǎng)頁中直接嵌入,而不是從外部文件載入。例如對于img這個Tag,哪怕這個圖片非常非常的小,小到只有一個 點(diǎn),也是要從另外一個外部的圖片文件例如gif文件中讀入的,如果瀏覽器實(shí)現(xiàn)了data類型的Url格式,這個文件就可以直接從頁面文件內(nèi)部讀入了。data類型的Url格式早在1998年就提出了,時至今日,F(xiàn)irfox、Opera、Safari和Konqueror這些瀏覽器都已經(jīng)支持,但是IE直到7.0版本都還沒有支持,IE不支持的東西太多了,也不差這一個。:(

 

data類型圖片如何生成?

將圖片數(shù)據(jù)base64編碼后,在前面加上:data:image/jpeg;base64,(其中的jpeg請?zhí)鎿Q成您自己的圖片類型),即可使用于CSS文件(直接將CSS文件當(dāng)中的圖片路徑替換為處理后的字符串即可,可以參考一下上面的圖片)。

data類型圖片有何優(yōu)點(diǎn)?

data類型圖片可以將CSS當(dāng)中的所有圖片都放到CSS文件當(dāng)中而不需要重新發(fā)起請求加載,也就是說,只需要請求CSS文件就夠了,減少了HTTP請求次數(shù)。并且增加圖片或者刪除圖片可以直接增加和刪除,不像雪碧圖需要重新合成。非常方便。

data類型圖片的缺點(diǎn)

data類型圖片有一個缺點(diǎn),就是data類型圖片相比于文件圖片的體積會大三分之一左右。因此不建議將非常大的圖片也使用data類型,針對于小圖片data類型更有優(yōu)勢。對于一些頁面簡潔的博客來說,將所有圖標(biāo)轉(zhuǎn)化為data類型后放到CSS文件當(dāng)中,完全可以僅僅只加載一個CSS文件就可以搞定整個頁面的樣式了。

本文由:首發(fā),轉(zhuǎn)載請注明版權(quán)。并且我寫了一個PHP版的小工具,可以將普通圖片轉(zhuǎn)換為data類型的圖片:

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

  • 游戲網(wǎng)站運(yùn)營推廣的老招數(shù)和新招數(shù)

    網(wǎng)游,曾經(jīng)開創(chuàng)了互聯(lián)網(wǎng)最早最快速盈利模式的一種產(chǎn)品,例如時長收費(fèi)制、進(jìn)入免費(fèi)買賣裝備制、點(diǎn)卡制等等,并且也催生了一批大把賺取鈔票的互聯(lián)網(wǎng)公司,至今這些互聯(lián)網(wǎng)公司依然名號響當(dāng)當(dāng),現(xiàn)金流水嘩啦啦。例如網(wǎng)易、盛大、騰訊。在這一過程中,游戲網(wǎng)站的作用不可忽視。眾多的網(wǎng)游公司也在網(wǎng)站的建設(shè)、運(yùn)營以及推廣了花掉

    標(biāo)簽:
    網(wǎng)站推廣新招
  • 編輯高質(zhì)量原創(chuàng)出新招 利用新站讓網(wǎng)站質(zhì)量節(jié)節(jié)升高

    為網(wǎng)站編輯原創(chuàng)高質(zhì)量的文章一直是普通站長與普通編輯的頭疼事,雖然有一部分站長已經(jīng)請人進(jìn)行了內(nèi)容創(chuàng)作,但這畢竟不是長久之計,要明白一名普通的編輯是不可能有效與網(wǎng)站的思想相互結(jié)合的,這就造成了牛頭不對馬嘴,在短的時間中還沒有什么影響,但時間一長對網(wǎng)站的

  • 百度大更新出新招 醫(yī)藥網(wǎng)站能否繼續(xù)前行

    2012年11月8號和往常一樣到公司打開電腦查看下手里站的情況。發(fā)現(xiàn)這些網(wǎng)站的收錄、鏈接、關(guān)鍵詞排名都有不同程度的波動,而更讓我驚奇的是,百度對于醫(yī)療、醫(yī)藥網(wǎng)站,又進(jìn)行了如下圖的一些備案信息備注:出現(xiàn)這種情況,而百度在這個時候大更新又出新招,醫(yī)藥網(wǎng)站還能

    標(biāo)簽:
    網(wǎng)站推廣新招
  • 地方網(wǎng)站發(fā)展創(chuàng)新招:動用廣泛社會關(guān)系

    地方網(wǎng)站的競爭越來越激烈,隨著競爭的加劇帶來的是站長負(fù)擔(dān)的加重。新聞采編、網(wǎng)站編輯、SEO優(yōu)化人員、數(shù)據(jù)分析等等都需要靠人來運(yùn)營網(wǎng)站,而這些人員的資金都是靠地方網(wǎng)站的盈利而換取的,而隨著競爭的加劇很多地方網(wǎng)站已經(jīng)入不敷出,面對如此情況樹立地方網(wǎng)站的品牌

    標(biāo)簽:
    網(wǎng)站推廣新招
  • 網(wǎng)站推廣的新招巧妙 沒百度一樣行

    很久沒來站長網(wǎng)了,最近比較忙,也沒時間發(fā)文章。下面我寫的文章都是完全真實(shí),不是炒作不是想騙流量。大家喜歡的支持下,不喜歡的別踩了就好。早段時間賣了個域名,就是之前我寫過的文章,百度1天收錄的那域名。真的有點(diǎn)不舍得,但那域名用來做論壇,又不太

    標(biāo)簽:
    網(wǎng)站推廣新招

熱門排行

信息推薦