Data:URL 图片

小灰灰 2020-05-15 18:23 832阅读 0赞

# Data:URL 图片

图片是页面中比不可少的元素，通过图片可以让页面更加美观，也让某些功能更加醒目。

通常，将图片放置于服务器指定位置，然后使用路径引用。

代码片段如下：

```html
<img src="image/img.gif ">
```

通过 `<img>` 标签可以引入一个图片元素，下面对其做进一步的分析：

（1）.src 属性值是图片在服务器的路径，可以是相对路径也可以是绝对路径。

（2）.当页面加载到 `<img>` 标签位置时，向服务器发起一次 http 请求。

（3）.最后得到这个 http 请求的响应，获取此图片。

（4）.发起 http 请求和从服务器加载图片需要消耗一定的性能，尤其是这样的请求较多的时候。

使用 Data:URL 方式引入图片可以有效的避免上述性能问题，简单演示如下：

```html
<img src="data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7">
```

代码分析如下：

（1）.将图片转换为为 base64 字符串格式。

（2）.然后通过 Data:URL 方式将其插入到HTML页面中。

省去了向服务器发起请求的步骤，在一定程度上提高了性能。

特别说明：可以直接将src中的字符串复制到浏览器地址栏查看对应的图片内容。

**浏览器支持：**

（1）.IE8不完全支持，IE9+完全支持。

（2）.edge 浏览器支持此方式。

（3）.谷歌浏览器支持此方式。

（4）.opera 浏览器支持此方式。

（5）.火狐浏览器支持此方式。

（6）.Safari 浏览器支持此方式。

根据其所具有的特点，可以将其应用到更为恰当的场景。

如下几种场景推荐使用 Data:URL 引入图片：

（1）.图片较小，且较多，每次都发起一次 http 请求会非常消耗性能。

（2）.动态方式生成的图片，且每次生成的图片都不相同。

此种方式当前也具有一些缺点，总结如下：

（1）.将图片进行 base64 编码之后，体积会明显增大。

（2）.图片不会被缓存，这是一个很大的问题，缓存机制可以有效的提高效率。

不过也有一些技巧可以解决缓存问题，首先看一段简单代码实例：

```css
background-image: url("image/img.gif")
```

上面代码可以为指定元素引入一张背景图片，背景图片可以很轻松进行缓存，如果换做是Data:URL方式的话，图片无法被缓存，但是可以将CSS文件缓存器来，以达到缓存图片大致相同的效果。

Data:URL方式不仅仅可以表示图片，也可以是其他内容，本文不做过多介绍。

特别说明：HTTP2广泛应用之后，此方式引入图片的优点就没有那么明显，更多内容参阅HTTP协议版块。

发表评论取消回复

表情：

评论列表（有 0 条评论，832人围观）

还没有评论，来说两句吧...

相关阅读

相关【JS】936- File、Blob、dataURL 和 canvas 的应用与转换

![d0c38dc3cce983686a3ba6875cecb60a.png][] 一、概念介绍 1. File (1) 通常情况下， File 对象是来自用户

r囧r小猫/ 2023年01月16日 04:52/ 0 赞/ 138 阅读

相关 File、Blob、dataURL 和 canvas 的应用与转换

![format_png][] 来源 | https://www.cnblogs.com/Faith-Yin/p/14036049.html 一、概念介绍

缺乏、安全感/ 2022年12月28日 12:35/ 0 赞/ 162 阅读

相关【JS】1001- File、Blob、dataURL 和 canvas 的应用与转换

![89103fb988a464ddfc40e0563d6a5a57.png][] > 本文作者：卡布奇诺o > > 本文链接：https://www.cnblogs.co

谁借莪１个温暖的怀抱￠/ 2022年10月10日 11:16/ 0 赞/ 152 阅读

相关 DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL(‘image/png’); var

小灰灰/ 2022年08月21日 00:13/ 0 赞/ 244 阅读

相关 DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png');

蔚落/ 2022年08月18日 11:47/ 0 赞/ 208 阅读

相关图片

![很好][SouthEast] 这是一张图片 [SouthEast]: /images/20220604/c463ad5ad54b42a084b56d55d6edbb

超、凢脫俗/ 2022年06月04日 05:08/ 0 赞/ 172 阅读

相关图片

![这里写图片描述][70] ![这里写图片描述][70 1] ![这里写图片描述][70 2] ![这里写图片描述][70 3] 1 ![这里写图片描述][70

Bertha 。/ 2022年05月21日 12:45/ 0 赞/ 175 阅读

相关图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

「爱情、让人受尽委屈。」/ 2022年04月02日 08:25/ 0 赞/ 166 阅读

相关 DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png');

朱雀/ 2021年12月21日 16:15/ 0 赞/ 386 阅读

相关图片

知识点图片格式 `![]()` 演示内容图片链接： ![markdown](https://gss2.bdstatic.com/-f

我就是我/ 2021年12月14日 01:19/ 0 赞/ 248 阅读