網站速度優化新招數：運用data類型圖片

跟著搜索引擎的不斷進步，外鏈在SEO優化傍邊的占的比重呈下滑趨勢，而其他影響到用戶體會的要素漸漸走近SEOer的視界。經過百度推出的一些產品（百度站長渠道、百度統計）我們能夠看到，網站的加載速度現已成為影響排名的要素之一了。而且，網頁盡可能快地加載還能影響到用戶體會，然后影響到用戶在網站逗留的時刻以及跳出率。那么，優化網站的加載速度就是十分必要的了。

可能稍微懂些前端的站長知道，提高網頁加載速度的一個途徑就是削減HTTP懇求次數。雪碧圖(CSS Sprites)就是這個思路的產品，將多張圖片兼并到一張圖片，這樣就將屢次懇求兼并為一次懇求，到達了快速加載網頁的意圖?？墒茄┍虉D的圖片兼并為網頁的修改帶來了費事，想要刪去或許添加圖片又有必要從頭兼并一次，這樣無疑添加了工作量降低了工作效率。那么有什么能夠替代雪碧圖，相同到達削減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文件就能夠搞定整個頁面的款式了。