关于base64编码
来源:互联网 发布:英国牛津大学知乎 编辑:程序博客网 时间:2024/06/15 20:09
一、什么是 base64 编码?
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。
如下:
//在css里的写法#base64 { background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;}
//在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编码的原理及实现
- Linux 日志分析,过滤,处理
- extJs之layout
- RAID
- 【随笔】 《谁动了我的奶酪》中的粒子群算法.
- python的GUI编程(Tkinter库)(三)
- 关于base64编码
- Android实战技巧:深入解析AsyncTask
- socket编程--1
- J2EE系列之MyBatis学习笔记(六)-- 动态sql
- ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet
- 捕捉信号与sleep模拟
- [virtualbox] 设置虚拟机是无法选用host-only的连接方式
- aqtest 004
- mysql---视图