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

早些时候，使用IE6浏览器，网页可以另存为mht，如果网页包含图片，那么图片也会存储到mht中。

mht是微软提供的一种聚合HTML文档，它的本质其实是一个文本文件，那么我们也许会好奇，它的图片存储到那里了。

使用文本编辑器打开一个包含图片的mht文档。

这时候我们可以看到，mht的图片是使用Base64格式存储的。

于是我们可以按照mht的方式将图片存储到html中。

格式如下：

<!-- ------=_NextPart_000_0000_01CA9F59.AFB45FE0 
Content-Type: image/jpg Content-Transfer-Encoding: base64 Content-Location: yl.jpg
/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsK 
CwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQU 
YRMoCkRDGOOwoorxcphGNSpyqx241uUINkyICDyep6E+tFFFfSnjH//Z --> 
<img src='mhtml:img!yl.jpg'/>

这种将按照mht格式将图片嵌入html的方式是IE特有的，其他浏览器并不支持。

 

所幸的是，我们在新的浏览器上可以用data URI的技术也可以做到同样效果。

 

什么是data url

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

Data url 格scheme 并不完全是一种新技术，在很早之前(1998年)就已经就提出了，Firfox、Opera等浏览器都早已经支持，只是IE 一直没有支持。 (直到IE8+开始支持)

Data URI允许我们使用内联（inline-code）的方式在网页中包含数据，可以在Html、CSS、Javascript等中使用。

我们可以通过Data URI scheme，将数据经过Base64编码的数据嵌入网页中，从而减少请求资源的链接数。例如向网页嵌入一个图片。

data URI的格式很简单，基本的格式如下：

data:[ mediatype ] [;base64],data

数据的协议名称 charset数据类型(例如image/png) base64 - 数据编码方式 DATA.... - 数据主体

 

例如：

<img src="https://img-blog.csdnimg.cn/2022010612261670974.png" />

(注：数据部分只是个例子)

 

Data URL适用的场景

1. Data URL可以减少HTTP请求数，当图片较小，没必要占用一个HTTP会话时，使用Data URL可以提高网页性能。

2. 如果页面图片需要根据用户动态显示(例如注册码)，那么可以直接将图片嵌入页面。

3. 某些限制问题，不能链接图片的场景。

 

Data URL不适用的场景

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

2. 旧版本的IE并不支持Data URL，如果需要兼容，则需要同时使用mht方式。(这意味的文件体积x2)

3. Data URL形式的图片不会被浏览器缓存，每次访问这样页面时都被下载一次。（这个情况可以将data放到css中）

 

 

在CSS中使用 Data URL

Data URL并不一定非要在HTML页面中，它可以放到CSS里面

img {     src: url('data:font/woff;charset=utf-8;base64,xxxxxxx略...'); } }

放到CSS里面的优点是，CSS可以被浏览器缓存，这样不需要每次都下载。

Data URL不仅仅支持图片

大部情况Data URI作为在HTML或者CSS文件里嵌入图片的方法，但其实 Data URI并不仅仅只支持图片，它也可以支持其他类型的文件。(注：不包括IE系列，IE8的data URI 的确只支持图片)

例如：

 

Data URL 支持类型列表

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图片数据

 

浏览器支持情况
Firefox 2+
Opera 7.2+ - data URI必须少于4100个字符
Chrome (all versions)
Safari (all versions)
IE8+

 

最后，让我们用Data URL绘制一个hello world

 

<img src="https://i-blog.csdnimg.cn/blog_migrate/2d078f5a2563eaf1d84402afe62fcf53.jpeg" />