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

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

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

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

data類型圖片如何生成？

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

data類型圖片有何長(zhǎng)處？

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

data類型圖片的缺陷

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