在Web中还有一个比较常见的加解密方法,那就是Base64,准确来说,它其实是一种将任意二进制转化为文本字符串的编码方法。它并没有所谓的密钥。常用于在URL、Cookie、网页中传输少量二进制数据。
使用base64编码图片其实是基于 数据URL的方案。HTML4.01规范引用了数据URI方案,尽管多年来一直被忽视,但所有现代浏览器都实现了对数据URL的某种程度的支持。
数据URL的格式如下:
data:[<mediatype>][;base64],<data>
- <media type>是Internet媒体类型规范(带有可选参数)——即“text/plain;charset=utf-8”、“image/gif”、“application/octet stream”等。如果省略了<mediatype>,则默认为“text/plain;charset=us-ascii”。
- “;base64”字符串将数据标识为base64编码。
- 用逗号(,)与前一部分分隔的数据。数据由多个8位序列组成,称为八位字节,用字符表示。数据URI中允许的字符包括现代英语字母表中小写和大写字母的ASCII字符,以及阿拉伯数字。由任何其他字符表示的八位字节必须是URL编码的(也称为百分比编码),即,对于与号(&)而言,“%26”。base64中编码的数据URI可能包含人类可读性的空白。
应用场景
- Base64 在CSS中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
- Base64 在HTML中的使用
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
为什么要Base64编码图片
网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。
对于极小或者极简单的图片,例如只有几像素的图片,不用考虑跨域问题也不想页面的图片缓存,请果断用base64。
最后附上一个工具网址: http://base64.top
参考:https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html