1、淘宝src写法

今天偶然看到淘宝页面，发现img有一种奇怪的写法，如下

1
<img class="J_MemberAvatar member-avatar" src="data:image/png;base64,iVBORwi+vr7+">

2、常用src写法

图片在网页中的使用方法通常是下面这种利用img标记的形式：

1
<img src="images/myimage.gif ">

这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个 网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。

3、原理

淘宝，使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体。
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。
比较常见的是迅雷下载链接

1
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

4、优点

减少了HTTP请求

某些文件可以避免跨域的问题
没有图片更新要重新上传，还要清理缓存的问题

5、缺点

浏览器支持

这种技术IE6/IE7浏览器是不支持的，IE9浏览器IE7模式下支持。

增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。

6、使用价值

在base64编码作为background-image背景图片利要远大于弊的。例如在web页面制作的时候，我们可以会用到下面这一类图片：

  • 这类图片不能与其他图片以CSS Sprite的形式存在，只能独行
  • 这类图片从诞生之日起，基本上很少被更新
  • 这类图片的实际尺寸很小
  • 这类图片在网站中大规模使用

而且所有浏览器都会积极的缓存CSS文件，通过CSS样式文件，能将Data URL数据也放入浏览器缓存中