图片转换的Base64编码

在线图片转Base64介绍

一、怎么使用此工具?

直接将需要编码的图片拖拽到第一个中间有文字“请拖拽图片到此处”的方框中、或点击按钮“选择图片”,在文件系统中选择您需要编码的图片,即可生成相对应的Base64编码文本到下方的文本框中。

  • 追加img代码:生成出:<img src="data:image/jpg;base64,/8j/KKDAJ4..." /> 标签

二、为什么图片转Base64?

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

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