Base64图片的使用方法

写在前面

项目中，首页的背景图（600KB), 半天请求不到数据。

get不到

无奈之下，开始压缩图片。

PicDiet压缩中文版​

嗯...压缩完成后，200KB左右，找到运维更新了代码，翘首以待。竟然还请求不到背景图！

错误界面

好的呢，还有办法，不去请求资源，咱使用base64。

base64图片的获取

有很多在线转换工具，google一下会有很多。

站长工具

base64的使用方法

---

<!-- 在css代码中背景图片的写法。-->
.header {
    background-image: url(data:image/png;base64,iVBORw0...);
}

css中的base64写法

<!-- 在html代码img标签中base64的写法。-->
<img src="data:image/gif;base64,base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQE.....>

base64图片的优缺点

优点

• 无额外请求
• 可像单独图片一样使用，比如背景图片重复使用等
• 没有跨域问题，无需考虑缓存、文件头或者cookies问题

缺陷

• css体积会极具变大，页面解析 CSS 生成的 CSSOM 时间增加
  本来不到40KB的css文件，变成了200KB，请求时间页变长了。

  
  后来的css