前端理解base64

article/2025/9/11 4:14:36

一、背景：ascii码

字符=>二进制

计算机中所有数据的存储都是以二进制模式，比如想要存储abcd需将其转化为二进制，具体用哪些二进制来表示哪个符号*，有一个统一的编码规则，这就是ascii。

ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。（2的八次方=256，8个bit可以用来表示0-255）

0-127可以表示大小写的26个字母、加减乘除符号、阿拉伯数据还有控制字符比如换行符等。

在这里插入图片描述
观察百度百科上的ascii码表（128个字符）可以发现第八位都是0，等于没用第八位。因为英语中128个字符即可表示所有。

ascii大小规则
0-9<A~Z<a-z。

但如果是其他语言，比如法语128个不够。于是欧洲国家决定启用闲置的第八位，这样就有256个了。不过不同的国家有不同的字母，后128位同一编码在不同语言中代表不同的字符。注意前128位是一样的。

至于亚洲国家比如汉字就太多了，一个字节不够，必须采用多个字节代表一个符号。比如，简体中文常见的编码方式是GB2312，使用两个字节表示一个汉字，所以理论上最多可以表示 256 x 256 = 65536 个符号。

二、base64基本介绍

二进制=>字符

1.作用

  • base64编码是从二进制=>字符的过程。
  • 采用Base64编码具有不可读性，需要解码后才能阅读。但是base64不是加密，只是一种可被翻译的编码。
  • Base64编码可用于在HTTP环境下传递较长的标识信息，用作HTTP表单和HTTP GET URL中的参数。
  • 当需要把二进制数据放到url中时，采用base64具有不可读性比较合适

2. 使用原因

ascii码的128～255之间的值是不可见字符。而在网络上交换数据时，比如说从A地传到B地，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以就先把数据先做一个Base64编码，统统变成可见字符，这样出错的可能性就大降低了

3. 如何生成

01000100010011101100111010111100011001010…那么我们取6个比特为一组，计算它的ascii值，得到一个字符，这个字符肯定是可见字符，好，把它对应的字符写出来，再取6个比特，计算…，如此下去，直到最后，就完成了编码。

4. 其他

  • 标准base64只有64个字符（英文大小写、数字和+、/）以及用作后缀等号。如下为base64对照表。注意和ascii表是不一样的！
    在这里插入图片描述

  • 6bit为一组，那么4个base64字符即表示了24bit，即3个字节（24/8=3）。可理解为，原先用二进制只需要3个字节表示的信息，用base64却要占4个字符（即四个字节）。

有点绕，举例吧

  • 转换前 10101101,10111010,01110110 （二进制）
  • 转换后（每六个为一组转为ascii码，ascii码就是8位的二进制）00101011, 00011011 ,00101001 ,00110110 （二进制）
  • 十进制：43 27 41 54
  • 对照base64表转为可见字符： r b p 2

计算机存储信息都是按ascii码来的，所以这四个字符在ascii码中是四个字节。原先3个字节的信息现在占位4个字节了，所以base64传输会使得信息变大， 为原来的4/3

  • 刚才说了base64可以用在url里，但是标准的Base64并不适合直接放在URL里传输，因为URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式。为解决此问题，可采用一种用于URL的改进Base64编码，它不仅在末尾去掉填充的’='号，并将标准Base64中的“+”和“/”分别改成了“-”和“_”。

三、图片Base64编码

1 图片的base64编码是什么

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串表示图片，从而无需图片地址。

这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。

比如下图的图标
在这里插入图片描述
浏览器解析html到灰色标注的img那里，就会向src所在地址发一个请求，请求这个图片，下图即为发出的请求。
在这里插入图片描述

不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 就可以。这里等于把图片变为一串编码，直接嵌在html里传递给了浏览器，浏览器不用再次请求图片了。

举个栗子。www.google.com 的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到：
在这里插入图片描述
在这里插入图片描述

//在css里的写法
#fkbx-spch, #fkbx-hspch {background: url(https://img-blog.csdnimg.cn/2022010706012410164.gif) no-repeat center;
}
//在html代码img标签里的写法
<img src="https://img-blog.csdnimg.cn/2022010706012410164.gif">

上面分别是图片的 base64 编码在 css 里面的写法和在 html img 标签里的写法。base64 编码长得就是这个样子，随着html一起被发送给浏览器了。

2. 优点和缺点

  • 上述可看出这样可以节省一个 http 请求，算是前端优化的一部分
  • 在这里要明确使用 base64 的一个前提，那就是被 base64 编码的图片足够尺寸小。

