在网页图像中使用DataURI编码

我们可以通过将图像信息编码为字符和数字的字符串，然后将它们放置在页面的CSS文件或HTML代码中，这样在网页上可以显示该图而不用指定该图片的URL地址。这种做法可以大大减少页面请求的次数。当然这张图片不能太大，或者是频繁需要修改的图片。将图片编码为dataURI方式有两方面的优势：

• 减少HTTP请求。对于普通方式书写的图片，浏览器需要重新去抓取它们，这会增加页面加载时间。即使你使用sprite技术来合并图片，也会对页面加载有一定的影响。
• 在页面发出请求到获得图片之间有一些延迟。延迟现象普遍存在于移动设备上。而使用dataURI方式编码的方式可以消除这些延迟。

将图像进行编码不是手工可以完成的工作。你需要使用一些工具或服务，下面列出一些可以完成这些工作的网站：

• DataURI encoder
• WebCoder Tools Base64 Image Converter
• Binary file to Base64 Encoder / Translator

我们使用上边的那张PNG图片来举个例子。将图片进行base 64 编码得到下面的代码（编码太长，省略后面的代码）：

iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAABHSu ...                               
                            

现在我们有了图像的base64编码，可以在CSS文件中使用它来引用这张图片，我们需要在代码的而头部写上data:image/(format);base64,。

header { 
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAA... );
}                               
                            

你也可以将dataURI信息放置在HTML页面中来显示图片：

<img src="data:image/png;base64,iVBORw0KGgoAAAA..." >                                
                            

使用这种方式的图片任然可以像其它图片一样提供样式和标签：

<img src="data:image/png;base64,iVBORw0KGgoAAAA..." alt="iceman" style="float: right; margin-left: 2em" >                                 
                            

将图像进行编码在许多情况下是很有用的，特别是一些单独的小图片。最为重复的网页背景图片就是一个很好的例子。

通常情况下，将图像进行Base64编码作为背景图片放在CSS文件中是比较好的做法，这些信息会被缓存并可以在多个页面使用，大大的提供了页面的加载速度。