关于图片的Base64编码

雨点打透心脏的1/2处 2021-12-14 12:51 461阅读 0赞

**什么是Base64编码**

Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。

base64编码就是长得像下面这样子的代码：

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代码大家都熟悉吧，迅雷下载链接哦，就是base64编码后的地址，所以以后看到这种：一堆连续字母，最后有1~2个`"="`的代码就是base64。Base64编码并不只是用在图片处理上，还可以用在URL转换上，比如上述我们常见的迅雷以thunder开头的专用地址，就是通过Base64加密处理过后的URL地址。

base64:URL就是URL地址是base64编码的。

例如下面这个：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

**base64与文件数据编码**

在网络中，通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然，可以base64编码的文件不仅仅是图片，也可以是字体文件，例如(中间有缺省)：

@font-face\{

font-family: forTest;

src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

\}

自然，对于background-image图片，我们也可以使用base64编码进行传输，例如：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

**使用base64:URL的优缺点**

base64:URL传输图片文件的好处在于：

1减少了HTTP网络请求。

我们都知道，网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段。

2采用Base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题。

3没有图片更新要重新上传，不会造成清理图片缓存的问题

不足在于：

**1 浏览器支持**

使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持）。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

**2 增加了CSS文件的尺寸**

当我们将一个只有几KB的图片转化为Base64格式编码，生成的字符串往往会大于几KB，如果将其写在一个css文件中，这样一个css文件的大小会剧增，造成代码可读性差不说，还会造成请求传输的数据量递增。

**3 造成数据库数据量的增大**

如果我们将Base64位的编码的图片存入数据库中，会造成数据库数据量的增大，这样的效果还不如将图片存至图片服务器，而只在数据库中存入url字段。

**何时使用**

分析了Base64编码的优劣，那么我们该如何正确的使用Base64编码呢？这里总结出使用Base64编码的几个地方。

*  这类图片不能与其他图片以CSS Sprite的形式存在，只能独行
 *  这类图片从诞生之日起，基本上很少被更新
 *  这类图片的实际尺寸很小
 *  这类图片在网站中大规模使用

对于极小或者极简单的图片，例如只有几像素的图片，不用考虑跨域问题也不想页面的图片缓存，果断用base64。

转载于:https://www.cnblogs.com/ranyonsue/p/8615824.html

发表评论取消回复

表情：

评论列表（有 0 条评论，461人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64编码转图片在线

[Base64在线转换图片\_图片转Base64\_在线base64图片转换工具\_yzc工具网][Base64_Base64_base64_yzc] [Base64_Ba

朱雀/ 2024年02月20日 11:54/ 0 赞/ 60 阅读

相关 base64编码转图片格式

base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta chars

╰半夏微凉°/ 2023年01月01日 04:58/ 0 赞/ 189 阅读

相关将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片

目录代码结果注意代码 public class Test { pu

深碍√TFBOYSˉ_/ 2022年09月10日 06:14/ 0 赞/ 238 阅读

相关 libcurl post图片 base64编码

\include "httppost.h" \include <curl/curl.h> \include <string.h> \include <sys/time.

曾经终败给现在/ 2022年06月15日 01:13/ 0 赞/ 185 阅读

相关 js传送图片Base64编码

> 起初打算将base64的编码放到input的value中，后台用String接收，结果后台一直取不到，看来是我想多了。虽然input的value是没有长度限制的，Strin

妖狐艹你老母/ 2022年05月20日 02:12/ 0 赞/ 186 阅读

相关 C#中图片转换为Base64编码，Base64编码转换为图片

region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename)

清疚/ 2022年04月23日 00:58/ 0 赞/ 1346 阅读

相关图片url转base64编码

Html <input type='file' class='upload-img' /> JQ $('.upload-img').on('change'

古城微笑少年丶/ 2022年03月17日 05:46/ 0 赞/ 367 阅读

相关关于base64编码

今天和同事聊到在给前端传输验证码的时候，涉及到了这个关于base64编码的问题。可以通过编码的格式来获取图片 Base64是网络上最常见的用于传输8Bit字节码

末蓝、/ 2022年01月26日 01:47/ 0 赞/ 236 阅读

相关关于图片的Base64编码

什么是Base64编码 Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。 base64

雨点打透心脏的1/2处/ 2021年12月14日 12:51/ 0 赞/ 462 阅读

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

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 955 阅读