創新易聯歡迎您!13年專注深圳網站建設

深圳網站制作:網站速度優化新招數:使用data類型圖片

日期:2014-08-27 | 來源:易聯網站建設公司 | 閱讀:

深圳網站建設www.gkibha.live )作為市場資深品牌,8年來,立足廣東,面向全國,已服務過3000多家具有頂級發展潛力的企業,并一直保持良好的合作伙伴關系,成為中國第一高端精品網站設計策劃機構,網站建設第一品牌!

 

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

 

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

 

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

 

 

data類型圖片如何生成?

 

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

 

data類型圖片有何優點?

 

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

 

data類型圖片的缺點

 

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


 

本文由深圳網站建設公司:Alan整理,轉載時請保留此鏈接,謝謝合作!

—— 微信公眾號 ——

熱門標簽

急速赛车单机版