当前位置:   article > 正文

base64编码的使用与解析

base64编码的使用与解析

base64将图片信息编码成一串编码字符串,用字符串代替图片地址使用


base64的好处:

1、图片使用地址会增加http请求、base64则省去了http的请求,会随着html下载到本地
2、无跨域问题缓存问题、但是也一般适合用于小图
图片转化为base64

base42坏处


长时间白屏
使用 Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。
而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的阻塞。当浏览器从服务器接收到一个HTML页面的请求时,
到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”
也就是CPR


base64编码解析成图片


直接将编码复制到谷歌浏览器回车

data:image/jpg;base64,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

 使用方法

  1. .css{
  2. background:url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center
  3. }
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/330443?site
推荐阅读
相关标签
  

闽ICP备14008679号