- N +

关于base64编码

文章目录 [+]

今天看到了base64编码方式,这东西以前看到过类似的代码但是并没有注意,它实际上就是从二进制代码转化到可读字符的过程,在家在网页图片的时候,会产生http请求,从而影响页面的加载速度。所以现在有一种做法是将多张图片合并到一起,这样在打开页面的时候只需要一次http请求就可以加载多张图片,然后通过设置图片的背景偏移量来正确的显示。现在我们可以将图片转成base64编码,然后直接写在html页面或者css里面,这样在加载页面或者css的时候就可以直接将图片加载过去,这样也省去了设置图片背景偏移量带来的浏览器兼容性问题。

1、在html中img标签中显示base64编码的图片 


 下面我们来看一下如何显示一张图片:


QQ截图20180513224221.png

2、将base64编码的图片嵌入到css中


在css里面的实现如下:

QQ截图20180513224457.png

BASE64 搞出来的图片通常尺寸会大上 30% 左右。大尺寸不建议用base64,因为代码会变得更加臃肿,可能百度引擎会截断网页从而无法辨别出主题内容,从而对网站优化造成影响,base64本身不可以缓存,如果 base64 是被编码到 css/js 中,是可以缓存的,因为 css/js 文件可以缓存。一般只有小图标可以用base64,并且放在css文件中。

作者:huchao
未来永远在它该来的路上,能够把握的只是此时此刻——万折必东
返回列表
上一篇:
下一篇:
评论列表 (暂无评论,共1100人参与)参与讨论

还没有评论,来说两句吧...

发表评论中国互联网举报中心

快捷回复: