最近公司的某个接口需要将图片以Base64编码后的字符串作为参数。借此了解图片的Base64编码。
1.经过Base64编码后生成的数据
图片进过Base64编码后生成的数据如下:
data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=
这种形式的数据被称为Data URI scheme
2. URI scheme
URI scheme:一种表达“如何访问数据”的手段的方法,例如在此URI(URL)开头描述的“ http”
2.1常见的URI scheme
- http:
- https:
- ftp:
- tel:
- mailto:
- feed:
- data:
- file:
- clsid:
3.Data URI scheme
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources.
摘自维基百科
Data URI scheme是用于访问直接嵌入HTML或CSS的数据的URI scheme(URI方案),并以以下格式描述。
3.1数据格式
data:[<media type>][;base64],<编码数据>
- data: 数据协议名称
3.2支持的类型
- data:,文本数据
- data:text/plain,文本数据
- data:text/html,HTML代码
- data:text/html;base64,base64编码的HTML代码
- data:text/css,CSS代码
- data:text/css;base64,base64编码的CSS代码
- data:text/javascript,Javascript代码
- data:text/javascript;base64,base64编码的Javascript代码
- data:image/gif;base64,base64编码的gif图片数据
- data:image/png;base64,base64编码的png图片数据
- data:image/jpeg;base64,base64编码的jpeg图片数据
- data:image/x-icon;base64,base64编码的icon图片数据
3.3优点
由于可以内嵌在HTML或CSS中,因此可以减少请求数量。
3.4 缺点
- 文件大小约为原来的1.3倍。
- 浏览器可以使用的文件大小有限制。
- 由于它直接嵌入在HTML或CSS源代码中,因此对Base64的描述变得很长,并且可见性下降。
- 如果嵌入很多大文件,网页的显示将变慢。
- 资源不会被浏览器缓存,每次访问都要重新获取
参考资料:
今更だけどdata URI Schemeって何?
data:image/png;base64的用法详解
图片Base64编码的利与弊分析