图片Base64编码数据格式

最近公司的某个接口需要将图片以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编码的利与弊分析