[优化]图片转成 Base64 编码字串,降低连线请求

作者: / / 时间:2020-05-22 / / 浏览量: 823次

网页图片常常是网站载入缓慢的原因之一,而文字、字串通常是载入速最快的,网页如果都是文字而没有图片,相对的读取速度是非常的迅速。是否有想过将图片转成字串?来加快网页速度呢?其实我们可透过base64的方式,将图片转成文字编码,这样对于网页的载入,就不算是一个连线了,确实是有助于网页开启的帮助,因为这样可以降低网页连线请求数量。

在网站建置上,很多人都想要让网站变得更快,让访客进来的第一体验是最棒的,但往往碍于网站引用太多的外部资源造成连线异常的卡,因为网站的载入中,每一个网域每次能载入的资源有限,所以如果能够降低请求数,势必能替网站加快许多,所以前面我们提到了可以透过base64来将图片转成文字,少掉一些连线请求,加快网页开启。

一个网域每次开启网页能开放的连线数有限制,就好比一个门的宽度,胖子的话每次就只能一个人通过,如果是比较瘦的,就可以两个人同时走过去,在门无法变大的状况下,我们该怎幺加快大家进入房子的速度?网站连线请求数也是如此,假设每次同时间仅能请求5个档案,只要有档案读取完才可以再读取下一个档案,但是透过base64的方式,把这些图片透过另一种管道读取进来,就不再受限于每次同时仅能读取5个档案的限制。

使用base64时,若发现图片转换成文字后是好几MB,那基本上我还是建议您不要转该图片,或者是网站上都是图片,那就还是保持原先的连线即可,或者是透过Lazyload延迟图片载入。base64比较适合将一些小图片转成文字,例如社群小图、网站小图等等,其他内容图片或是banner图片,就不建议这样转换了。补充,如果是Javascript卡住,可以使用Javascript延迟载入。

base64 图片编码应用参考

其实这个玩意,Google已经使用很久了,不知道大家有没有去Google图片搜寻中找过图片?有时候我们看到图片不错,想说到网站内去取得他的原始图档,殊不知竟然原始网站倒了,那为什幺Google还存有这些图片?一般思考就是Google会快取一些资料下来,这样的逻辑是没错的,确实有些图片是这样被块取下来,但是在搜图服务中为了要让开启更快,其实Google做了一些小应用。首先你可以在搜图中找一张图片点选一下,接着再点选上方的原图,利用滑鼠右键选择【在新分页开启影像】。

[优化]图片转成 Base64 编码字串,降低连线请求

有没发现网址列不太一样?这就是base64的图片应用,把图片转成一大串文字,就算网站不见了,图片原始连结不在了,只要有这张图的base64编码,图片就永远存在。

[优化]图片转成 Base64 编码字串,降低连线请求

网站名称:base64 image网站网址:http://www.base64-image.de/使用限制:档案小于1.5MB,允许jpg、gif、png

第1步  来到base64 image网站,点选﹝Upload image﹞按钮。

[优化]图片转成 Base64 编码字串,降低连线请求

第2步  接着请选择您要转换的图片,然后点选﹝encode image﹞进行编码。

[优化]图片转成 Base64 编码字串,降低连线请求

第3步  香肠编码的图片是一张小小的缩图,因为将网页连线浪费在小图上是很不值得的XD。你看编码完后其实很短(因为图真的很小)。

[优化]图片转成 Base64 编码字串,降低连线请求

第4步  将网页往下拉,他有提供一些应用,比方说用在CSS的背景图片或者是html中的img语法以及xml的使用方式。

[优化]图片转成 Base64 编码字串,降低连线请求

第5步  最后香肠来编码一张logo,直接使用编码后的图片,这样应该比较有感XD。

( 原图:11.3KB;编码后:15.1KB,虽然大一点点,但是少一个连线数)

[优化]图片转成 Base64 编码字串,降低连线请求

base64 有什幺缺点?

简单来说,base64 image 在过于老旧版本的浏览器是无法显示的,如果你看不到上面那一张DEMO图片,就表示你浏览器该换了,使用IE9、IE10、Firefox、Google Chrome都是可以看到的。其实缺点还有一个就是编码后是一堆用人眼无法理解的编码,放在网站上可能比较不好看,程式码感觉比较混乱一点这样。因此通常香肠会建议针对CSS的小图片使用会来得比较好哦!



上一篇: 下一篇: