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

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

liebian365 2024-10-24 14:33 13 浏览 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，编程从未如此有趣!

相关推荐

快递查询教程，批量查询物流，一键管理快递: 作为商家，每天需要查询许许多多的快递单号，面对不同的快递公司，有没有简单一点的物流查询方法呢？小编的回答当然是有的，下面随小编一起来试试这个新技巧。需要哪些工具？安装一个快递批量查询高手快递单号怎么快...

一键自动查询所有快递的物流信息支持圆通、韵达等多家快递: 对于各位商家来说拥有一个好的快递软件，能够有效的提高自己的工作效率，在管理快递单号的时候都需要对单号进行表格整理，那怎么样能够快速的查询所有单号信息，并自动生成表格呢？1、其实方法很简单，我们不需要一...

快递查询单号查询，怎么查物流到哪了: 输入单号怎么查快递到哪里去了呢？今天小编给大家分享一个新的技巧，它支持多家快递，一次能查询多个单号物流，还可对查询到的物流进行分析、筛选以及导出，下面一起来试试。需要哪些工具?安装一个快递批量查询高手...

3分钟查询物流，教你一键批量查询全部物流信息: 很多朋友在问，如何在短时间内把单号的物流信息查询出来，查询完成后筛选已签收件、筛选未签收件，今天小编就分享一款物流查询神器，感兴趣的朋友接着往下看。第一步，运行【快递批量查询高手】在主界面中点击【添...

快递单号查询，一次性查询全部物流信息: 现在各种快递的查询方式，各有各的好，各有各的劣，总的来说，还是有比较方便的。今天小编就给大家分享一个新的技巧，支持多家快递，一次能查询多个单号的物流，还能对查询到的物流进行分析、筛选以及导出，下面一起...

快递查询工具，批量查询多个快递快递单号的物流状态、签收时间: 最近有朋友在问，怎么快速查询单号的物流信息呢？除了官网，还有没有更简单的方法呢？小编的回答当然是有的，下面一起来看看。需要哪些工具？安装一个快递批量查询高手多个京东的快递单号怎么快速查询？进入快递批量...

快递查询软件，自动识别查询快递单号查询方法: 当你拥有多个快递单号的时候，该如何快速查询物流信息？比如单号没有快递公司时，又该如何自动识别再去查询呢？不知道如何操作的宝贝们，下面随小编一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号若干...

教你怎样查询快递查询单号并保存物流信息: 商家发货，快递揽收后，一般会直接手动复制到官网上一个个查询物流，那么久而久之，就会觉得查询变得特别繁琐，今天小编给大家分享一个新的技巧，下面一起来试试。教程之前，我们来预览一下用快递批量查询高手...

简单几步骤查询所有快递物流信息: 在高峰期订单量大的时候，可能需要一双手当十双手去查询快递物流，但是由于逐一去查询，效率极低，追踪困难。那么今天小编给大家分享一个新的技巧，一次能查询多个快递单号的物流，下面一起来学习一下，希望能给大家...

物流单号查询，如何查询快递信息，按最后更新时间搜索需要的单号: 最近有很多朋友在问，如何通过快递单号查询物流信息，并按最后更新时间搜索出需要的单号呢？下面随小编一起来试试吧。需要哪些工具？安装一个快递批量查询高手快递单号若干怎么快速查询？运行【快递批量查询高手】...

连续保存新单号功能解析，导入单号查询并自动识别批量查快递信息: 快递查询已经成为我们日常生活中不可或缺的一部分。然而，面对海量的快递单号，如何高效、准确地查询每一个快递的物流信息，成为了许多人头疼的问题。幸运的是，随着科技的进步，一款名为“快递批量查询高手”的软件...

快递查询教程，快递单号查询，筛选更新量为1的单号: 最近有很多朋友在问，怎么快速查询快递单号的物流，并筛选出更新量为1的单号呢？今天小编给大家分享一个新方法，一起来试试吧。需要哪些工具？安装一个快递批量查询高手多个快递单号怎么快速查询？运行【快递批量查...

掌握批量查询快递动态的技巧，一键查找无信息记录的两种方法解析: 在快节奏的商业环境中，高效的物流查询是确保业务顺畅运行的关键。作为快递查询达人，我深知时间的宝贵，因此，今天我将向大家介绍一款强大的工具——快递批量查询高手软件。这款软件能够帮助你批量查询快递动态，一...

从复杂到简单的单号查询，一键清除单号中的符号并批量查快递信息: 在繁忙的商务与日常生活中，快递查询已成为不可或缺的一环。然而，面对海量的单号，逐一查询不仅耗时费力，还容易出错。现在，有了快递批量查询高手软件，一切变得简单明了。只需一键，即可搞定单号查询，一键处理单...

物流单号查询，在哪里查询快递: 如果在快递单号多的情况，你还在一个个复制粘贴到官网上手动查询，是一件非常麻烦的事情。于是乎今天小编给大家分享一个新的技巧，下面一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号怎么快速查询？...

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

一周热门

最近发表