网页的构成不外乎就是图加文字,往往文字一定都会图片来的快,最主要的原因就在于,文字的载入速度一定会比图片来的快,同时向主机请求的次数相当的低,不像图片当使用的数量愈多,向主机请求的次数就愈高,且当大量向主机请求时,还会造成连线中断,使的图片出现叉烧包,因此这时可以将一些图示类的图片,转成base64的形式,就是将图片转成文字编码,如此一来就能有效的降低,向主机请求的次数,进而加快网页的载入速度。
将图片转成base64的文字编码,无论是jpg、png、svg都没问题,虽然说将图片转换成文字编码,但档案不会比原来的小,只是少了图片请求的次数,同时将图片转成base64时,也无需将图片上传,等于是把照片直接内嵌到网页中,但要如何将图片转换成base64呢?现在只需透过这个平台,立即就能将图片变成base64文字编码,同时还支援多档转换,相当的方便喔!
当进到b64.io的网站后,可点上方的绿**块选择图档,或是直接拖拉到绿**块上方。
而b64.io这平台支援多档转换,因此将要转换的图片,直接拖拉到绿色的区块上方。
放开鼠标后,就会开始进行转换,当转换完成后,下方就会出现已转好的编碥,再将这些编码复制到网页中。
把刚产生的编码,贴到style中,并在body里建立要显示的标签,除了可用背景的方式显示,也可用img的方式,当要用img时,只需将data:的码贴到src就可以了。
开启网页,就会看到,刚一长串的文字,就会显示成图片啦!真的很方便,这对于小图示来说,相当的方便,若一次有上百个图示要载入,建议用此方法会快速许多喔!