图片转Base64：Data URL、CSS与HTML

使用方法

Base64 用64个安全的字母和数字表示任意字节（RFC 4648）。每三个字节变为四个字符，因此文本比文件大约大三分之一。它不压缩也不隐藏任何内容：任何人都能将其解码。

Data URL（RFC 2397）把文件本身放进地址中：先是 data:，然后是图片类型，再是 ;base64, 及 Base64 文本。浏览器无需向服务器请求文件，即可在图片标签或 CSS 背景中显示它。它适合小图片和图标；大图片会使页面变得很重。

文件在浏览器中被读取并转为文本，粘贴的字符串也在那里读取。不会上传任何内容。粘贴图片的类型根据其开头的字节判断，因此标签写错也不会骗过工具。

一个3000字节的 PNG 图标会变为约4000个字符的 Base64 文本，比文件大约大三分之一。Data URL 在其前面加上22个字符 data:image/png;base64,。

转换时图片会被上传吗？

不会。文件在您自己的设备上、在浏览器中读取并转为 Base64 文本。页面加载后断开网络连接，再转换一张图片，即可核对这一点。

为什么 Base64 文本比文件还大？

Base64 用四个字符表示文件中每三个字节，因此文本约大33%。它只是写出同样字节的另一种方式。

什么时候应使用 Data URL？

Data URL 适合图标、占位图和小型标志等小图片，因为它们不需要向服务器单独请求。大幅照片则应上传后链接，因为 Base64 会使页面更重，而且无法单独缓存。

能粘贴网页上的 Data URL 吗？

可以。可以粘贴完整的 Data URL（以 data: 开头），也可以只粘贴逗号之后的 Base64 部分。图片类型由字节判断，因此头部中标签写错并不影响结果。

工具为什么不显示很长的文本？

文本框在字符达到数百万个时会变慢，因此超过200万个字符的 Base64 文本不会显示。请使用其下载按钮将其保存为文本文件。

Base64 能用来隐藏或保护图片吗？

不能。Base64 是一种编码，而不是加密。任何拿到文本的人都能一步解码回同一张图片，因此不要依赖它来保护图片的隐私。

数据和文字最近核对于2026年11月10日星期二。