以一张图片为例子
在这里插入图片描述
该图片大小为51kb
在这里插入图片描述
转为base64变成68295个字符，比原来大了。也就是说，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些。即便 base64 编码能够被 gzip 压缩，压缩率能达到 50% 以上，想象一下，一个元素的 css 样式编写居然超过了 60000个 字符，那对 css 整体的可读性将会造成十分大的影响，代码的冗余使得在此使用 base64 编码将得不偿失

  • 所以如果如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。

比如有一个是我们经常会遇到的，就是页面的背景图 background-image 。在很多地方，我们会制作一个很小的图片大概是几px*几px，然后平铺它页面当背景图。因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个 http 请求，十分不值得。那么此时将它转化为 base64 编码

雪碧图介绍：css雪碧图及优缺点
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

还有一种是iconfont，将图标转为svg。缺点是颜色是单一在css中设置的（像字体一样），ui给的炫酷图标无法用。而且如果想换个图标，还得跑阿里库上更新图重新生成压缩包。
iconfont使用在这里vue中阿里图标库iconfont的设置

3. 其他

  • Base64 的好处能够减少一个图片的 HTTP 请求，然而，付出的代价则是 CSS 文件体积的增大，CSS 文件体积的增大意味着 CRP。通俗而言，就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。

所以，要有取舍地使用base64。正常比较大的图片，都不可用base64，因为塞进css里增大css文件阻塞渲染。base64适用于极小极简单的图片。


http://chatgpt.dhexx.cn/article/UGloujXx.shtml

相关文章

Web 图片Base64编码

Web 图片Base64编码

转载自: 【前端攻略】&#xff1a;玩转图片Base64编码 引言　　 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生&#xff0c;本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大&#xff0c;不过只是希望通过一些…
阅读更多...
base64编码解码器【C++】

base64编码解码器【C++】

在线编码解码工具https://base64.us/所有结果可以使用上述网站检验。 什么是base64编码&#xff1f; base64编码是一种编码方式 用64 1 个字符表示字符 本质是将三位8比特字符扩增为四位8比特字符&#xff0c;但是这么说开始可能很闷逼。 给个图&#xff0c;这个编码是以3字…
阅读更多...
前端图片在线转换Base64 图片编码Base64

前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码&#xff1a; 简单来说&#xff0c;图片的base64编码就是可以将一副图片数据编码成一串字符串&#xff0c;使用该字符串代替图像地址。 为什么要用Base64&#xff1f; 我们知道&#xff0c;我们所看到的网页上的每一个图片&#xff0c;都是需…
阅读更多...
理解图片base64编码

理解图片base64编码

什么是编码解码 编码&#xff1a;利用特定的算法&#xff0c;对原始内容进行处理&#xff0c;生成运算后的内容&#xff0c;形成另一种数据的表现形式&#xff0c;可以根据算法&#xff0c;再还原回来&#xff0c;这种操作称之为编码。 解码&#xff1a;利用编码使用的算法的…
阅读更多...
【HTML5】------- 图片Base64编码详解

【HTML5】------- 图片Base64编码详解

引言　　 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生&#xff0c;本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大&#xff0c;不过只是希望通过一些浅显的论述&#xff0c;让你知道什么是图片的 base64 编码…
阅读更多...
记录：Base64编码步骤详解

记录：Base64编码步骤详解

文章目录 具体转换步骤实例演示&#xff1a;AbC实例演示二&#xff1a;字节数不足三个例&#xff1a;A例&#xff1a;8H ASCII编码表Base64编码表 具体转换步骤 第一步&#xff0c;将待转换的字符串每三个字节分为一组&#xff0c;每个字节占8bit&#xff0c;那么共有24个二进…
阅读更多...
对图片进行base64 编码

对图片进行base64 编码

原文地址&#xff1a;https://www.cnblogs.com/coco1s/p/4375774.html 引言 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生&#xff0c;本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大&#xff0c;不过只是希…
阅读更多...
php将图片转成base64编码,利用PHP将图片转换成base64编码的实现方法

php将图片转成base64编码,利用PHP将图片转换成base64编码的实现方法

利用PHP将图片转换成base64编码的实现方法 先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密，它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字…
阅读更多...
Hex编码与Base64编码

Hex编码与Base64编码

