base64加密图片

2014年10月16日

使用场景

###img

<body>  
	<span><img width=100 height=100 src="data:image/gif;base64,（此处填图片转成base64编码后的编码）"/>
	</span>  
</body>

###background（用的比较多） background-image:url(data:image/gif;base64,(此处填图片转成base64编码后的编码));

###font @font-face{ font-family: forTest; src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 … RFERuENEGADl7JlY=) format(‘woff’); }

优缺点

优点

  1. 减少了HTTP请求
  2. 某些文件可以避免跨域的问题
  3. 没有图片更新要重新上传，还要清理缓存的问题

缺点

  1. 使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
  2. 增加了CSS文件的尺寸 编码成本 图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。

长相

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== (迅雷下载链接地址这样哒) 一堆连续字母，最后有1~2个”=”的代码就是base64。

应用

在web页面制作的时候，由于某些现实原因，我们可以会用到下面这一类图片：

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

最好是一些小尺寸图片，base64后增加的文件大小不大。

##参考链接 感谢作者访问