使用 Data URI Scheme 在网页中嵌入 Base64 编码图片

Data URI Scheme 原理与支持类型

Data URI Scheme 源自 RFC2397 标准，旨在将小型数据直接嵌入网页，从而避免从外部文件加载资源。例如，特定的 Data URI 字符串实际上代表了一张 2x2 像素的白色 GIF 图片，将其粘贴至 Firefox 地址栏即可直接显示。该 URI 格式中，“data”标识数据协议，“image/gif”指明数据类型，“base64”代表编码方式，逗号之后则是经过 Base64 编码的具体图像数据。目前，Data URI Scheme 支持多种数据类型，包括纯文本（data:text/plain）、HTML 代码（data:text/html）、CSS 样式（data:text/css）以及 JavaScript 脚本（data:text/javascript）。对于图片，支持 gif、png、jpeg 和 icon 等格式，并可附加 base64 编码。Base64 编码的作用是将 8-bit 数据转换为标准 ASCII 字符，便于在网络中传输。在 PHP 中，可通过 base64_encode() 函数配合 file_get_contents() 实现文件编码，例如：echo base64_encode(file_get_contents('images/log.gif'));。目前，IE8、Firefox、Chrome 和 Opera 等主流浏览器均支持此类小文件嵌入方式。

 
<img src="http://www.jwzzsw.com/images/log.gif"/>

Base64 图片嵌入示例与性能分析

另一种显示图片的方式是将图像数据直接写入 HTML：

 
<img src="data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs="/>

将图像文件内容直接写入 HTML 文件的主要优势在于节省了一次 HTTP 请求。然而，这种做法的缺点在于浏览器无法对这类内嵌图像进行缓存，可能导致后续加载时重复解析数据。

此外，推荐使用以下在线工具进行图片与 Base64 编码的转换：

图片转换为 Base64 编码在线工具：http://tools.jb51.net/transcoding/img2base64

Base64 编码解码工具：http://tools.jb51.net/transcoding/base64