来试下不一样的图片加载方式

资讯作者：又拍云 2021-07-21 22:01:16 阅读：632

在浏览网页的过程中，图片最容易吸引用户的注意力，它即能给用户直观感受，又能清晰地表达意图，所以在制作网页时，如何快速有效地加载图片资源显得尤为重要。

常见的图片加载方式

一般而言，最常见的图片加载方式是 HTTP URI Scheme 简称 HTTP URI。例如：某图片存储在又拍云存储上，链接为 https://f.lxpzyy.top/upyun/upcdn.svg。我们可以通过引入图片 HTTP 链接的方式，如：<img src=”https://f.lxpzyy.top/upyun/upcdn.svg”/> 来加载图片。

除此之外，我们可以通过 Data URI Scheme 的方式来引入图片。

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

Data URI Scheme 的方式和 HTTP URI 的使用较为类似，只是看起来多了很多“乱码”。那这些乱码有什么作用呢？和 HTTP URI 相比，它有什么优势让我们选择它呢？

初识 Data URI

Data URI scheme 简称 Data URI ，是在 RFC2397 中进行定义的。目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。以上方的 Data URI 链接为例：

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

我们可以看到它由 data，image/svg+xml，base64 以及后面的字符串组成。

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

这几部分分别为：

data：表示取得数据的协定名称，表明这是一个 Data URI。
mime type：数据类型名称，也是就是 image/svg+xml，如果传入的是个 png 图片，那么可以指定类型为 image/png。
charset=<charset>：可不填，默认是 charset=US-ASCII 编码。
base64：是数据的编码方法。
encoded data：经过 base64 编码后的数据。

我们可以看到，除去可不填的 charset=<charset>，使用 Data URI 必然会用到 base64 编码，那这个要如何获得呢？

如何获得 base64 编码

最简单的方式是直接上网找一个编码小工具。

现在网上有很多的 base64 编码小工具，他们可以直接将文件或者字符进行 base64 解编码。

除此之外以下代码语言也都有其对应的 base64 编码方式，可以很方便地进行编码解码转换：

JAVA

String test="Upyun";BASE64Encoder base64Encoder=new BASE64Encoder();String encode = base64Encoder.encode(test.getBytes("UTF-8"));System.out.println(encode);

PHP

$str = 'Upyun';$encode = base64_encode($str);echo $encode.'<br>';

JavaScript

var data=windows.btoa('Upyun');

Data URI 的使用方式及优势

了解了 Data URI 的大致情况，我们来看看它要如何使用。

它主要有两种使用方式，第一种是将处理好的 Data URI 格式数据，放入 HTML 页面代码 img 标签的 src 属性中。这种方式的好处是减少了 HTTP 请求，缺点是无法进行缓存。另一种方式则是将 Data URI 放入到 css 里，优点是浏览器会积极缓存 css 文件来提升加载页面时的速度，缺点是增加了 css 的长度。