# GIF 制作 — 把图片做成动图

把一组图片变成一段动画。

> 把 JPG、PNG、WebP 或 AVIF 图片做成 GIF 动图，免费，全程在浏览器里完成。顺序、快慢和尺寸都由你定。什么都不上传，断网也能用。

这是一个浏览器交互工具，地址是 https://abox.tools/zh/gif-maker/。文件在运行该浏览器的设备上处理。主动分享和可选联网功能都在页面上说明。下文是它的文字说明；使用工具请打开该地址。

## 你的图片**在浏览器里处理**，无须上传处理。

每一帧都由你自己的浏览器绘制、量化和压缩，做好的 GIF 也是在这台机器的内存里拼起来的。就算这里有什么东西想把图片送走，页面的另一端也根本没有服务器可以接。

- ✗ 不上传
- ✗ 不注册
- ✓ 断网可用
- ✓ 开源
- ✓ 文件不出这台机器

## 用图片做 GIF 的步骤

1. **选好你的图片。** 把一个文件夹拖到选择框里，或者自己挑文件。浏览器直接从磁盘上读，这期间没有任何东西发往别处。
2. **按播放顺序排好。** 抓住把手拖动，或者用箭头。“按名称排序”是按你以为的方式数数的，所以 `frame_2` 会排在 `frame_10` 前面。
3. **定下每一帧停多久。** 每张半秒是幻灯片，二十分之一秒就是动画了。可以一次给所有帧同一个时长，也可以单独让某一张多停一会儿。
4. **选尺寸，并决定颜色怎么挑。** GIF 的体积随面积和帧数一起涨，而且没有画质滑杆能把它拉回来，所以尺寸才是最要紧的那个设置。每帧 256 色最好看，也是默认值；共用一套调色板则更小、更稳。
5. **做出 GIF，然后下载。** 它是在你自己的硬件上拼出来的，所以花多久取决于你的机器，而不是排队。做好的动画会先在页面上放一遍，然后你再保存。

## 说得更细的版本

