自给自足，轻松将图片图片内嵌到HTML

1.为什么要将图片内嵌到HTML？

针对于这个问题，我们有如下几种答案

1）能减少并发请求，适合且合理的使用，能提高网站的访问速度

2）便于分享，完全可以将需要的图片，样式，JS与内容放到一个HTML页中，而不会有零零碎碎的大量文件。

3）在某些网站发表文章时，不需要第三方图床也可以发表图片。

2.如何将图片内嵌到HTML？

我们的这种用法，被称做Data URI scheme，它是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

格式如下：

data:类型;base64,BASE64字符串

类型支持 text/plain，text/css，text/javascript，image/gif，image/png，image/jpeg，image/x-icon

支持在CSS的background或者img的src中使用Data URI scheme，如：

    <div style="width:161px; height:60px; background:url(data:image/gif;base64,数据) no-repeat"></div>
    <img src="data:image/gif;base64,数据" />

效果如下：

3.如何将图片转换为BASE64字符串

网上有很多转换工具，不过即然我们文章标题叫自给自足，那么肯定会提供自己的解决方案。假如你会C#，那么你只需要使用下面二行代码就可以做到。PHP也有类似的函数。

byte[] bs = System.IO.File.ReadAllBytes(@"d:\www.jiniannet.com.gif");
Response.Write(Convert.ToBase64String(bs));

4.它有何坏处

1）可能会使你的HTML或者CSS文件过大

2）img使用Data URI scheme，图片文件无法被缓存