GIF 转 Base64

如何把 GIF 转为 Base64

1. 把 .gif 文件拖到框中，或用文件选择器选择。
2. 如果 GIF 是动图，请不要改动 最大宽度、转换为 和 移除元数据（EXIF） 选项。
3. 选择 输出为：Data URI、CSS background-image、HTML <img>、Markdown 或纯 Base64。
4. 按 复制输出。指示条会显示文本比文件大了多少。

预览会播放动画，复制之前可以确认文件是否正确。

动画与重新编码选项

输出上方的选项会在 canvas 上重绘图片。canvas 只能容纳一张静态图片，浏览器也无法从中生成 GIF 文件，所以重新编码后的 GIF 会变成 仅包含第一帧 的 PNG（如果你选了 JPEG 或 WebP，则是相应格式）。想要动画的静态缩略图时，这很有用；要保留动画，就不要动这些选项。

如果 GIF 动图太大，需要在使用本工具之前解决：在 GIF 编辑器中减少帧数、缩小尺寸或减少调色板颜色，或者换成一段短的循环 MP4 或 WebM，它通常比同一片段的 GIF 小得多。

GIF 的 Base64 长什么样

下面这个 1×1 透明 GIF 有 42 字节，对应 56 个 Base64 字符：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

它过去用来填充表格布局，如今仍会作为懒加载图片的占位 src 出现，因为一张有效的图片可以避免显示破图图标，也省去一次额外请求。

GIF 动图的 Base64 大小

以现代标准衡量，GIF 的压缩效率很低，而且动图要存储每一帧。一个两秒的表情 GIF 很容易就有几 MB，转成 Base64 文本后有好几 MB。只内联小的 GIF，例如加载动画或小图标。更大的文件用普通文件更好：它可以被缓存、懒加载，而 data URI 在每个包含它的页面中都要重新下载。

电子邮件不适合使用 Base64 GIF。Gmail 和其他网页邮箱不显示 data URI 图片，所以新闻邮件中的 GIF 动图都是以托管文件的形式链接的。参见 电子邮件中的 Base64。

在 Node.js 中编码 GIF

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Node.js 中的 Base64 介绍了流和 URL 安全输出。要把 Base64 字符串还原成可播放的文件，请使用 Base64 转 GIF。

常见问题