大家可能注意到了,网页上有些图 片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg %3D%3D。那么这是什么呢?这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的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’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。
什么是 data URI scheme?
对优化网页性能有研究的人都知道,首要的任务是尽量减少HTTP请求的次数,例如把多个 JavaScript 文件合并,把多个 CSS 文件合并,利用 CSS Sprite (本空间有介绍)合并的小图示等等,但是很多人都不知道还有一个 data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI scheme。
把它在网页上显示出来的标准方法是:
<img src="http://www.XXXX.net/files/images/check.png"/>
这种取得数据的方法称为 http URI scheme,同样的效果使用 data URI scheme 可以写成:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
换句话说我们把图像文件的内容内置在 HTML 文件中,节省了一个 HTTP 请求。
Data URI scheme 的语法
我们来分析一下这句 img 标签的语法:
<img src="data:image/png;base64,iVBOR....>
它包含一下部分:
data:[<mediatype>][;base64],<data>
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
data - 取得数据的协议名称
image/png - 数据类型名称
base64 - 数据的编码方法
iVBOR.... - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
Base64 编码?
不知道甚么是 base64 吗?简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符,往上有很多免费的 base64 编码和解码的工具,你也可以用 PHP 的 base64_encode() 进行编码:
echo base64_encode(file_get_contents('check.png'));
在 CSS 中使用 data URL
Data URI scheme 也可以在 CSS 中使用,例如:
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
浏览器会缓存这种图像吗?
不会,Data URL 虽然节省 HTTP 请求,但是倘若这个图像要在网页多个地方显示的话,便会加大网页的内容,延长了下载的时间,其中一个解决办法是在一个 CSS class 中加入 data URL,在需要显示图像的块调用这个 class,例如:
.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…
注意:IE8以前的版本不支持data URI scheme。
这篇文章写的也不错
http://hi.baidu.com/oxid/blog/item/b4346caf709df0f6fbed50b2.html
相关推荐
.net 图片 base64 编码 Data URI scheme
一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并...
android:scheme 通过uri跳转到APP应用指定Activity
主要介绍了Data URI scheme及其在CSS中的相关使用,文中主要针对其在图片显示方面的应用,需要的朋友可以参考下
抖音快手URL Scheme 里面包含了抖音快手,进入直播间,进入用户,hone,等 手机中的APP都有一个沙盒,APP就是一个信息孤岛,相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme,URL Scheme是为方便app...
Delphi-XE5-开发 Android URI简介
磁力链接
Bitmap、File与Uri 1、将一个文件路径path转换成File String path ; File file = new File(path) 2、讲一个Uri转换成一个path 以选择一张图片为例: String path = FileTools.getRealPathFromUri(content...
Unable to get VFS File object for filename '' : Unknown scheme "sftp" in URI "{1}". 缺少jar包
磁力链接(Magnet URI scheme)是一种特殊类型的统一资源标识符(URI),它包含了通过特定散列函数(如SHA-1)得到的文件内容的散列值,而不是基于位置或名称的引用。这使得磁力链接成为在分布式网络(如BitTorrent...
Data URI scheme。 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,...
android:scheme 通过uri跳转到APP应用指定Activity,供参考
http 与https区别 ssl技术相关 CA认证
它支持将字符串解析为scheme , authority , path , query和fragment URI组件,如下面所定义: : foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/\_________/ \_________/ \__/ | ...
可寻址的 主页 作者 版权 ... 执照 阿帕奇2.0 描述 Addressable是URI实现的替代实现,它是Ruby标准库的一部分。... scheme #=> "http" uri . host #=> "example.com" uri . path #=> "/path/to/resou
eql ( u8 , uri.scheme, "https" )); assert (mem. eql ( u8 , uri.host, "ziglang.org" )); assert (mem. eql ( u8 , uri.path, "/documentation/master/" )); assert (mem. eql ( u8 , uri.fragment, "toc-...
这是在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,比如上面那串字符,其实是一张图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到了。...
https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。 资源主要是讲解:c#采用https访问Web服务器的编程方法,以及源代码实现Https证书认证的过程。
一个android文件的Uri地址一般如下: content://media/external/images/media/62026 这是一张图片的Uri,那么我们如何根据这个Uri获得其在文件... final String scheme = uri.getScheme(); String data = null; i