不同的图片加载方式

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

常见的图片加载方式

通常而言，最多见的图片加载方式是 HTTP URI Scheme 简称 HTTP URI。例如：某图片存储在又拍云存储上，连接为 https://f.lxpzyy.top/upyun/up...。咱们能够经过引入图片 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>[;<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 的长度。

那么回到咱们最初的问题 Data URI 比 HTTP URI 的优点是什么呢？

相比 HTTP URI，Data URI 拥有如下优点：

• 使用 Data URI 可以有效减小 HTTP 请求数
• 不依赖于网络环境，即没有网络的时候页面中的资源也能够被加载出来
• 能够免除一些极小文件对 HTTP 请求的占用

固然 Data URI 也有很多缺点。通过 Base64 编码后的文件或者数据，一般来讲比起原文件体积增大了30%左右，而后 Data URI 一般会写在 css 文件中，不易维护，另外手机端加载 Data URI 资源也比较消耗 CPU 资源。

相比之下，Data URI 仍是很值得使用的，如今就有不少场景都使用 Data URI 的方式引入资源，好比百度首页的小图标以及谷歌的首页等。

若是想让网站拥有不一样的加载方式，特别是避免因网络情况差致使的没法加载问题，那必定要试试 Data URI。

在考虑使用 Data URI 的过程当中，咱们能够从如下几点着重考虑:

• 图片的实际尺寸比较小
• 不常常更新的资源图片
• 须要在页面中常用的图片

推荐阅读

深刻浅出聊聊 Rust WebAssembly（一）

go-zero：开箱即用的微服务框架