关于base64编码
来源:互联网 发布:商标域名 经销商品 编辑:程序博客网 时间:2024/06/09 16:47
一、什么是 base64 编码?
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。
如下:
- <span style=“font-family:Microsoft YaHei;”>//在css里的写法
- #base64 {
- background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
- }</span>
//在css里的写法
base64 {
background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}
- <span style=“font-family:Microsoft YaHei;”>//在html代码img标签里的写法
- <img src=”data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=”></span>
//在html代码img标签里的写法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
二、为什么要使用 Base64 编码?
网页上的每一个图片,都是需要消耗一个 http 请求来下载的
而使用Base64的话则可以跳过http的服务器请求,以减少服务器压力。
当我们需要使用到一个图片相对较小,例如几十字节,这时候却需要一个 http 请求十分不值得。那么此时将它转化为 base64 编码。
三、base64编码在线网站进行转换
http://imgbase64.duoshitong.com/
四、CssSprites(雪碧图)与Base64编码区别。
4.1 使用CssSprites合并为一张大图:
页面具有多种风格,需要换肤功能,可使用CssSprites
网站已经趋于完美,不会再三天两头的改动(例如button大小、颜色等)
使用时无需重复图形内容
没有 Base64 编码成本,降低图片更新的维护难度。(但注意 Sprites 同时修改 css 和图片某些时候可能造成负担)
不会增加 CSS 文件体积
4.2 使用base64直接把图片编码成字符串写入CSS文件:
无额外请求
对于极小或者极简单图片
可像单独图片一样使用,比如背景图片重复使用等
没有跨域问题,无需考虑缓存、文件头或者cookies问题
4.3 base64缺点:
Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。
一般请求http的图片不会因为关键渲染路径带来阻塞,但是由Base64转化而来的图片却大大增加了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染,而图片不会。
重点内容
阅读全文
1 0
- 关于Base64编码(转载)
- 关于Base64编码的
- 关于Base64编码
- 关于Base64编码
- 关于Base64编码
- 关于Base64编码解码
- 关于base64编码
- 关于base64编码
- 关于Base64编码
- 关于BASE64编码的说明
- 关于Base64的编码问题
- 关于Base64编码的理解
- 关于Base64编码的理解
- 关于使用BASE64编码后的问题
- 关于base64编码的原理及实现
- 关于base64编码的原理及实现
- 关于base64编码的原理及实现
- 关于base64编码的原理及实现
- Python学习(基本运算)
- 关于Javascript中this的指向以及一些应用
- 编程语言目录
- ActiveMQ集群示例
- 关于 dll 与目标工程的管理及若干注意事项
- 关于base64编码
- XGBoost 与 信用卡诈骗数据集 二
- Co-prime-容斥
- Oracle的pipelined函数实现高性能大数据处理
- TCP/IP簇——ICMP协议概述
- 通过/sys/class/rtc/rtcX/date 获取rtc的时间
- [译] Python Numpy学习资料 (1)
- 仿照VOC2007制作自己的数据集,并在Caffe上训练Faster-RCNN
- Word文档常见的三大问题及其解决方法(珍藏版)