浅析用Base64编码的图片优化网页加载速度

想必大家都知道网页加载的过程，从开始请求，到加载页面，开始解析和显示网页，遇到图片就再次向服务器发送请求，加载图片。如果图片很多的话，就会产生大量的http请求，从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起，这样在打开页面的时候只需要一次http请求就可以加载多张图片，然后通过设置图片的背景偏移量来正确的显示。现在我们可以将图片转成base64编码，然后直接写在html页面或者css里面，这样在加载页面或者css的时候就可以直接将图片加载过去，这样也省去了设置图片背景偏移量带来的浏览器兼容性问题。
 

 一、在网页中显示base64编码的图片
1、在html中img标签中显示base64编码的图片　

　下面我们来看一下如何显示一张图片：

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

 显示如下图：

2、将base64编码的图片嵌入到css中

在css里面的实现如下：

.main {
width: 600px;
height: 300px;
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}

 二、将图片转化为base64字符串
 　　下面来说一下如何在C#中将图片转化成base64字符串，由于比较简单，这里只写一些主要的实现方法，大家可以自己画界面，做成一个工具。这里我新建一个控制台的项目。编写如下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;

namespace ConvertImgToBase64
{
class Program
{
static void Main(string[] args)
{
FileInfo file = new FileInfo("1.png");
var stream = file.OpenRead();
byte[] buffer = new byte[file.Length];
//读取图片字节流
stream.Read(buffer, 0, Convert.ToInt32(file.Length));
//将base64字符串保存到base64.txt文件中
StreamWriter sw = new StreamWriter("base64.txt",false, Encoding.UTF8);
//将字节流转化成base64字符串
sw.Write(Convert.ToBase64String(buffer));
sw.Close();
Console.WriteLine("Convert successful!");
Console.Read();
}
}
}

 然后我们打开base64.txt文件，讲里面的代码复制到img标签里面，代码如下：


View Code
显示结果如图：



 小结
 　　我们可以看到，上面那么小的一张图片，转换成base64字符串后，会变成很长的一串字符串，如果我们将所有的图片都转换的话，虽然是网页打开速度会略有提升，但是代码会变的臃肿，难以维护。所以，我们可以将一些很小的图片转换成base64编码，嵌入到css文件中，如小的图标。