图片 转 base64
什么时候需要把图片转成 Base64？
做前端开发的应该经常遇到这种需求：小图标想直接内嵌到 CSS 或 HTML 里，不想多发一个图片请求；或者写邮件模板，图片不方便用外链，需要把图片内容直接写进去。
把图片转成 Base64 编码，就能用一串文本来表示整张图片。虽然体积会变大三分之一左右，但对于小图标来说，省掉 HTTP 请求反而更划算。
把图片转成 Base64 编码，就能用一串文本来表示整张图片。虽然体积会变大三分之一左右，但对于小图标来说，省掉 HTTP 请求反而更划算。
支持哪些格式？
JPG / JPEG
PNG
WebP
BMP
基本上网页里常用的图片格式都能处理。拖进来或者点击选择就行，转换完自动显示 Base64 字符串。
基本上网页里常用的图片格式都能处理。拖进来或者点击选择就行，转换完自动显示 Base64 字符串。
怎么用？
1. 上传图片
把图片拖到上面的区域，或者点击选择文件
2. 等待转换
图片上传后自动开始转换，小图片基本秒出结果
3. 复制使用
结果框里就是完整的 Base64 字符串，点"复制"就能用
把图片拖到上面的区域，或者点击选择文件
2. 等待转换
图片上传后自动开始转换，小图片基本秒出结果
3. 复制使用
结果框里就是完整的 Base64 字符串，点"复制"就能用
适合什么场景？
🎨 CSS 内嵌图片
background-image 直接写 Base64，小图标不用额外请求
📧 邮件模板
邮件里的图片用 Base64 内嵌，避免外链图片加载失败
📱 小程序开发
微信小程序里某些场景需要用 Base64 格式的图片
🔧 接口调试
有些接口需要传图片的 Base64 编码，调试时用得上
background-image 直接写 Base64，小图标不用额外请求
📧 邮件模板
邮件里的图片用 Base64 内嵌，避免外链图片加载失败
📱 小程序开发
微信小程序里某些场景需要用 Base64 格式的图片
🔧 接口调试
有些接口需要传图片的 Base64 编码，调试时用得上
注意事项
📏 图片别太大
Base64 编码会让数据量增加约 33%，大图片转换后字符串会很长，不太适合内嵌使用
🔒 本地处理
图片不会上传到服务器，所有转换都在你浏览器里完成
Base64 编码会让数据量增加约 33%，大图片转换后字符串会很长，不太适合内嵌使用
🔒 本地处理
图片不会上传到服务器，所有转换都在你浏览器里完成