Hex编码与Base64编码 什么是明文什么是编码Hex编码Hex编码实现细节自定义Hex编码 Base64编码Base64编码实现细节自定义Base64编码 什么是明文 介绍什么是编码之前&#xff0c;首先了解下什么是明文&#xff0c;表示其本身意思的&#xff0c;他就是明文 比如你看到"E6988…
阅读更多...
Base64编码linux服务器与网页编码不一致问题

Base64编码linux服务器与网页编码不一致问题

一、起因 在一次环境变量注入的时候&#xff0c;使用Base64将密码编码传入&#xff0c;但是传入后无法登录&#xff0c;但是登录到容器内&#xff0c;使用明文却能登录 二、排错过程 出现这种问题&#xff0c;首先判断密文是否有误&#xff0c;但是在linux服务器内反复base64&…
阅读更多...
mysql 图片base64_关于图片的Base64编码

mysql 图片base64_关于图片的Base64编码

什么是Base64编码 Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。 base64编码就是长得像下面这样子的代码： thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面…
阅读更多...
前端Base64编码

前端Base64编码

Base64编码 什么是Base64编码 我们所看到的网页上的每一个图片&#xff0c;都是需要消耗一个 http 请求下载而来的&#xff0c;不管如何&#xff0c;图片的下载始终都要向服务器发出请求&#xff0c;要是图片的下载不用向服务器发出请求&#xff0c;而可以随着 HTML 的下载同…
阅读更多...
图片Base64编码

图片Base64编码

图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生&#xff0c;本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大&#xff0c;不过只是希望通过一些浅显的论述&#xff0c;让你知道什么是图片的 base64 编码&#xf…
阅读更多...
什么是Base64 编码，Base64 编码有哪些优缺点？

什么是Base64 编码，Base64 编码有哪些优缺点？

很多朋友在工作中&#xff0c;可能经常会用到Base64编码。Base64编码是网络上很常见的用于8Bit字节码的编码方式之一&#xff0c;那么&#xff0c;大家知道为什么要使用Base64 编码&#xff0c;Base64 编码有哪些优缺点呢&#xff1f;下面&#xff0c;我们一起来研究一下。 什…
阅读更多...
前端Base64编码知识,一文打尽

前端Base64编码知识,一文打尽

原文: https://juejin.cn/post/6989391487200919566 作者: 云的世界 掘金专栏: 前端基础进阶 大厂技术 高级前端 Node进阶 点击上方 程序员成长指北&#xff0c;关注公众号 回复1&#xff0c;加入高级Node交流群 前言 本文将详细的介绍前端 Base64 编码知识&#xff0c;探索…
阅读更多...
Python模板库Mako的语法

Python模板库Mako的语法

原文链接&#xff1a;http://www.yeolar.com/note/2012/08/28/mako-syntax/ Mako模板从一个包含各种类型的内容的文本流解析得到&#xff0c;包括XML、HTML、email文本等。模板还可以包含Mako指令&#xff0c;用来表示变量和表达式替换、控制结构、服务器端注释、整块Python代码…
阅读更多...
Django mako 的使用（七）

Django mako 的使用（七）

Django mako 的使用 6.6 mako 的使用 6.6 mako 的使用 安装 mako pip install mako 创建子应用 makos python .\manage.py startapp makos 创建 base_render.py 文件 from django.http import HttpResponse from django.template import RequestContext from django.templat…
阅读更多...
mako模版库实践

mako模版库实践

介绍 这几天在编写一个数据驱动测试框架&#xff0c;其中一个核心模块是根据数据输入&#xff0c;自动转换为测试用例代码。测试数据格式固定&#xff0c;对应的用例代码结构也相对稳定。基于此场景&#xff0c;联想到web页面根据数据从template渲染页面&#xff0c;决定使用类…
阅读更多...
Django——mako的配置与使用方法

Django——mako的配置与使用方法

一、前言 mako最大的特点就是允许在HTML中随意书写Python代码&#xff0c;挺起就很心动啊&#xff01;&#xff01; 二、准备阶段 新建一个项目mako_project&#xff0c;再新建一个app叫app&#xff0c;然后安装mako&#xff08;要联网安装&#xff09; pip install mako然…
阅读更多...
Xen新特性

Xen新特性

4.0 为了增强主机层面的性能和可扩展性&#xff0c;新的Xen 4.0虚拟机管理程序现在横跨主机服务器上的128(之前64 )个物理处理器&#xff0c;最多可以处理1TB的物理主系统内存。在访客环境中&#xff0c;基于Xen 4.0运行的虚拟机现在可以分配给多达128个虚拟处理器/VCPU(不过…
阅读更多...
推荐文章

Copyright @ 2022~2023