www.zjcoo.com

 　　利用图片来优化网站的首页或者内容是一个很好的方法，图片的类型也是需要我们优化时注意的，现在就来讲讲新的优化手段data类型的图片。

　　可能略微懂些前端的站长知道，提升网页加载速度的一个途径就是减少HTTP请求次数。雪碧图(CSS Sprites)就是这个思路的产物，将多张图片合并到一张图片，这样就将多次请求合并为一次请求，达到了快速加载网页的目的。但是雪碧图的图片合并为网页的修改带来了麻烦，想要删除或者增加图片又必须重新合并一次，这样无疑增加了工作量降低了工作效率。那么有什么可以替代雪碧图，同样达到减少HTTP请求的目的呢?答案是：data类型图片。

　　所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些"小"的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，，IE不支持的东西太多了，也不差这一个。

　　data类型图片如何生成?

　　将图片数据base64编码后，在前面加上：data:image/jpeg;base64,(其中的jpeg请替换成您自己的图片类型)，即可使用于CSS文件(直接将CSS文件当中的图片路径替换为处理后的字符串即可，可以参考一下上面的图片)。

　　data类型图片有何优点?

　　data类型图片可以将CSS当中的所有图片都放到CSS文件当中而不需要重新发起请求加载，也就是说，只需要请求CSS文件就够了，减少了HTTP请求次数。并且增加图片或者删除图片可以直接增加和删除，不像雪碧图需要重新合成。非常方便。

　　data类型图片的缺点

　　data类型图片有一个缺点，就是data类型图片相比于文件图片的体积会大三分之一左右。因此不建议将非常大的图片也使用data类型，针对于小图片data类型更有优势。对于一些页面简洁的博客来说，将所有图标转化为data类型后放到CSS文件当中，完全可以仅仅只加载一个CSS文件就可以搞定整个页面的样式了。

　　附普通图片生成data类型的php小工具：;uk=1882584266

重庆中技互联网信息咨询有限公司 www.zjcoo.com