当前位置：网站首页 > 技术分析 > 正文

关于图片的Base64编码，你了解吗?

liebian365 2024-10-24 14:33 38 浏览 0 评论

如果你是一个前端工程师，图片的处理你是肯定要会的，关于图片的Base64编码，你可能有点陌生，但是这是一个前端工程师应该要掌握的知识点，今天我们就一起来看一下吧。

Base64

Base64编码

那么什么是Base64编码呢？

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

我们可以来看一下实际的效果

Base64编码效果

在上图中，我们可以看出img的src属性开头是data:image/png;base64，这种开头表示的就是Base64编码后的图片格式，鼠标放在src属性上，可以看出实际的图片。

图片采用Base64编码后的字符串非常长，这里截取一部分来看下效果

Base64编码的部分字符串

真实的全部字符串会比这长的多，可能达到几十KB

当然，Base64编码并不只是用在图片处理上，还可以用在URL转换上，比如说我们常见的迅雷以thunder开头的专用地址，就是通过Base64加密处理过后的URL地址，如下图所示

Base64处理后的URL

为何使用Base64编码

存在及必然，那么我们为什么要使用Base64编码呢？

1.其中很重要的一点就是，使用Base64编码可以减少网络请求。

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

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

3.不会造成清理图片缓存的问题

Base64编码劣势

Base64编码既有优势也有劣势，上述已经说了Base64编码的优势，接下来看看劣势。

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

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

3.对于IE8以下的浏览器，不支持data url格式，IE8开始支持data url，却对大小作出了限制，在使用时不是很方便。

如何使用

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

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

总结

关于Base64编码的图片，有其优势，也有劣势，需要我们自己总结，

今天的内容，了解了吗？

c++ base64

上一篇：MySQL中如何将字符串转为base64编码?
下一篇：告别老朋友，拥抱新方法:轻松解码Base64，编程从未如此有趣!

相关推荐

深度解密epoll 如何工作的?（epoll基本处理流程）: epoll...

大乐透第19082期:头奖开出7注1000万分落六地奖池41亿元: 2019年7月17日晚开奖的体彩超级大乐透第19082期开奖号码为：前区06、18、20、21、31，后区03、04。本期大乐透前区号码五区比为1:0:3:0:1，二区和四区号码没有给出。当期前区和值...

【开奖】4月27日周六:福彩、体彩（2021年4月27日体彩开奖结果）: 4月27日开奖福彩3D第2019110期：61222选5第2019110期：0812202122排列3第19110期：303排列5第19110期：30305大乐透第19047期：0304...

“红狒狒”落户哈尔滨铁路局（哈尔滨铁路红肠）: 这几天，“红人”“红狒狒”在牡丹江机务段可引起了不小的轰动，众粉丝争相与其拍照留念，在该段人气爆棚！“红狒狒”到底何许人也？“红狒狒”，中文名：和谐3D型电力机车；绰号：红狒狒、番茄；制造商：大连机...

2D、3D、2.5D，做游戏还是搞噱头?玩家都晕了: 前言游戏类型就像某种潮流，一种流行罢，另一种接棒成为主流。前两年的新作大多以“开放世界”为标签，在追求纯沙盒的过程中打造出一些细致的分类，比如说“类GTA沙盒”。诚然，纯碎的沙盒游戏并不多见，业内只有...

《战神4》PC版宣传片发布 GTX 1070即可60帧畅玩: 在今年10月的时候索尼PlayStation官方正式宣布圣莫尼卡2018年的《战神4》将于2022年1月14日推出PC版本，官方在今天公布了一段PC版宣传片，并且公开了游戏的配置需求。下面让我们一起来...

男星深情好丈夫形象崩塌，半夜搂美女坐大腿，举止亲密: 近日，于晓光被拍到深夜在酒吧玩，结束后与一名女子一起上车离开。上车后，女子直接坐在了他腿上，他也顺势搂着美女，美女满脸笑容地坐在他腿上玩手机离开。可能有人会好奇，于晓光是谁呢？于晓光是韩国艺人秋瓷炫的...

d3d12dll丢失怎么修复?d3d12dll加载失败怎么解决?: 　　d3d12.dll丢失怎么修复？d3d12.dll加载失败怎么解决？很多朋友想要运行游戏的时候都会遇到这个问题，这种情况该怎么办呢？今天系统之家小编给朋友们讲讲具体的解决方法，操作其实还蛮简单的。...

许多玩家反馈《生化4RE》PC一直崩溃无法进入游戏: 今日（3月24日），卡普空《生化危机4：重制版》正式发售，然而有部分PC玩家遇到了游戏崩溃等问题。很多玩家在贴吧发帖称游戏遇到了严重的崩溃问题，且经常反复，报错代码普遍为FatalD3Derror...

微软正式推出适用于WSL Linux的D3D12 GPU视频加速技术: 今天，微软正式向WindowsSubsystemforLinux(WSL)用户发布了Direct3D12GPU视频加速支持。在微软通过WSL允许在Linux下使用Open...

《怪物猎人:崛起》曙光系统报错“Fatal d3d error”的解决办法: 《怪物猎人：崛起》曙光系统报错“Fatald3derror”的解决办法不少小伙伴反应《怪物猎人：崛起》DLC曙光预载以后打不开游戏，出现了Fatald3derror类似的错误代码，这类问题的解...

Mac+双屏，前端程序员的专业配置 - Loctek 乐歌 D3D 双屏电脑显示器支架: 做FE也有一段日子了，电脑屏幕每天在设计稿、浏览器、IDE、即时通讯工具、Terminal、邮箱之间切换。虽然mac的工作区带来了很多灵活，但是依然略显不足。于是入手支架，把公司配的电脑和显示器发挥起...

RPC 的原理和简单使用（rpc详解）: RPC的概念RPC，RemoteProcedureCall，翻译成中文就是远程过程调用，是一种进程间通信方式。它允许程序调用另一个地址空间（通常是共享网络的另一台机器上）的过程或函数。在调用的...

大厂开源的golang微服务rpc框架 — kitex: 提前rpc估计所有的开发同学都知道，不知道的也无所谓，毕竟我也好几年没用了，今天带大家在复习一下。RPC(RemoteProcedureCall)：远程过程调用，...

干货!一文掌握Protobuf所有语言所有用法，快收藏: 说实话，Protobuf这个库，让人相见时难别亦难，东风无力百花残，每次等到要用它的时候，总感觉还没有完全掌握它的用法，而实际上等去百度或者谷歌的时候，教程都是多么的凌乱不堪。学会它，最直接关系到的，...

取消回复欢迎你发表评论:

一周热门

最近发表