浅析用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;