理解图片base64编码

article/2025/9/11 4:34:39

什么是编码解码

编码：利用特定的算法，对原始内容进行处理，生成运算后的内容，形成另一种数据的表现形式，可以根据算法，再还原回来，这种操作称之为编码。

解码：利用编码使用的算法的逆运算，对经过编码的数据进行处理，还原出原始数据，这种操作称之为解码。

什么是Base64编码算法

可以将任意的字节数组数据，通过算法，生成只有（大小写英文、数字、+、/）（一共64个字符）内容表示的字符串数据。
即将任意的内容转换为可见的字符串形式。

Base64算法的由来

以前发送邮件只支持可见字符的传送。由此，需要有一个方法将不可见的字符转换为可见的字符，便产生了Base64编码算法

Base64图片介绍

支持 PNG、GIF、JPG、BMP、ICO 格式。
支持查看图片的具体大小。上传过程无需网络。
将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。
假定生成的代码为“data:image/jpeg;base64, …”，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。
CSS中使用：
background-image: url("https://img-blog.csdnimg.cn/2022010710262819459.png");
HTML中使用：
<img src="https://img-blog.csdnimg.cn/2022010710262819459.png" />
图片转换Base64，无线开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。
将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。

如下图：在断网的条件下，我从地址栏放入了base64编码后的字符串，然后前面拼接data:image/jpeg;base64,，浏览器就能自动解析成图片，并且查看控制台是没有http请求的
在这里插入图片描述

图片base64格式的优点和缺点

优点：
1、网页中使用base64格式的图片时，能减少htt请求的次数，优化页面的加载速度；
2、能降低服务器资源的消耗，理由：base64格式的图片属于文本格式，因而仅仅占用很少的内存，仅为图片时的1/3；

缺点：
1、生成base64格式后，文本内容较多，不适合存储在数据库中；
2、由于生成base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验；
3、base64格式的图片无法缓存，虽然可以缓存包含base64文本的文件如：js或css，但这达不到一般图片缓存的效果；

建议：
图片base64编码的优点很让人青睐，但其缺点也不容忽视，建议较小的图片可直接转为base64编码格式，比如一些表情图片、小图标等

总结

简单理解，图片base64编码就是将图片文件转化成很长很长的字符串，能够不通过http请求，而是通过一定的解码手段就能够拿到这个图片

小tips

js进行base64的编码和解码方法

// 浏览器方法
window.btoa('hello world');
window.atob("aGVsbG8gd29ybGQ=");
// 引入Base64方法：https://www.npmjs.com/package/js-base64
import { Base64 } from 'js-base64';
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.decode('5bCP6aO85by+');  // 小飼弾