关于base64编码

一、什么是 base64 编码?　

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

如下：

[css] view plain copy print?



<span style=“font-family:Microsoft YaHei;”>//在css里的写法
#base64 {
background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}</span>

//在css里的写法

base64 {

background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

}

[css] view plain copy print?



<span style=“font-family:Microsoft YaHei;”>//在html代码img标签里的写法
<img src=”data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=”></span>

//在html代码img标签里的写法

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

二、为什么要使用 Base64 编码？

网页上的每一个图片，都是需要消耗一个 http 请求来下载的

而使用Base64的话则可以跳过http的服务器请求，以减少服务器压力。

当我们需要使用到一个图片相对较小，例如几十字节，这时候却需要一个 http 请求十分不值得。那么此时将它转化为 base64 编码。

三、base64编码在线网站进行转换

http://imgbase64.duoshitong.com/

四、CssSprites（雪碧图）与Base64编码区别。

4.1 使用CssSprites合并为一张大图：

页面具有多种风格，需要换肤功能，可使用CssSprites

网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）

使用时无需重复图形内容

没有 Base64 编码成本，降低图片更新的维护难度。（但注意 Sprites 同时修改 css 和图片某些时候可能造成负担）

不会增加 CSS 文件体积

4.2 使用base64直接把图片编码成字符串写入CSS文件：

无额外请求

对于极小或者极简单图片

可像单独图片一样使用，比如背景图片重复使用等

没有跨域问题，无需考虑缓存、文件头或者cookies问题

4.3 base64缺点：

Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。

一般请求http的图片不会因为关键渲染路径带来阻塞，但是由Base64转化而来的图片却大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染，而图片不会。

重点内容