png图像的base64 encoding

Esaka_Forever2026-06-09 14:50

PNG 图像的 Base64 编码（超通俗解释）

Base64 编码 ：把二进制图片文件（PNG/JPG） 转换成纯文本字符串 ，让图片可以像文字一样复制粘贴、塞进 JSON、放进 HTML/CSS里直接显示。

一、核心作用

图片 → 一大段乱码英文 + 数字 + 符号（纯文本）
纯文本 → 直接还原成图片（无需单独图片文件）

二、PNG 的 Base64 固定开头

所有 PNG 图片的 Base64 字符串一定以这个开头：

plaintext

复制代码

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

data:image/png;base64, = 声明：这是PNG 图片的 Base64
后面一大串乱码 = 图片内容

三、怎么用（3 个最常见场景）

1. HTML 里直接显示图片

html

预览

复制代码

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

2. CSS 背景图

css

复制代码

div {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
}

3. JSON / API 传输图片

AI 接口、前后端传图常用：

json

复制代码

{
  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."
}

四、Python 快速生成 PNG Base64

python

运行

复制代码

import base64

# 图片转 Base64
with open("test.png", "rb") as f:
    base64_str = base64.b64encode(f.read()).decode()

# 加上前缀就是完整可用字符串
full_base64 = f"data:image/png;base64,{base64_str}"
print(full_base64)

五、优缺点

✅ 优点：

纯文本，不怕传输丢失
不用单独存图片文件，一个字符串搞定
AI 接口、前端渲染极常用

❌ 缺点：

体积比原图大 1/3
不适合大图（建议 < 200KB）