首页
前端网聚
前端综合
JavaScript
HTML/CSS
框架组件
工具大全
牛人博客
交互设计
设计综合
图库素材
移动UI设计
设计酷站欣赏
UX团队
平台资讯
数据研究
互联网资讯
云服务平台
数据技术平台
创业服务平台
技术笔记
前端综合
HTML
CSS
JS/Vue/React/Node
插件和组件
移动端开发
工具
其他
前端选刊
综合
CSS
JavaScript
HTML
其他
生活美文
精彩美文
旅游美图
原创短文
兴趣爱好
杂记人生
关于我们
登录
data类型的Url格式 url(data:image/gif;base64,AAAA)是什么?
2016-09-22
标签:
html
阅读: 4,247
以前浏览一下网站的时候,经常见到有的网站网页上有些图片的src或css背景图片的url后面跟了一大串字符,data:image/png;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAQWAASDERE657SFAASD875675。开始的真的不了解是为什么,后来网上一查,终于知道了点,原来所谓”data”类型的Url格式,是在RFC2397中定义的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
比如一些在线资源,
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html
data类型的Url格式早在1998年就提出了,到目前为止,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式
例子:
<img src=“http://www.333xin.com/image/indeximg/skin-1.png”/>
那么转换后可以这样显示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK0AAAA1CAMAAAAERJtfAAAAA3NCSVQICAjb4U/gAAAB+
FBMVEVCxUj6cxn/lottxivtlDmn5KnhTk3V78SN3ZFlxin7llKrxjx2yTD9wpp01Xn87a76fCfjTVD2yFBXw0/A7MLztDH/mWb/3
Nj4Ylf/vbXXyEjmbUSa4J5cxEL8uYyB2IX/kYW045ea2nPJ67Xzh0T/eWr/xL2N1WH1xkLjW0rd8tD/39xbzWClxjr+
3MWZzDP/t6+z6LZmzGa+x0Ht+OZOyVX0dEyr4Irqhz3M8M5exTr/opj+7eL907fe1lV+z0zwqDP4zkX/zMz8sH3g
S0/0wjL6hDX9yqjnyEz8p2++56XZ89rvWVT7tlhaxEn99M7/7Ork9dn6tkfOx0ST12n5y1H0XlVfxTmQxjX/hnm
LxjT2oTuByzf/5uTnUlH/aln/mZnqiT21xz/i00X/rqXnc0JmzDOj3YD/1ND98sT2x0qezj/0X1W95q3AzkbkYUjw+
uvQ7r7unDfh9Nb/8O71xDrrVVLxrjL211KY2XC1xTr/5OGw4pHvyE77jUNixTH51kz/iXz87rXqgkDgyEr/gXP/pp3
/2dXofED/cmLF6q/E0UL+5dTvY1DhUkzm9t3voja35Jv501jOxUqU1mP/ycPrhj7L7Lf/tbXGx0L/mZnma0r+9+
jsjzvzuzC13pTe9873+urv/+/31kKJzDqZ2XKxzTj/jYF5VSlJAAAAqHRSTlP/
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////8A//////9Qmai1AAAACXBIWXMAAAsSAAALEgHS3X
78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzAxLzE0HmB+6QAAABx0RVh0U29mdHdhc
mUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAiASURBVGiBzZiNc9tmHcflEHeeiz1HNsZtbLm
El6adq9YaBuzYjNWKFdfGLZRFpbBwlO0YoUe7Imfk0kal3QpsXppy63rcbdztuQH/Jr/nTXokPU6UsF743bW
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
7/ApVUpF+4/AsmAAAAAElFTkSuQmCC
data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是我们把图像文件的内容直接写在了HTML 文件中,节省了一个HTTP 请求,这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。。
文章 来源于网络, 仅供网友学习和交流,如果有侵犯到您的权益,请及时联系QQ:1446834691,将会在第一时间进行处理!
对于文中内容,本站只作转载,不代表本站同意文中观点或证实文中信息
0
上一篇:HTML5学习系列之新增标签的用途及使用场景(一)
下一篇:如何在QQ邮件中能正确显示HTML模板中的图片?
热门榜单
VitePress搭建博客教程系列(4) – 如何自定义首页布局和主题样式修改?
VitePress搭建博客教程系列(1) – VitePress的安装和运行
VitePress搭建博客教程系列(5) – 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?
VitePress搭建博客教程系列(6) – 第三方组件库的使用-搭建组件库文档
VitePress搭建博客教程系列(2) – VitePress默认首页、头部导航和左侧导航配置
VitePress搭建博客教程系列(7) – 如何用Github Actions自动化部署到Github Pages?
VitePress搭建博客教程系列(3) – VitePress页脚、标题logo、最后更新时间等相关细节配置
VitePress部署到Github Pages后发现样式全错乱了怎么办?
VitePress搭建博客教程系列(8) – vitePress如何非自动化部署到Github Pages?
多少年的沧桑,更新来了我的小小站,不变的还是太子湾!
热点标签
css
css3
css垂直居中
gulp
html
javascript
jquery插件
mongodb
nodejs
vitePress
vue
vue-cli
webpack
wordpress
前端开发工程师
前端性能优化
前端面试题目
微信小程序
移动webApp开发
精彩美文
文章存档
2023年十月
2023年九月
2020年二月
2019年九月
2019年七月
2019年六月
2019年五月
2019年四月
2019年三月
2019年二月
2018年十二月
2018年十一月
2018年十月
2018年九月
2018年八月
2018年六月
2018年五月
2018年二月
2017年十一月
2017年九月