【转】合理使用CSS Sprites和内联图片

原文：http://blog.csdn.net/wzgdjm/article/details/50789548

在开发前端的过程当中，做为一个前端工程师，可能不单单是作出一个页面，而丝绝不考虑页面的访问速度也是不现实的，我在作过一些页面以后，发现有时候性能确实不太理想，以致于本身都看不过去，接下来，我会从个人理解，从一些基本的方面来对前端页面进行优化，今天先介绍一下图片给网页带来的页面缓慢解决方法：

0、普通图片加载：用时101ms

一、CCS Sprites的使用：用时40ms

二、使用内联图片：用时45ms

其实我作过屡次测试，按照传统加载方式加载大概100ms左右，后面两个差很少都在40ms左右，因此在编码中采用雪碧图和内联图片相对来讲能够提升网页的加载效率。

可是这里要提醒你们注意的一点是，在采用内联图片的时候，最好采用引用外部css的方式，这样效率会有很大的提升。

这里提供一个将：image 转 DataUrI的网址：http://tool.c7sky.com/datauri/