一、Base64编码
在聊图片编码之前,先来说说Base64编码,其实这一块已经有很多例子了。
Base64编码么,其实就是一个
招待好6爷
,伺候好8爷
的过程Base64是把字符串转为二进制,然后末尾补零,使总长度能除尽24
24这个太上皇怎么来的:是6爷与8爷的公倍数
6爷怎么来的: Base64是一个对照表,有64个符号,
大小写字母,数字,加号,斜杠(/)。特殊字符(=)除外
可以用6个二进制位来表示这个64个字符8爷怎么来的:一个字符8位(ASCII码对应二进制)
1.Base64是因为有64个字符来做对照,所以,可以用6个二进制位数来表示(编码过后的字符):如:
『000000』代表A,『111111』代表/
2.所以嘛,我们需要做的就是把要编码的字符(一个字符8位,对照ASCII)6等分,这样好用Base64来表示,如:
A => 『01000001』=>(6等分) 『010000』『01』
3.但你也看到了,最后的不足6位啊,那没问题,补零,就行了
『010000』『010000』
4.这样的东东,在Base64中是能找到对应的值,但是,我要把他在转换成正确的字符A
就不行了
『010000010000』=> A『0000』
5.缺了4位,那咋办,那就再添加4位咯
『010000010000』=> 『010000』『010000』『0000』
6.但加了4位又不能用Base64来表示了,少了2位,唉,既要伺候好6爷,又得服侍好8爷真心不容易啊,其实添了2还是不行的,反正就是这么补0下去,最后就变成了
『010000』『010000』『000000』『000000』
用Base64一对照看到是(0
用=
表示)QQ==
OK
图片的Base64编码
例如:url:data:text/jpeg;base64,XXXXXXX==
data:[<mime-type>];[<chartset>=chartset];[<encoding>],<encoded_data>
/**
data:font/woff,字体
data:text/plain,文本数据
data:text/html,HTML代码
data:text/css;base64,css代码
data:text/javascript;base64,javascript代码
data:image/x-icon;base64,base64编码的icon图片数据
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
*/
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
特点
不像访问图片地址那样缓存起来,而是直接存在css/js中,随着css/js缓存的
由于是base64编码的,一般都比原图片要大1/3(故而一般得配合gzip压缩)
解决啥?
减少对服务器的请求(这里带出一个问题--为什么要减少对服务器的请求?)
缺点
IE8之前都不会支持(需要hack技术,但IE9的IE7兼容模式可以)
适用
图片比较小(这个较小又是几个意思?),如果图片过大,会导致css或者js文件过大,而导致阻塞
同类
Image maps
css sprites
题外话
为什么要减少对服务器的请求?
1.请求头420byte和返回头600多比特肯定少不了的,此外请求还可能会携带。
2.一次http连接又是:域名解析,开启TCP连接,发送请求,等待(网络延迟和服务器处理时间),下载资源
较小是几个意思