Base64编码知识优缺点说明及网站优化介绍

现在不少WordPress网站为了提升用户的浏览体验越来越多的使用了图片,而这些图片通常以Base64的形式存储和加载。因此各位开发工程师肯定对Base64毫不陌生了,那么你知道Base64究竟是什么,为什么要使用Base64,以及Base64的优缺点吗?WordPress怎么利用Base64优化呢?

Base64编码知识优缺点说明及网站优化介绍插图

之前搬主题也有文章专门介绍过Base64优化出现的问题解决【对于Base64转换图片后不显示的问题解决办法】。

什么是Base64

Base64是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况,且编码格式每个字节的前两位都只能是 0,使用剩下的 6 位表示内容。

看到这里相信大家也能够意识到,这种编码格式无法充分利用存储资源,效能较低。那为什么还会成为网络中的普遍用法呢?其实 Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递,使用 ASCII 码来表示所有的英文字符和数字还有一些符号。这里有一个问题,如果邮件中只传输英文数字等,那么 ASCII 可以直接支持。但是如果要在文件中传输图片、视频等资源的话,这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符,这些控制字符又会成为不可见字符。非英文字符和控制字符在传输过程中很容易产生错误,影响邮件的正确传输。为此才有了诞生了一个新的编码规则,把二进制以 3 个字节为一组,再把每组的 3 个字节(24 位)转换成 4 个 6 位,每 6 位根据查表对应一个 ASCII 符号,这就是 Base64。

Base64编码知识优缺点说明及网站优化介绍插图1

△ Base64 索引表Base64 将 8 位为一个单元的字节数据,拆分为 6 位为一个单元的二进制片段。每一个 6 位单元对应 Base64 索引表中的一个字符。简单举个例子,下图中 M 的 ASCII 码是 77 , 而转换为二进制后前六位二进制对应值为 19,为 Base64 字典中的 T。

Base64编码知识优缺点说明及网站优化介绍插图2

当然这里也会有一个问题,如果要编码的二进制数据不是 3 的倍数,那就会剩下一至二个字节。为此 Base64 使用 000000 字节值在末尾补足,使其字节数能够被 3 整除,补位用 = 表示,= 的个数可表示补了多少字节,并在解码时自动去除。总体来看相比编码前,Base64 编码后的字符增加了约 33%。

图片的 Base64 编码

前面我们也提到了 Base64 编码是现在网站小图片的主要加载方式,那 Base64 到底是如何处理图片的呢?

我们都知道图片在网页中的使用方法通常是使用 img 标签的形式,而 img 标签的 src 属性会指定一个远程服务器上的资源。在网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的,而且因为大多数浏览器都有并发请求数的限制,如果你的网页中嵌入了过多外部请求,就很容易出现页面加载速度过慢的情况。

Base64编码知识优缺点说明及网站优化介绍插图3

而 Base64 编码可以通过 Data URL 技术让图片以字符串的格式直接嵌入页面,与 HTML 成为一体。这样在加载时就可以避开对外部资源的请求

为什么选择 Data URL

至于为什么选择 Data URL 技术,是因为跟传统的外部资源引用方式相比,它拥有以下优点:

  • 减少 HTTP 请求;
  • 避免跨域问题;
  • 可像单独图片一样使用,比如背景图片重复使用等。

通过这种方式 Base64 编码可以更为快捷方便得对前端的各种图片资源进行优化。我们看一个具体的例子:

Base64编码知识优缺点说明及网站优化介绍插图4

可以明显看到 Base64 编码将一幅图片数据编码成一串字符串,并使用该字符串代替图像地址。尽管乍一眼看上去没有任何图片相关的内容,但它最终渲染出的毫无疑问是一张完整的图片效果。当然使用 Data URL 来进行 Base64 图片编码并不是完美的,它有着两个不容忽视的缺点:

  • Base64 编码的数据体积通常是原数据的体积 4/3,也就是 Data URL 形式的图片会比二进制格式的图片体积大 1/3
  • Data URL 形式的图片不会被浏览器缓存

无法被浏览器缓存也就意味着每次访问都需要重新请求资源,这对于服务器压力是比较大的。那有没有办法,能将这些数据也放入浏览器缓存中呢?

网站加快加载小技巧

其实大部分网站的背景图构成,是一个宽高只有几个像素的小图片,通过将它平铺成为背景图。通常我们将小图片保存成 GIF 或 PNG 格式,然后在 CSS 的 background-image 属性中引用图片地址。但是浏览器本身并不在意 URL里写的是什么,只是需要通过它获取需要的数据。

所以我们完全可以使用 CSS 样式文件,让 Data URL 形式的图片存储在 CSS 样式表中。这样浏览器就会缓存 CSS 文件,也就会缓存图片,能够进一步提高页面加载效率。

Base64编码知识优缺点说明及网站优化介绍插图5

上图就是一个简单的使用案例,通过这种方式既避免了让背景图片独自产生一次 HTTP 请求的情况,还让背景图片和 CSS 文件一起被浏览器缓存起来,避免了每次打开网页都加载一次背景图片的情况,让改善用户的浏览体验更为快速流畅。通过 Date URL 技术与 Base64 编码的结合有效减少 HTTP 请求,让用户访问体验更好,这其实是我们一个开发过程中的小技巧,希望看完后能够带给大家一些帮助。

 收藏 (0) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《Base64编码知识优缺点说明及网站优化介绍》
文章链接:https://www.banzhuti.com/22747.html
分享到: 生成海报
版权免责声明

① 本站提供的资源(插件或主题)均为网上搜集,如有涉及或侵害到您的版权请立即通知我们。
② 本站所有下载文件,仅用作学习研究使用,请下载后24小时内删除,支持正版,勿用作商业用途。
③ 因代码可变性,不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
④ 本站保证所提供资源(插件或主题)的完整性,但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑤ 由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识!另本站提供汉化使用安装教程,仅供参考。
⑦ 有时可能会遇到部分字段无法汉化,同时请保留作者汉化宣传信息,谢谢!
⑧ 本站资源售价只是赞助和汉化辛苦费,收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源,欢迎捐助本站开通会员享受优惠折扣,谢谢支持!
⑩ 如果网盘地址失效,请在相应资源页面下留言,我们会尽快修复下载地址。

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

WordPress主题 插件 建站 汉化

定制服务联系我们
切换注册

登录

点击按钮进行验证

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

点击按钮进行验证