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

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

可能稍微懂些前端的站長知道，提高網(wǎng)頁加載速度的一個途徑就是削減HTTP懇求次數(shù)。雪碧圖(CSS Sprites)就是這個思路的產(chǎn)品，將多張圖片兼并到一張圖片，這樣就將屢次懇求兼并為一次懇求，到達(dá)了快速加載網(wǎng)頁的意圖�？墒茄┍虉D的圖片兼并為網(wǎng)頁的修改帶來了費事，想要刪去或許添加圖片又有必要從頭兼并一次，這樣無疑添加了工作量降低了工作效率。那么有什么能夠替代雪碧圖，相同到達(dá)削減HTTP懇求的意圖呢？答案是：data類型圖片。

所謂"data"類型的Url格局，是在RFC2397中 提出的，意圖關(guān)于一些“小”的數(shù)據(jù)，能夠在網(wǎng)頁中直接嵌入，而不是從外部文件載入。例如關(guān)于img這個Tag，哪怕這個圖片十分十分的小，小到只要一個 點，也是要從別的一個外部的圖片文件例如gif文件中讀入的，如果瀏覽器完成了data類型的Url格局，這個文件就能夠直接從頁面文件內(nèi)部讀入了。data類型的Url格局早在1998年就提出了，時至今日，F(xiàn)irfox、Opera、Safari和Konqueror這些瀏覽器都現(xiàn)已支撐，可是IE直到7.0版本都還沒有支撐，IE不支撐的東西太多了，也不差這一個。

data類型圖片如何生成？

將圖片數(shù)據(jù)base64編碼后，在前面加上：data:image/jpeg;base64,（其間的jpeg請?zhí)鎿Q成您自己的圖片類型），即可運用于CSS文件（直接將CSS文件傍邊的圖片路徑替換為處理后的字符串即可，能夠參閱一下上面的圖片）。

data類型圖片有何長處？

data類型圖片能夠?qū)�CSS傍邊的一切圖片都放到CSS文件傍邊而不需求從頭發(fā)起懇求加載，也就是說，只需求懇求CSS文件就夠了，削減了HTTP懇求次數(shù)。而且添加圖片或許刪去圖片能夠直接添加和刪去，不像雪碧圖需求從頭組成。十分便利。

data類型圖片的缺陷

data類型圖片有一個缺陷，就是data類型圖片比較于文件圖片的體積會大三分之一左右。因而不建議將十分大的圖片也運用data類型，針關(guān)于小圖片data類型更有優(yōu)勢。關(guān)于一些頁面簡練的博客來說，將一切圖標(biāo)轉(zhuǎn)化為data類型后放到CSS文件傍邊，完全能夠僅僅只加載一個CSS文件就能夠搞定整個頁面的款式了。