在前端开发中，将图片嵌入HTML文件可以减少额外的网络请求，提升页面加载速度，常见的嵌入方式包括Base64编码嵌入和背景图嵌入两种，下面分别介绍具体实现方法。
一、Base64编码嵌入方法
Base64是一种基于64个可打印字符来表示二进制数据的编码方式，可以把图片的二进制内容转成字符串，直接嵌入到HTML或CSS中，不需要额外引用图片文件。
1. 获取图片的Base64编码
可以通过在线工具、浏览器开发者工具或者代码生成图片的Base64字符串，以Python为例，生成Base64编码的代码如下：
import base64
# 读取图片文件并转成Base64编码
with open("test.png", "rb") as f:
img_data = f.read()
base64_str = base64.b64encode(img_data).decode("utf-8")
# 拼接完整的Base64前缀，不同图片类型前缀不同
img_base64 = f"data:image/png;base64,{base64_str}"
print(img_base64)
2. 在HTML中嵌入Base64图片
得到Base64字符串后，可以直接放到<img>标签的src属性中，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Base64图片嵌入示例</title>
</head>
<body>
<!-- 将生成的Base64字符串放到src属性中 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="Base64嵌入的图片">
</body>
</html>
3. 适用场景和注意事项
Base64嵌入适合体积较小的图片，比如图标、小装饰图，因为Base64编码会让文件体积增大约三分之一，大图片使用这种方式会导致HTML文件过大，影响加载速度。同时Base64图片无法被浏览器缓存，每次页面加载都会重新解码。
二、背景图嵌入方法
背景图嵌入是通过CSS的background-image属性引用图片资源，既可以直接引用本地或远程图片路径，也可以结合Base64编码实现嵌入。
1. 引用外部图片路径
如果图片是独立的文件，可以在CSS中直接写图片的相对路径或绝对路径，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图嵌入示例</title>
<style>
.bg-box {
width: 200px;
height: 200px;
/* 引用本地图片路径 */
background-image: url("./bg.png");
/* 也可以使用远程地址，这里替换成ipipp.com */
/* background-image: url("https://ipipp.com/bg.png"); */
background-size: cover;
}
</style>
</head>
<body>
<div class="bg-box"></div>
</body>
</html>
2. 背景图结合Base64嵌入
如果需要把图片直接嵌入CSS，也可以把Base64字符串放到background-image的url参数中，示例代码如下：
.bg-box {
width: 200px;
height: 200px;
/* 使用Base64编码作为背景图 */
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
background-size: cover;
background-repeat: no-repeat;
}
3. 适用场景和注意事项
背景图嵌入适合作为容器的背景装饰，比如页面背景、卡片背景等，支持设置平铺方式、定位、大小等样式。如果引用外部图片路径，浏览器会自动缓存图片资源，重复加载时速度更快，但需要确保图片路径正确，否则会加载失败。
两种方法的对比
下面是两种嵌入方式的核心差异对比：
| 对比维度 | Base64直接嵌入 | 背景图嵌入（外部路径） |
|---|---|---|
| 适用图片类型 | 小体积图片、图标 | 各类尺寸图片 |
| 缓存支持 | 不支持 | 支持浏览器缓存 |
| 文件体积影响 | 增大HTML/CSS体积 | 不影响HTML体积 |
| 布局灵活性 | 作为普通图片元素使用 | 支持背景样式调整 |
开发者可以根据实际的图片体积、使用场景选择合适的嵌入方式，小图标优先使用Base64嵌入，大图片或者需要缓存的场景优先使用背景图外部路径引用。