Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。

1. Data URL基本原理

Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：

几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。

IE6/7是不支持Data URL技术。

2. 为什么Data URL是个好东西

Data URL能用在很多场合，跟传统的外部资源引用方式相比，它有如下独到的用处：

当访问外部资源很麻烦或受限时

当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。

当图片的体积太小，占用一个HTTP会话不是很值得时。

Data URL也有一些不适用的场合

Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。

Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

然而，Data URL这些不利的地方完全可以避免或转化。本文的重点就是要讨论这个问题。

3. 在CSS里使用Data URL

当第一次看到Data URL的作用和用法时，你也许会很不疑惑，“为什么要麻烦的将图片转换成base64编码字符串，还要嵌入的网页中，将HTML代码弄的混乱不堪，甚至还会有性能上的问题。”

诚然，无法否认缓存在浏览器性能中的重要作用——如何能将Data URL数据也放入浏览器缓存中呢？答案是：通过CSS样式文件。CSS中的url操作符是用来指定网页元素的背景图片的，而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以，我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。

假设我们的页面里有一个很小的div元素，我们想用一种灰色的斜纹图案做它的背景，这种背景在当今的网站设计者中非常流行。传统的方法是制作一个3×3像素的图片，保存成GIF或PNG格式，然后在CSS的background-image属性中引用它的地址。而Data URL则是一种更高效的替代方法，就像下面这样。

.striped_box {

width: 100px;

height: 100px;

background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");

border: 1px solid gray;

padding: 10px;

}

4.Data URL 问题

说到Data URI的优点，自然少不了“减少链接数”，把图片转为Base64编码，以减少图片的链接数。我们先想当然一下，同样一张图片，如果不用发起一个下载请求，打开速度是会更快的。但是，有几个问题需要关注下：

图片始终是要下载的，那么下载一张图片的速度快还是下载一堆编码快？

浏览器对图片的显示，处理效率哪个更快？

图片的缓存问题

5.DataURL在Web浏览器中的兼容性总结

IE8+，Firefox，Chrome，Opera，Safari 等现代浏览器普遍支持data URL

IE8 data URL 最大长度限制为32k字节，超出无效。IE9+没有这个限制

IE只识别base64编码或百分号编码(URL编码, encodeURIComponent)的data URL，IE不识别无编码的data URL，非IE浏览器可识别无编码的data URL

IE不支持对,标签的src设置data URL

IE官方说法说data URL仅支持以下5种使用场景：

object (images only)

img

input type=image

link

CSS declarations that accept a URL

据本人实测，IE也在除了官方所述5种之外的其它场合支持data URL：

a href

meta refresh. 示例：

script src

window.open

embed src

对于audio, video一类的元素，往往资源文件较大，使用data URL并不常见，我也没有对其进行测试。

Firefox中粘贴截图是直接转换为data URL的图片，其它浏览器干脆无法粘贴，我记得以前Chrome好像可以粘贴截图的，今天再测Chrome,Opera都不能粘贴截图(

可为data URL指定字符集编码。示例：data:text/plain;charset=US-ASCII,xxxx....

附录：

DataURL语法规则：

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value

Data URL简介及Data URL的利弊

之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...

Data URL

Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...

使用Visual Studio 2010写Data Url生成工具C#版本

声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编 ...

HTML5——Data Url生成

HTML5——Data Url生成

PHP & “Data” URL scheme(转)

基本上所有的对文件操作的API, 都迁移到的了PHP stream上, 所以, 绝大部分对文件操作的API都是支持Data URL的. 当某个API需要操作对象是文件的时候, 我们其实是可以采用Dat ...

【Data URL】【RE】【bugku】逆向入门writeup

在写wp之前先来了解一下Data URL是什么 Data URL 在浏览器向服务端发送请求来引用资源时,一般浏览器都有同一时间并发请求数不超过4个的限制.所以如果一个网页需要引用大量的服务端资源,就会 ...

使用Data URL将图片嵌入到网页中

早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...

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

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

Data Url生成工具之HTML5 FileReader实现

百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader ...

随机推荐

android 基础控件(EditView、SeekBar等)的属性及使用方法

android提供了大量的UI控件,本文将介绍TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...

[转]细说MySQL Explain和Optimizer Trace简介

在开发过程中,对每个上线的SQL查询指纹(query figerprint)的质量都应有估算:而估算DB查询质量最直接的方法,就是分析其查询执行计划( Query Execution Plan ,即Q ...

做个伪IE浏览器？！【来自官网】

原文:docwiki.embarcadero.com/RADStudio/Seattle/en/Building_a_VCL_Forms_Web_Browser_Application 选择File ...

NOSQL之【redis的主从复制】

一.Redis的Replication: 下面的列表清楚的解释了Redis Replication的特点和优势.    1). 同一个Master可以同步多个Slaves.    2). Slave同 ...

利用文件实现Free Pascal中的简单排序功能

此程序主要是验证文件功能的读写功能,总结到的东西有:①文件无论是读还是写,都要先建立链接关系才可以进行;②读与写不能同时进行,必须分开操作,这也可以理解,在实际鼠标操作时也是如此的!③读写后必须用cl ...

用python语言编写网络爬虫

本文主要用到python3自带的urllib模块编写轻量级的简单爬虫.至于怎么定位一个网页中具体元素的url可自行百度火狐浏览器的firebug插件或者谷歌浏览器的自带方法. 1.访问一个网址 re= ...

bash脚本条件测试总结

一.if语句的结构 分为以下三种:单分支.双分支.多分支 单分支if语句 if CONDITION is True: then 分支 fi 双分支if语句 if CONDITION is True: ...

2-SAT 问题与解法小结

2-SAT 问题与解法小结 这个算法十分的奇妙qwq... 将一类判定问题转换为图论问题,然后就很容易解决了. 本文有一些地方摘录了一下赵爽<2-SAT解法浅析> (侵删) 一些概念: \ ...

ls-dyna基础教程

刚刚开始使用ls-dyna,几天前还只知道点开dyna界面,然后就没有然后了,没人带,资料也没多少,但是科研还得继续往下做呀(手动滑稽),通过在仿真论坛上搜索相关的资料,并通过自己的一步步操作,做了大 ...