如何在网页中使用base64图片

• 减少 HTTP 请求,提高页面加载速度
• 不需要单独存储图片文件,节省服务器存储空间
• 不需要单独部署图片资源,整合在 HTML/CSS 中更便利

在 HTML 中使用 base64 图片,只需将图片数据编码为 base64 字符串,并将其填充在 src 属性中即可。例如:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twhu6P9
  ExAxQTAYmBBQAizI4oVBwBhH4BAD+/CZBWuO+RAAAAABJRU5ErkJggg==" alt="base64 图片">

在 CSS 中使用 base64 图片,将图片数据填充在 url() 函数中即可。例如:

.my-element {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twhu6P9
    ExAxQTAYmBBQAizI4oVBwBhH4BAD+/CZBWuO+RAAAAABJRU5ErkJggg==);
}

• base64 编码会使图片体积增大约 33%,对于大图片不太合适
• 不适合用于动态变化的图片,因为每次变化都需要重新编码
• 编码后的字符串可能会超出 URL 长度限制,需要适当控制图片大小