图片转base64编码

图片处理是前端工作中很重要的一部分,前段时间,我的一个项目中,使用的图标字体在线上不能使用,原来是因为跨域的问题,后台大哥就跟我说,你尝试下把图标字体转换成base64不成了,囧,我到现在还没弄懂怎么把图标字体转换成base64编码,但是,这并不妨碍我研究一下这个'小玩意'.

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

我们在网页上所看到的每一张图片都是要消耗一个http请求下载而来(当然,雪碧图就另说了),如果图片的下载不需要想服务器发出请求,就可以下载到本地,那就会减少服务器压力,而base64正好能解决这个问题.

当然,base64也不是说用在什么地方都好,比如说有些图片本身4KB,但是转换成base64之后超过了5K(即时base64编码能够被gzip压缩,压缩率能达到50%以上),而且一个元素的css样式超过几千个字符,对css整体的可读性会造成十分重大的影响,代码冗余使得base64编码得不偿失.

如果图片足够小且因为用处的特殊性无法被制作成雪碧图,在整个网站的复用性很高且基本不会被更新,那么此时使用base64编码传输图片就是极好的(最常用的地方就是,一些网站的背景,这些背景是由一些小图通过重复组成的.)

简单陈述一下base64编码和雪碧图的特点

雪碧图

页面具有多种风格,需要换肤功能,可以使用雪碧图

页面已经趋于完美,不会频繁的改动(如button大小,颜色等)

使用时无需重复图形内容

没有base64编码成本,降低图片更新的维护难度

 

base64编码

无额外请求

对于极小或则极简单图片

可以被gzip(通过gzip对base64数据的压缩能力通常和图片文件差不多或则更强)

降低css维护难度

没有跨域问题,无需考虑缓存,文件头或则cookies问题

 

接下来,说一下,将图片转换成base64的方法,其实最简单的就是在chrome下新建一个窗口,然后将要转化的图片直接拖入浏览器中,打开控制台,点source

如图所示,就是base64的编码

如图所示，将它如此放置即可。。。