Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性。
我们可以来看一下实际的效果
Base64编码效果
在上图中,我们可以看出img的src属性开头是data:image/png;base64,这种开头表示的就是Base64编码后的图片格式,鼠标放在src属性上,可以看出实际的图片。
图片采用Base64编码后的字符串非常长,这里截取一部分来看下效果
Base64编码的部分字符串
真实的全部字符串会比这长的多,可能达到几十KB
当然,Base64编码并不只是用在图片处理上,还可以用在URL转换上,比如说我们常见的迅雷以thunder开头的专用地址,就是通过Base64加密处理过后的URL地址,如下图所示
Base64处理后的URL
为何使用Base64编码
存在及必然,那么我们为什么要使用Base64编码呢?
1.其中很重要的一点就是,使用Base64编码可以减少网络请求。
我们都知道,网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。
2.采用Base64编码的图片是随着页面一起加载的,不会造成跨域请求的问题。
3.不会造成清理图片缓存的问题
Base64编码劣势
Base64编码既有优势也有劣势,上述已经说了Base64编码的优势,接下来看看劣势。
1.当我们将一个只有几KB的图片转化为Base64格式编码,生成的字符串往往会大于几KB,如果将其写在一个css文件中,这样一个css文件的大小会剧增,造成代码可读性差不说,还会造成请求传输的数据量递增。
2.如果我们将Base64位的编码的图片存入数据库中,会造成数据库数据量的增大,这样的效果还不如将图片存至图片服务器,而只在数据库中存入url字段。
3.对于IE8以下的浏览器,不支持data url格式,IE8开始支持data url,却对大小作出了限制,在使用时不是很方便。
如何使用
分析了Base64编码的优劣,那么我们该如何正确的使用Base64编码呢?这里总结出使用Base64编码的几个地方。
对于极小或者极简单的图片,例如只有几像素的图片不用考虑跨域问题不想页面的图片缓存