图片转 Base64
把图片转成可以直接贴进 HTML / CSS / Markdown 的 Base64 文本,五种输出格式任选;转换全部在这台设备上完成,图片不上传。
把图片转成可以直接贴进 HTML / CSS / Markdown 的 Base64 文本,五种输出格式任选;转换全部在这台设备上完成,图片不上传。
How to use: 1) Drop in images, or click to choose (batch supported). 2) Pick an output format: Data URI, raw Base64, CSS, img tag or Markdown. 3) Copy each result, or use Download all to get a ZIP.
Base64 会让文件变大吗?
会。文本长度约为原文件的 1.33 倍,超过 2 MB 的图贴进 HTML 会让页面明显变大。
转出来的字符串安全吗?
字符串里明文包含整张图片,发到公开的地方等同于公开原图。
Does Base64 make files bigger?
Yes — the text is about 1.33× the original size, and embedding an image over 2 MB makes a page noticeably heavier.
Is the output safe to share?
The string contains the whole image in plain form; posting it publicly is the same as publishing the original.
全程在浏览器本地处理,文件不上传;如需不限次数使用,VIP 会员 可解锁全部 29 个工具。
图标、分隔线、加载动画这类几百字节到几 KB 的东西,外链反而更慢:浏览器要先解析 HTML、发现地址,再走 DNS、连接与握手,最后取回一张几百字节的图,图片只占一小段,其余都是固定开销。转成 Data URI 后,字符跟着 HTML 一起到达,渲染时不用再等网络。
单文件分发也适合:离线 HTML 报告、发给别人的 demo、访问不到外部 CDN 的内网页面,内联后不会出现「少拷一个文件夹,图全裂」。
反过来,文章配图、商品图、缩略图、头像和 logo 都不该内联:它们会在多个页面重复,需要单独缓存,也需要独立地址被图片搜索抓取。一句话判断:这张图会不会在别处再用一次?会,就外链。
内联只在首次访问省下一次请求和往返延迟,代价是图成了 HTML 或 CSS 的一部分,浏览器不会单独缓存,页面每次重下,这段文本就跟着重传;外链图有独立缓存和 304 检查,回访几乎零成本。HTTP/2 和 HTTP/3 下多张图本来就能复用一个连接,省请求的价值比 HTTP/1.1 时代小很多,只有高延迟网络还明显。
和雪碧图比,两者都在省请求。图标少于五六个时内联省事,不用维护坐标;再多就该用雪碧图或字体图标,换图不用动整段文本。SVG 图标其实不需要 Base64:SVG 本身就是文本,直接内联能继承 currentColor 并用 CSS 改色,转成 Base64 反而丢掉长处,只在必须塞进 CSS 的 background-image 时才值得。
和其他在线转换服务比,区别在文件去了哪里:那些站把图片传到服务器编码,原图落到对方机器,页面还塞广告;这个工具用浏览器读文件(FileReader),图片不离开这台设备,断网也能用,带隐私内容的图可以直接拖进来。弱的地方也说清楚:它只做编码,不压缩不缩放,转出来多大完全取决于原图;超过 2 MB 只提醒不拦;也不替你判断该内联还是外链。
1.33 倍是怎么算出来的?
Base64 每 3 个字节(24 位)切成 4 个 6 位小组,每组对应 64 个可打印字符之一,3 字节就变成 4 个字符,比例是 4 除以 3,约 1.33。原文件长度不足 3 的倍数时末尾补一两个等号,所以结尾常看到 = 或 ==,它只是填充。
大图内联为什么会拖慢首屏?
HTML 和 CSS 阻塞渲染,浏览器要解析完才开始画。一张 500 KB 的图变成约 670 KB 文本塞进 HTML,首屏就要多等这段时间;而且这段文本必须整段下载完才能解码,不像外链图可以边下边显示。服务器开 gzip 能补回一部分,但压完仍不会小于原始二进制。
贴进 Markdown 或 CSS 不显示,常见原因有哪些?
img 的 src 用双引号包住最稳,字符集里没有引号;CSS 的 url(...) 必须加引号,因为字符串里会出现加号、斜杠和等号;Markdown 用圆括号包地址,alt 里的方括号和圆括号要转义,整条语法必须在同一行。另外不少 Markdown 渲染器和 CMS 会过滤 data: 地址,贴上去是裂图。
哪些情况绝对不该用内联?
大图(超过 10 KB 就该掂量,手机照片免谈);一页里放很多张;需要跨页面复用的 logo、头像、封面;依赖独立地址被图片搜索抓取的图,内联后没有自己的地址;还有要让人右键另存或放进邮件的图,多数邮件客户端会屏蔽。