将图片转换为base64编码最常见的应用应该就是在将网页中的一些图片转换为base64编码可以实现网页图片在网速不好的时候先于内容加载和减少HTTP的请求次数来减少网站服务器的负担。
1.主要:减少了HTTP请求
我们都知道,我们的网站采用的都是HTTP协议,而HTTP协议是一种无状态的链接,就是连接和传输后都会断开连接节省资源。此时解决的方法就是尽量的减少HTTP请求,此时base64编码可以将图片添加到css中,实现请求css即可下载下来图片,减少了在此请求图片的请求。当然减少HTTP请求次数的方法还有很多,如css sprite技术,将网页中的小图片拼在一张大图片中,下载时只需要一次完整的HTTP请求就可以,减少了请求次数。
2、提前加载图片的应用
这个大家可以去看一下天猫主页的css代码,大家可能没注意到,在我们使用网速不好时候的网络去访问天猫的时候,在页面没有完全加载出来的时候就会出现一个“小猫”的等待图标,增加了用户体验。其实现的原理就是将那张图片使用base64编码放到css中,因为我们都知道,css是在html头部引用的,要优先于下面的内容被加载,所以在网速不好的时候就会出现这种效果。