html 最简单的Gif图动画制作方法 gif转base64

1. 将图片转化为base64编码格式，网站有很多，比如：http://tool.css-js.com/base64.html操作也简单-

   
   

2. 得到这么一串，就是base64编码格式的图片了

3. <script>

var img = new Image();//创建img容器

img.src=‘这儿就是复制填写上面那一大串’；//给img容器引入base64的图片

</scirpt>

3.最后一步：

document.body.appendChild(img)；//将img容器添加到html的节点中就行了

效果如下：

DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。 经过Base64 编码后的文件体积一般比源文件大 30% 左右。

// Base64 在CSS中的使用
.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />