图片转Base64
选择一个图片文件将其转换为Base64编码字符串。切换数据URI前缀以获取可直接使用的CSS/HTML输出。所有处理均在您的浏览器中完成。
关于图片转Base64
此工具完全在您的浏览器中将图片转换为Base64编码字符串。不会向任何服务器上传数据。
- Data URI：启用前缀后，输出可直接用于CSS
background-image或HTML<img src="...">。 - 原始Base64：不使用前缀时，您将获得原始编码字符串。
- 支持JPEG、PNG、GIF、WebP、SVG及其他浏览器支持的图片格式。
把图片以 data URI 内嵌，能省掉一次请求，同时让它的体积增大约三分之一，因为 base64 每三个字节要用四个字符。这笔交换对又小又总要用到的东西划算，对照片就不划算。内嵌的图片还没法单独缓存，所以承载它的那个文件每被下载一次，它就跟着重新下载一次。
标记老是跟你作对？
被转义的实体、坏掉的编码，以及在 CMS 里是一个样、在页面上又是另一个样的内容，通常说明流程中有一环在靠猜。我们做前端，也做它背后的发布链路，让访客看到的就是你写下的。
聊聊你的网站常见问题
什么时候用 data URI 才划算？
用在马上就需要的小图上：一个图标、一个占位块、一封 HTML 邮件里的 logo（外部图片默认被拦）。经验法则是几 KB；超过之后，多出来的体积就盖过省下的那次请求了。
为什么编码之后反而更大？
base64 用四个字符表示三个字节，所以还没算前缀，结果就已经大了三分之一。传输时压缩能找回一部分，但浏览器在文档里拿着的仍是那个更大的形态。
会不会影响缓存？
会，而这正是大家容易漏掉的一点。单独的图片文件缓存一次就能一直复用；内嵌的图片是样式表或页面的一部分，那个文件一变，它就得重新下载。跨很多页面用的东西，普通图片更划算。
哪些格式可以内嵌？
哪种都行，因为 base64 不关心内容是什么。有意思的是 SVG：它本来就是文本，所以做成 data URI 往往比直接把 SVG 写进去还大。
我的图片会被上传吗？
不会。文件由你的浏览器读取并在页面里编码，从头到尾没有离开你的机器。当那张图是某个内部界面的截图时，也就是多数时候，这一点就很要紧。