data uri

Data URI 科普

笔者对本文的定位是实践操作型,所以一些理论基础只点到为止。首先 Data URI 是什么? 引用 Wikipedia 上对其的解释:

Data URI 是一种提供让外置资源的直接内嵌在页面中的方案。这种技术允许我们只需单次 HTTP 请求即可获取所有需要引用的图片与样式资源,
并因无需多次请求资源而变的高效。

在 RFC2397(http://tools.ietf.org/html/rfc2397)中定义了它格式规范:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Data URI 初探

看格式规范貌似不是很友好,我们以内嵌图片为例:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

data:image/png;base64, 是固定的格式, image/png 是图片的MIME类型,base64是数据编码方式。这里还有必要指出下Base64 编码后的数据会比原始数据大 4/3 左右,这与Base64 编码算法有关。 如需使用在电子邮件中,根据 RFC 822 规定,每 76 个字符,还需要加上一个回车换行,此时编码后数据长度大约为原长的135.1%。

为验证理论的我们做如下的测试,分别对不同尺寸的图片进行Base64编码,与我们的预期一致,比原始数据增长了 1/3 :

图片尺寸 | 原始大小 | Base64大小 | 增长率 |
:-----------|:------------|:-------------|:-------------|
16*16 | 618 | 824 | 34.2%
24*24 | 1,063 | 1,420 | 33.6%
32*32 | 1,615 | 2,156 | 33.5%
42*42 | 2,510 | 3,348 | 33.4%
48*48 | 2,892 | 3,856 | 33.3%
96*96 | 8,217 | 10,956 | 33.3%
350*350 | 49,899 | 66,532 | 33.3%

图片是使用 Data URI 最常用的情景,但 Data URI 是与资源类型无关的规范,您也可以使用 Data URI 内嵌其他资源:

var cvs = ‘data:text/csv;charset=utf-8,‘ + encodeURIComponent(csv);
var html = ‘data:text/html;charset=utf-8,‘ + encodeURIComponent(html);

Data URI 兼容性

在前端,浏览器兼容性几乎每个技术都逃不过的话题,检阅 Data URI 的兼容性:

  • Firefox 2+
  • Opera 7.2+
  • Chrome++
  • Safari++
  • Internet Explorer 8+

大部分主流浏览器都早已支持 Data URI,IE8 虽支持但其最大长度不能超过32K的数据,在 IE9 下已解除此限制,IE 详细的文档可细读微软官方文档。 剩下的依旧是面对在国内还是 A 类浏览量的 IE 6/7, 我们可以采用与 Data URI 类似的 MHTML(笔者认为其设计上比 Data URI 是更优秀的,考虑到了内嵌数据的重用). MHTML 详细的介绍不在本文的讨论范围,但需要指出的是微软在 2011 年发布了 MHTML 中的漏洞可能允许信息泄露 的补丁, 将造成 MHTML 无法被引用的问题,所以在 IE 中使用 MHTML 的方案会有极大的风险,权且当扩展知识面不推荐采用。

  • http://technet.microsoft.com/zh-CN/security/advisory/2501696
  • http://www.microsoft.com/china/security/bulletins/ms03-014.mspx

Data URI 最佳实践

在 Data URI 转换之前我们不进行图片合并,而是直接使用小图片,如此省去了合图定位的麻烦,

background-image:url("data:image/png;base64,iVBORw0KGgoAAA...ElFTkSuQmCC");
*background-image:url(http://cdn.example.com/foo.gif);

比较数据:

图片尺寸 | 原始大小 | Base64大小 | Gzip大小 |  Gzip压缩率 | 增长率 |
:-----------|:------------|:-------------|:-------------|:-------------|:-------------|
16*16 | 618 | 824 | 668 | 81.1% | 108.8%
24*24 | 1,063 | 1,420 | 1,119 | 78.8% | 5.3%
32*32 | 1,615 | 2,156 | 1,670 | 77.5% | 3.9%
42*42 | 2,510 | 3,348 | 2,568 | 76.7% | 2.3%
48*48 | 2,892 | 3,856 |  2940 | 76.2% | 1.7%
96*96 | 8,217 | 10,956 | 8304 | 75.8% | 1.1%
350*350 | 49,899 | 66,532 | 50,095 | 75.3% | 0.4%

DIY 生成工具

Node 是名副其实的前端开发得力助手,只用3行代码就能让一张图片转换成Base64编码:

var body = fs.readFileSync(‘./foo.png‘, ‘binary‘);  // 输入
var image = new Buffer(body, ‘binary‘).toString(‘base64‘); // base64编码
var base64 = ‘data:image/png;base64,‘ + image;  // 输出

Datauri 格式数据需要更多CPU计算来呈现图片,也许在性能稍弱的PC上,额外请求图片的方案可能更早的渲染出图片,尤其在移动端有限CPU的情景下,一定要慎用。

这里折中方案是限定转换的条件,只有小于 2K 的小图才被转换成Base64编码, 2K 是比较推荐的阀值

时间: 2024-10-29 19:09:03

data uri的相关文章

Data URI(转)

Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在 HTML 语言之中.从 RFC 文档定稿的时间来看(1998年),它是一个很受欢迎的发明. Data URIs 定义的内容可以作为小文件被插入到其他文档之中.URI 是 uniform resource identifier 的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容

JS魔法堂:Data URI Scheme介绍

一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先不管到底有用与否,仅仅记录理论知识.也希望大家一起来分享实战经验啊! 二.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://

Data URI scheme - 数据的uri模式

----------------------------------------------------------------------------------------------- Data URI scheme is a URI scheme(统一资源定位符的模式). 我们熟知的站点引用资源文件,都是类似http://www.chenwei.ws/demo.png这种的格式,但是data URI scheme 提供将外部资源嵌入到网页中的方法. 它是一种文件或文档的形式,这项技术允许

浅谈 Data URI 与 BASE 64 编码

前言(废话):鼓捣 Stylish 的时候发现了这么个奇怪的代码行: Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAIALAAAAAAQABAAAAIkFI6Zpu0YYnxnAvtC0hTzzH3UJY6kSUqdiCltu7GjBKMKgwoFADs= 由于自己有点 HTML/CSS 基础,看得出来这是在引用图片,可是后面这么长一串乱码难道就是图片地址吗?经过漫长的查询(突破点是 BASE64,我记得这是种加密

Data URI Scheme,base64

一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://github.com就是HTTP URI Scheme,那么什么是DATA URI Scheme呢?其实就是形如data:text/jpeg;base64,XINGSXXIANGJIJIGSAG==的资源链接,一般出现在img元素的src属性. DATA URI Sch

data URI scheme及其应用

data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会减少一次HTTP的请求,实现了对于网页的优化(不过看了其他一些文章data URI因为将图片采用了base 64的编码方式进行表达,所以还是需要进行HTTP去下载内容,而且这样的渲染方式同时也加大了内存,cpu等等的压力,因此选择的时候需要进行性能方面的权衡). 比如一张图片用http请求方式进行请求并且显示的方法: <img src="http://sjolzy.cn/i

使用data:uri上传图片

上传图片的方式有两种,一种是使用传统的html控件的方式,设置form属性为multipart/form-data.这种方式兼容ie6,ie7.另一种方式是使用data:uri,将base64编码从浏览器端post到服务器端,然后利用Base64解码即可.这种方式只是用与比较modern的浏览器,比如ie9,chrome,firefox,safari.本文主要讲讲我们如何利用data:uri的方式上传图片的. Data URI 格式  data URI的格式非常简单,具体可以看RFC2397,d

【转】Data URL和图片,及Data URI的利弊

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type.本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率. 观看演示 1. Data URL基本原理 图片在网页中的使用方法通常是下面这种利用img标记的形式: Html代码   <img src="images/myimage.gif

php://input,php://filter,data URI schema的那些事

一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件被植入一句话木马) @eval(file_get_contents('php://input')) 我是个十足的php菜鸟,只有用到的时候才会去查查语法书,对php://input也只是有点印象而已,于是用脚本phpinput.php,配合firefox Hackbar插件测试了一下php://in