原文链接:
http://www.ibaiyang.org/2013/01/31/data-uris-explained/
自从接触开发web,我会经常的发现大家对URI的错误理解,导致分不清URL和URI的差别。以URL同样的方式去解释URI,却没有仔细的去明白背后的意义。
URI,不是URL
URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源。
其实URL是URI的子集,URI是uniform resource identifier的缩写。URI是用于获取资源,包括其附加的信息的一种协议。附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了。注意的是data URI不是URL,因为它并不包含资源的公共地址。
Data URI 格式
data URI的格式非常简单,具体可以看RFC2397,data URI基本的格式如下:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
在这个格式中,
data:
是URI的协议头,表明其资源是一个data URI。第二部分,MIME type,表示数据呈现的格式,对于PNG的图片,其格式是:image/png,如果没有指定,默认的格式是:text/plain。这个character set(字符集)大多数被忽略,如果指定是的数据格式是图片时,字符集将不再使用;下一部分,将表明其数据的编码方式,我们可以不必使用base64编码格式,如果那样,我们将使用标准的URL编码方式(形如%XX%XX%XX的格式);这个encoded data部分,可能包含空格,但是无关紧要。
Base 64编码
base64是一种编码方式,将数据变成位流(bit stream),然后将其映射到base64的集合内。base64包含A-Z,a-z,自然数以及+,/符号。等号=表明我们需要进行位填充(padding)。
下面是一个例子:
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
如果不用base64进行编码的话,那么用标准的URL编码,那么其如下:
data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE %CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00%00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08%13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C%A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80%80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84%02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D%BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7 %AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07%02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03%AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B
显而易见,进过base64编码后的数据小了许多。
Note: base64编码实际上使得image图片数据变得更大。如果使用HTTP 压缩,你将不能注意到其细微的变化,因为base64可以很好的压缩;如果你不用HTTP压缩,或许你能check一下实际你发了多少字节。
不仅仅是图片
如今,我们多数谈论data URI时,通常都是谈论嵌入在HTML,CSS文件里的图片。实际上,你可以嵌入任何数据格式,甚至包含HTML文件自身。
这里有一个工具,你可以来尝试一下URI协议。
性能的影响
URI最有兴趣的一点是它允许让你在文件中嵌入其他的文件。许多新手将图片嵌入在CSS文件中来作为一种提高性能的方式。实际上,有许多研究表明,HTTP请求是很多网站性能黑洞,能减少HTTP请求从某种意义上讲是可以提高性能的。“Minimize the HTTP request”也恰好是Yahoo的准则。它如此的提到data URI:
Inline images use the data: URI scheme to embed the image data in the actual page.This can increase the size of your HTML document.Combininginline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages.Inline images are not yet supported across all major browsers.
最后,我们利用浏览器做一个小的test。请点击以下连接,君,请看浏览器输入栏哦。
猛点击之
References:
http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
相关推荐
.net 图片 base64 编码 Data URI scheme
Data URI浅析 上来和大家分享……
探究 dataURI 中使用 SVG 正确姿势
模组npm i --save datauri命令行界面npm i -g datauri-cli使用datauri的工具NPM脚本古尔一个插件,用于将图像转换为嵌入式数据URI。 旨在用作的简单单一用途包装器。RUN 在datauri模块的顶部运行着许多grunt插件。 ...
Boost.URL是一个用于操作统一资源标识符(URI)和定位器(URL)的库。
URI和URL区别 .
URI,URL常识,需要的可以看看
这不是很可靠,并且会拒绝许多有效的数据URI。 但是,它遇到了最有用的情况:模仿类型,字符集和base64标志。 安装 $ pip install python-datauri 解析中 >> > from datauri import DataURI >> > uri = DataURI ( ...
to-datauri 从图像源 url 获取数据 uri。 用法 var toDataURI = require('to-datauri'); toDataURI(imagePath, function (error, uri) { // do things. });
URI与URL的区别 自己看看
一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并...
iconfont到datauri 用于将iconfont网站上的项目字体转为内嵌样式可用的datauri编码 支持语言:中文 (简体)
CSS本地图像参考->数据URI转换接受文件... #用法css-img-datauri-stream(文件[,选择]) file - CSS文件转换opts -可选对象,其“maxImageSize”成员指定一个字节大小超过该局部图像的引用将不被转换到数据的URI。
数据生成器用于从文件转换为[removed]写入文件datauri -f=file.png >> file.png.txt# makes a file "file.png.txt" containing the data URI安装只需运行npm install -g 。 现在,您可以全局使用datauri命令。依存...
将图像编码为DataURI。 安装 通过凉亭安装。 $ bower install 1000ch/image-encoder 用法 var ie = new ImageEncoder ( 'path/to/image.png' ) ; ie . getDataURI ( ) . then ( function onFulfilled ( datauri ) {...
自述文件埃里克沃特2015-01-25 DataURI PHP 库#这个项目是什么# DataUri 类提供了一种访问和构造数据 URI 的便捷方法,但不应依赖它来执行 RFC 2397 标准。 本课程不会: 验证提供/解析的媒体类型验证提供/解析的...
import datauri from 'file-to-datauri' // use with a callback datauri ( __dirname + '/some/file.txt' , ( err , uri ) => { if ( err ) { return ; } console . log ( uri ) ; } ) ; // use with ...
调整大小 将dataURI调整为最大尺寸 用法 var resizeo = require('resizeo'); resizeo(dataUri, 1024, function(error, resizedUri) { // use resizedUri });
数据下载 接受文件名和datauri,并使浏览器打开文件/数据的下载对话框。 例子 datauriDownload ( 'gradebook.csv' , 'text/csv;charset=utf-8' , toCsv ( gradebookData ) )
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器,它们由于无法被缓存和重复利用的缺陷,所以并不适合直接在页面中使用,但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性.