【图片】你了解Base64吗？

Base64是一种将任意二进制数据转换为纯文本的编码方式，它可以将二进制数据转换为普通文本，以便在网络上更方便地传输和存储数据。常被用于在文本协议下传输非文本文件，以及在URL中传递数据等场景。它将3个8位字节转为4个6位字节，然后用特定的字符表示这4个6位字节(即一个字符代表6位二进制数字)。它利用64个可打印字符来表示二进制数据,这64个字符包括数字0-9、小写字母a-z、大写字母A-Z以及符号+和/。通过这种编码方式，会比原始二进制数据的大小增加约33%。

体积为什么会增加？

简单点说就是因为Base64编码是将二进制数据转换成64个字符的编码方式，它将每3个字节的二进制数据转换成4个字节的文本数据，因此增加了大约33%的体积。

Base64是从二进制数据到字符的过程，这些数据需要通过设计用于处理 ASCII 的媒体进行存储和传输。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。计算机中所有的内容，包括文本、图片、音频、视频等等都可以使用Base64编码来表示。

Base64是加密算法吗？

Base64不是一种加密算法,它是一种编码格式。base64的初衷，是为了满足电子邮件中不能直接使用非ASCII码字符的规定.现在最常用的应用场景就是在http协议上传输较长的文本信息。它是将用户输入的二进制数据，打包成一种安全格式，将其作为http首部字段的值发送出去，而无须担心其中包含会破坏HTTP分析程序的冒号、换行符或二进制值。

Base64是一种将二进制数据转换为文本数据的编码方法。因为HTTP协议要求传输的内容必须是文本，所以我们需要一种方法将二进制数据(如图片、视频等)转换为文本形式传输。Base64就起到了这种转换作用。

Base64编码后的文本数据比原始二进制数据长，但可以通过HTTP等协议安全传输。在接收端，通过解码就可以还原到原始数据。

但是Base64本身并不对数据进行任何加密，任何人都可以将Base64编码后的文本解码还原。它只是一种编码格式，目的是方便传输二进制数据，但不提供数据的安全性或隐私性保护。

简单来说，Base64不是一种加密算法，它只是一种编码格式，用于将二进制数据转换为文本形式传输。它不对数据进行任何加密处理。

为什么说base64减少了HTTP请求

base64编码可以将图片添加到css中，实现请求css即可下载下来图片，减少了在此请求图片的请求。

base64优点

支持所有编程语言和操作系统,无需考虑平台问题。适合不同平台、不同语言的传输。可以很方便地在网络或电子邮件中传输二进制数据，因为Base64编码后的文本数据是安全的并且可以在所有环境中传输。

可以在文本协议下安全传输非文本数据，且兼容性高。

页面中内嵌使用 base64 格式的小图片，可以简单的加密，减少了 HTTP请求。

请求访问次数。二进制位转换 base64 算法简单，相比原始二进制数据更易于阅读和存储。

base64缺点

二进制文件转换为 base64 后，体积大概增加 1/3，占用更多的带宽和存储空间。而且在传输过程中没有加密，并不能真正保障数据的安全性。

base64 字符过大会导致页面加载速度变慢，因此建议 10kb 以下的图片使用。面对大文件时，会消耗一定的 CPU 进行编解码。

base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css。

编码和解码过程都需要额外的CPU和IO开销，有可能影响性能。

编码后的文本数据难以直接阅读。

不如其他二进制编码方式(如zlib、bzip2等)那样高效。

使用 Base64 不代表性能优化 使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。

base64应用场景

电子邮件：Base64常用于将二进制文件（如图片）附加到电子邮件中，以确保邮件系统能够正确处理。

URL编码：在URL中传输数据时，Base64编码可以确保特殊字符被正确处理。

Web开发：在HTML和CSS中，Base64编码的图像可以直接嵌入，避免了额外的HTTP请求。

数据存储：在配置文件或脚本中，Base64编码用于存储二进制数据，如加密密钥。

Base64编码与图片压缩的比较

Base64编码：适合小型图片、图标等，便于嵌入到文本中，减少HTTP请求，但会增加数据长度。

图片压缩：适合大型图片，可减小文件大小，提高传输速度，但需要解压缩后才能使用，增加了复杂性。

线上图片转base64: https://**.sojson.com/i**ge2base64.html

使用base64优化图片

优化思路：由于 JPEG、PNG 和 GIF 等格式图片被 gzip 等压缩算法压缩效果一般，所以通过配置 webpack，在打包时，将 JPEG、PNG 和 GIF 等格式图片转换为 图片 Base64 编码的 DataURI，即可通过 gzip 等压缩算法对文本进行压缩。需要注意的是，将图片转换为图片 Base64 编码的 DataURI 字符串可能会导致文件大小变大，并且会影响到应用程序的加载速度。因此，建议只将小文件转换为 base64 编码的字符串，而将大文件编译成普通的图片文件。

基于 Vue 2 + Webpack 4 的 vue.config.js 配置示例：

// vue.config.js 
module.exports = { devServer: { host: "0.0.0.0", port: 9999, https: false, // 调试时启用 gzip 压缩 compress: true, // 调试时允许内网穿透，让外网的人访问到本地调试的 H5 页面 disableHostCheck: true, }, configureWebpack: { rules: [], plugins: [], }, configureWebpack: (config) => {}, chainWebpack: (config) => { config.module .rule("i**ges") .test(/\.(png|jpe?g|gif)$/i) .use("url-loader") .loader("url-loader") .tap((options) => { // 将文件大小限制为100kb以内，超过100kb的文件将被编译成普通的图片文件。 options.limit = 100 * 1024; return options; }); },};

基于 Vue 3 + Webpack 5 的 vue.config.js 配置示例：

// vue.config.js const path = require("path");const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 8123, // 调试时启用 gzip 压缩 compress: true, // 调试时允许内网穿透，让外网的人访问到本地调试的 H5 页面 disableHostCheck: true, }, configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 100 * 1024, // 将文件大小限制为 100kb 以内，超过 100kb 的文件将被编译成普通的图片文件。}, }, }, ], }, }, chainWebpack: (config) => { config.resolve.alias.set("@", path.resolve(__dirname, "src")); },});// vue.config.js const path = require("path");const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 8123, // 调试时启用 gzip 压缩 compress: true, // 调试时允许内网穿透，让外网的人访问到本地调试的 H5 页面 disableHostCheck: true, }, configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 100 * 1024, // 将文件大小限制为 100kb 以内，超过 100kb 的文件将被编译成普通的图片文件。}, }, }, ], }, }, chainWebpack: (config) => { config.resolve.alias.set("@", path.resolve(__dirname, "src")); },});