JPG转Base64 - 免费、即时、浏览器内完成

JPG 文件是照片，而照片很大。仅这一点就改变了与编码图标时的算式：一张 200 KB 的照片会变成约 267 KB 的文本，浏览器必须完整下载、保存在内存里并解码，然后才能显示任何东西。对大多数网站来说这是笔亏本买卖。不过，有三种情形下它恰恰是正确的选择。

如何将 JPG 转换为 Base64

1. 1 把 .jpg 或 .jpeg 文件拖到上传区域。
2. 2 看一眼工具显示的体积那一行——正是这个数字决定内联是否合理。
3. 3 复制用于 HTML 和 CSS 的 data URI；若要放进 JSON，则复制原始字符串。

对普通网页来说，这通常是个错误

普通的图片标签让浏览器可以并行获取照片、缓存数月、在首屏之外时干脆不加载，并在手机上换用更小的版本。内联一次性把这四点全部丢掉。照片如今被塞进 HTML 或 CSS 里，阻塞首次绘制，无法单独缓存，即使访客从不滚动到它也照样下载，而且在 4K 显示器和廉价手机上完全一样。照片越大，上述每一项的代价就越高。

三种确实合适的情形

首先是邮件模板：很多客户端默认屏蔽外部图片，因此内联的照片才是唯一能可靠显示的。其次是极小的占位图——一张刻意模糊、只有几百字节的图片，内联进去，好让真正的照片加载时屏幕上有东西可看。第三是把图片送过只接受文本的系统：JSON 接口、webhook 载荷、数据库字段、消息队列。这三种情况下，替代方案都不是"更快的图片"，而是"根本没有图片"。

编码之前先把照片缩小

Base64 对你喂给它什么毫无意见——它会把 3 MB 的度假照和一张缩略图一样忠实地放大。所以请按正确顺序做事：裁剪到你真正会显示的尺寸，把 JPG 质量降到看不出差别为止，然后再编码。一张只会以 400 像素宽显示的照片，没有理由按 4000 像素来编码。如果结果仍然是几百 KB，那就是工具在告诉你：请改成链接到文件。