高性能网站的一个建议是减少HTTP连接数,使用内联图像嵌入页面可以减少HTTP连接数。目前浏览器支持Data URI的有:Opera 7.2+, Firefox, Safari, Netscape, Mozilla, IE8
Data URI Scheme
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
例如:
<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″>
对于IE8以下的版本,可以使用MHTML(Multipurpose Internet Mail Extensions HyperText Markup Language),例如:
/*
Content-Type: multipart/related; boundary=”_ANY_SEPARATOR”
–_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
*/
#myid {
/* normal browsers */
background-image: url(”data:image/png;base64,iVBORw0[...snip...]“);
/* IE < 8 targeted with the star hack */
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}
Data URI的好处是减少HTTP请求,坏处是浏览器对于URI的长度有限制以及增大了文档的大小。
相关链接:
http://adamlu.com/?cat=5
http://www.sveinbjorn.org/dataurlmaker
http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
http://en.wikipedia.org/wiki/Data:_URI_scheme
http://www.hedgerwow.com/360/dhtml/base64-image/demo.php
http://dancewithnet.com/2009/08/15/data-uri-mhtml/
http://www.chencheng.org/blog/2009/10/28/data-uri-try/
分享到:
相关推荐
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器,它们由于无法被缓存和重复利用的缺陷,所以并不适合直接在页面中使用,但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性.
.net 图片 base64 编码 Data URI scheme
探究 dataURI 中使用 SVG 正确姿势
Data URI浅析 上来和大家分享……
Awstats是一套非常好用的免费的日志分析软件,他是用perl实现的,支持web log、ftp log和mail log;而且它还能自动根据你浏览器的字符设置来选取语言(支持中文). 但是缺省安装的话有个问题,就是用来搜索的关键字如果是...
模组npm i --save datauri命令行界面npm i -g datauri-cli使用datauri的工具NPM脚本古尔一个插件,用于将图像转换为嵌入式数据URI。 旨在用作的简单单一用途包装器。RUN 在datauri模块的顶部运行着许多grunt插件。 ...
to-datauri 从图像源 url 获取数据 uri。 用法 var toDataURI = require('to-datauri'); toDataURI(imagePath, function (error, uri) { // do things. });
首先创建一个文件,用于保存拍照图像,然后根据不同系统版本获取Uri,传递给Intent,然后调起相机(可以考虑将outputImage、imageUri设置为全局变量)。 3、处理回调 使用BitmapFactory读取imageUri,得到bitmap,...
Gulp 插件,使用 data-uri 将 svg 图像嵌入到单个 CSS 文件中。 用法 插件使用示例: var gulp = require ( 'gulp' ) ; var svgcss = require ( 'gulp-svg-css' ) ; var svgmin = require ( 'gulp-svgmin' ) ; ...
URI与URL的区别 自己看看
读取文件(同步或异步),使用文件扩展名查找mime,然后返回编码为data-uri的文件内容。 仅支持utf8编码的文件。 用法 import datauri from 'file-to-datauri' // use with a callback datauri ( __dirname + '/...
主要介绍了Nodejs进阶:如何将图片转成datauri嵌入到网页中去,有兴趣的可以了解一下。
>> > from datauri import DataURI >> > uri = DataURI ( [removed]VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wZWQgb3ZlciB0aGUgbGF6eSBkb2cu' ) >> > uri . mimetype 'text/plain' >> > uri . charset 'utf-8' >> > uri . ...
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1...
CSS本地图像参考->数据URI转换接受文件... #用法css-img-datauri-stream(文件[,选择]) file - CSS文件转换opts -可选对象,其“maxImageSize”成员指定一个字节大小超过该局部图像的引用将不被转换到数据的URI。
IMG2DATA:URI 此工具将上传的图像文件或提供的URL转换为数据uri。 理想情况下,对于小文件,以免CSS过载 安装 下载源码 解压在PHP / Apache可访问的目录中 享受 执照 该项目已获得MIT许可。 该项目使用Feather...
将图像编码为DataURI。 安装 通过凉亭安装。 $ bower install 1000ch/image-encoder 用法 var ie = new ImageEncoder ( 'path/to/image.png' ) ; ie . getDataURI ( ) . then ( function onFulfilled ( datauri ) {...
iconfont到datauri 用于将iconfont网站上的项目字体转为内嵌样式可用的datauri编码 支持语言:中文 (简体)