使用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.... - 数据主体

例如：

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

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://img-blog.csdnimg.cn/2022010612261647434.jpg" />

使用Data URL将图片嵌入到网页中相关推荐

Data URL和图片，及Data URI的利弊
Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base6 ...
Data URL和图片（前端细节优化）
Data url 1. 对比传统的图片和data url 首先在html中嵌入图片,我们通常使用<img>标签用在服务器上的相对路径请求图片例如: <img src=" ...
python爬网络图片脚步_关于python：如何从本地计算机或网络资源将图像或图片嵌入jupyter笔记本中？...
我想将图像包括在Jupyter笔记本中. 如果执行以下操作,则可以正常工作: from IPython.display import Image Image("img/picture.png ...
Android 嵌套H5 网页，图片上传无法调用手机图片以及嵌套网页中无法调用另一款APP问题记录
最近项目中用到安卓原生APP 嵌套H5网页,使用安卓原生WebView实现,主要遇到以下两种问题,特此记录: 在H5页面,返回直接回到APP中监听安卓的返回事件就行了 @Override publi ...
Hexo博客中插入图片，在网页中无法显示：采用图床外链的方法
个人博客:小序的时光机,欢迎访问! 最近在用Hexo搭建博客过程中,发现如果在博文中添加本地图片,网页上的图片无法显示.网上的搜到的方法很多都是利用hexo-asset-image插件,然而该插件还是 ...
浏览器打开服务器上的图片无法显示,网页中的图片打不开怎么办？原因与解决办法...
最近有网友问小编这样一个很泛的问题:网页中的图片打不开怎么办?对于这个问题,其实导致的原因有很多,但也很好排除原因,主要从网络,网页,平台等当面综合去分析,就很容易可以找到答案.以下是小编对网页中的图 ...
html抓取网址某链接,URL 筛选小工具提取网页中的链接地址
http://blog.360dseo.com/html/826.html 作者: 不详发布时间:2014-4-23 16:46:19 这个VBS是用来将一个本地网页中的URL筛选出来并保存在新的网 ...
使用pdf.js将PDF嵌入HTML网页中,并禁止下载打印
有的项目需要显示PDF类的文档, 大多需要在项目中禁止将PDF打印, 下载我最初采用embed标签显示 PDF, iframe,object标签都可以显示但是这类标签的打印和下载按钮不可以禁止, ...
Excel中url转图片嵌入到excel操作指南
工具:MicroSoft Office 专业增强版2019 安装插件:Kutools for Excel(插件我已经上传,可在我的下载专区直接下载) 安装成功重启之后Excel工具栏的状态是如图1所 ...

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

使用Data URL将图片嵌入到网页中相关推荐

最新文章

热门文章