网站速度优化新招数：运用data类型图片

跟着搜索引擎的不断进步，外链在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文件就能够搞定整个页面的款式了。