[怎么用图片做一个动图 GIF](https://abox.tools/zh/guides/make-a-gif-from-images/): 把一组图片变成一个动图 GIF：GIF 到底能放多快、调色板那个选项改的是什么，以及真正能让文件变小的三件事。

## 工具箱里还有

- [GIF 拆帧](https://abox.tools/zh/split-gif/): 每一帧都单独存成一张 PNG。
- [GIF 分析](https://abox.tools/zh/gif-analyzer/): 帧、延时、调色板，以及每个字节的去向。
- [视频压缩](https://abox.tools/zh/compress-video/): 说一个它最多能有多大。剩下的工具来算，做完先量一遍再交给你。
- [MP4 转换](https://abox.tools/zh/convert-to-mp4/): 不管从录屏、压制还是相机里出来的是什么，都变成 MP4 里的 H.264 和 AAC。能复制的原样复制，非改不可的才重新编码。

## 常见问题

### 我的图片会被传到哪里去吗？

不会。你的图片由你自己的浏览器在你自己的硬件上读取、绘制、量化和压缩。这个工具没有服务端，页面的 `Content-Security-Policy` 里写着它允许联系的每一个地址，没有一个属于本站。拔掉网线，它照样做 GIF。

### 能用哪些图片格式？

凡是你浏览器能解码的静态图片格式都行，实际上就是 JPG、PNG、WebP、GIF、AVIF，在苹果设备上还有 HEIC。这里没有另外一份需要维护的清单，因为解码是浏览器的活，不是我们的。

### 我的 GIF 为什么这么大？

因为 GIF 把每一帧都当作完整像素来存。没有运动补偿，没有“和上一帧一样、只是挪了个位置”这种存法，也没有画质旋钮：体积大约就是面积乘帧数，能把它压下来的只有三件事。 \
\
做小一点：尺寸减半，文件就只剩四分之一。少用几帧，或者让每一帧停久一点。降到 64 色或 32 色，并关掉抖动——对平涂画面来说这代价比听上去小，对照片来说则很大。要是还塞不下，老实说，你在做的其实是视频，同样的内容做成 MP4，大概只有十分之一大。

### GIF 最快能放多快？

没有那个数字看上去那么快。这个格式把每帧的停留时间按百分之一秒来存，而从九十年代起，浏览器就把小于两个百分之一秒的值一律抬到十分之一秒。这条规矩是为当年那些转动的地球图写的，后来一直没删。所以 0.01 秒并不会按每秒 100 帧来播，而是每秒 10 帧。正因如此，这个工具不提供低于 0.02 秒的选项，而 0.05 秒（每秒 20 帧）差不多就是值得去要的上限了。

### 调色板这个设置改的是什么？

GIF 的一帧最多装 256 种颜色，总得有人来挑这 256 种。 \
\
**每帧各自最合适的颜色**会给每一张图单独挑 256 种，看起来最清爽，一组互不相干的照片就该这么选。**整个 GIF 共用一套调色板**则把所有帧放在一起，只建一张表。文件更小，而且能消掉同一场景各帧之间调色板来回跳所造成的闪烁，所以当这些帧是一段连续画面而不是一堆合集时，就选它。

### 能保留透明背景吗？

能，只要你的图片本身有：把“透明”改成“保留透明区域”。不过动手前有件事得知道。GIF 的透明只有一位，一个像素要么完全看不见，要么完全画上去，中间没有过渡，所以抗锯齿的边缘、柔和的阴影，以及任何渐隐的东西，都会变成硬边。要是你的动画会放在一个你已知颜色的背景上，那把它压到那个颜色上会更好看。

### 能用的图片张数有上限吗？

工具里没有写死的上限。真正的天花板是你机器的内存，以及你对出来那个文件大小的耐心：图片是一张一张读的，所以一百帧没问题，但 640 像素的一百帧同样是个非常大的 GIF。见上面的“我的 GIF 为什么这么大？”。

### 它免费吗，需要注册吗？

免费，没有账号，不用登录，也没有试用期。出来的文件上同样没有水印。本站带广告，经费就是从那儿来的，广告拿不到任何关于你图片的信息。

### 断网能用吗？

能。页面加载一次之后断开网络，它照样干活。这也是证明“什么都没上传”最省事的办法，真要把你的图片送出去处理，拔线那一刻就停了。

## 这条隐私承诺怎么核实

- **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。
- **编码器就是仓库里的四个文件。** 做一个 GIF 需要颜色量化和 LZW 压缩，而浏览器这两样都不提供，所以两样都在这儿写了出来：`src/quantize.js` 和 `src/lzw.js`，容器部分在 `src/gif.js`。做一个 GIF 不需要去取任何东西，第一次用也不会下载什么引擎。
- **Google 加载了什么，又拿不到什么。** 广告脚本和统计脚本来自 Google。关于你图片的信息，一条也没有交给它们，文件、缩略图、名字、尺寸、张数都没有。读取、解码、绘制、压缩图片的每一行代码都由这个源提供，也都摆在仓库里。
- **捐助按钮加载了什么，又拿不到什么。** 页首那个“Buy me a coffee”按钮由 cdnjs.buymeacoffee.com 的脚本画出来，字体取自 Google Fonts。它不过是个链接，不上报访问，也拿不到关于你或你图片的任何东西。不点它就什么都不会发生，点下去到的是别人的站。
- **断网也照样能用。** 断开网络，这个页面上每一部分都照常工作。这是最省事的一条证明，真要把你的图片送出去做成 GIF，拔线那一刻就停了。

**你可以自己核对。**上面这些不用你信。这个页面是仓库里的模板和配置生成出来的，构建脚本你能读，也能自己跑一遍，跑出来的结果就提交在 `dist` 分支上。拿实际发给你的内容，跟你自己从源码构建出来的结果对一遍就知道了： https://github.com/A-Box-of-Tools/website

最值得先读的几个文件：`config/site.toml` 里是 Content-Security-Policy，把每一帧落到哪套调色板上由 `src/quantize.js` 决定，压缩器和它写进去的那个文件则在 `src/lzw.js` 和 `src/gif.js` 里。这些文件里都没有一行能碰到网络的代码。