超开心工具站-Base64图片编码详解与演示

什么是Base64编码？

图片的Base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

Base64编码可以让图片随着HTML一起下载，减少HTTP请求

Base64编码示例：

/* CSS中的写法 */
.icon {
  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B...) no-repeat center;
}

/* HTML中的写法 */

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B...">

                            

为什么要使用Base64编码？

减少HTTP请求

图片数据直接嵌入到CSS或HTML中，无需额外的网络请求

无跨域问题

不需要考虑缓存、文件头或cookies问题

灵活使用

可像单独图片一样使用，特别适合背景图片重复使用

适用场景：

适合使用Base64的情况

图片足够小（几KB以内）
无法制作成雪碧图的特殊用途图片
网站复用性很高且基本不会更新
背景图片（background-image）

不适合使用Base64的情况

大尺寸图片（会显著增加CSS体积）
经常需要更新的图片
可以合并到雪碧图的图片
对CSS可读性要求很高的项目

Base64转换工具

图片转Base64

选择图片文件：

Base64编码结果：

Chrome浏览器方法

打开Chrome浏览器

新建一个标签页

拖拽图片

将图片直接拖入浏览器窗口

打开开发者工具

按F12或右键检查元素

查看Base64

在Sources面板中点击图片查看编码

Base64 vs CSS Sprites 对比分析

对比项目	Base64编码	CSS Sprites
HTTP请求数	减少请求	减少请求
文件体积	增加CSS体积	不影响CSS
缓存策略	随CSS缓存	独立缓存
维护难度	单独维护	需同时维护CSS和图片
适用场景	小图片、背景图	图标、按钮等
跨域问题	无跨域问题	可能有跨域问题

使用CSS Sprites的场景

页面具有多种风格，需要换肤功能
网站已经趋于完美，不会频繁改动
使用时无需重复图形内容
不会增加CSS文件体积

使用Base64编码的场景

无额外请求
对于极小或极简单图片
可像单独图片一样使用
没有跨域问题

实际演示效果

Base64背景图演示

这是使用Base64编码的2x2像素背景图

只有50字节，转换后约100个字符

查看Base64代码

.demo-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWPY9+8fAzYwirkTlYEFABYOAwAYOgNxAAAAAElFTkSuQmCC);
  background-repeat: repeat;
}
                                        

性能对比演示

注意事项

Base64编码会增加约33%的文件大小
会阻塞CSS的关键渲染路径
增加CSS解析时间
不适合大图片使用

解析时间

+10倍

Base64混入CSS后

文件大小

+33%

相比原图片

最佳实践建议

大小控制

只对小于2KB的图片使用Base64编码

复用性高

选择在网站中复用性很高的图片

更新频率

避免对经常更新的图片使用Base64

Base64详解