图片处理是前端工做中很重要的一部分,前段时间,个人一个项目中,使用的图标字体在线上不能使用,原来是由于跨域的问题,后台大哥就跟我说,你尝试下把图标字体转换成base64不成了,囧,我到如今还没弄懂怎么把图标字体转换成base64编码,可是,这并不妨碍我研究一下这个'小玩意'.css
其实,图片的base64编码就是能够将一副图片数据编码成一串字符串,使用该字符串代替图像地址.前端
咱们在网页上所看到的每一张图片都是要消耗一个http请求下载而来(固然,雪碧图就另说了),若是图片的下载不须要想服务器发出请求,就能够下载到本地,那就会减小服务器压力,而base64正好能解决这个问题.chrome
固然,base64也不是说用在什么地方都好,好比说有些图片自己4KB,可是转换成base64以后超过了5K(即时base64编码可以被gzip压缩,压缩率能达到50%以上),并且一个元素的css样式超过几千个字符,对css总体的可读性会形成十分重大的影响,代码冗余使得base64编码得不偿失.跨域
若是图片足够小且由于用处的特殊性没法被制做成雪碧图,在整个网站的复用性很高且基本不会被更新,那么此时使用base64编码传输图片就是极好的(最经常使用的地方就是,一些网站的背景,这些背景是由一些小图经过重复组成的.)浏览器
简单陈述一下base64编码和雪碧图的特色缓存
雪碧图服务器
页面具备多种风格,须要换肤功能,可使用雪碧图cookie
页面已经趋于完美,不会频繁的改动(如button大小,颜色等)字体
使用时无需重复图形内容网站
没有base64编码成本,下降图片更新的维护难度
base64编码
无额外请求
对于极小或则极简单图片
能够被gzip(经过gzip对base64数据的压缩能力一般和图片文件差很少或则更强)
下降css维护难度
没有跨域问题,无需考虑缓存,文件头或则cookies问题
接下来,说一下,将图片转换成base64的方法,其实最简单的就是在chrome下新建一个窗口,而后将要转化的图片直接拖入浏览器中,打开控制台,点source
如图所示,就是base64的编码
如图所示,将它如此放置便可。。。