# GIF 製作 — 把圖片做成動圖

把一組圖片變成一段動畫。

> 把 JPG、PNG 或 WebP 圖片做成 GIF 動圖，免費，全程在瀏覽器裡完成。順序、快慢和尺寸都由你定。什麼都不上傳，斷網也能用。

本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/gif-maker/。你交給它的任何內容都不會被上傳。下面是這個頁面用文字對該工具的全部說明；要使用它，請開啟這個地址。

## 你的圖片**不會上傳**。這裡根本沒有伺服器。

每一幀都由你自己的瀏覽器繪製、量化和壓縮，做好的 GIF 也是在這臺機器的記憶體裡拼起來的。就算這裡有什麼東西想把圖片送走，頁面的另一端也根本沒有伺服器可以接。

- ✗ 不上傳
- ✗ 不註冊
- ✓ 斷網可用
- ✓ 開源
- ✓ 檔案不出這臺機器

## 用圖片做 GIF 的步驟

1. **選好你的圖片。** 把一個資料夾拖到選擇框裡，或者自己挑檔案。瀏覽器直接從磁碟上讀，這期間沒有任何東西發往別處。
2. **按播放順序排好。** 抓住把手拖動，或者用箭頭。「按名稱排序」是按你以為的方式數數的，所以 `frame_2` 會排在 `frame_10` 前面。
3. **定下每一幀停多久。** 每張半秒是投影片，二十分之一秒就是動畫了。可以一次給所有幀同一個時長，也可以單獨讓某一張多停一下。
4. **選尺寸，並決定顏色怎麼挑。** GIF 的體積隨面積和幀數一起漲，而且沒有畫質滑桿能把它拉回來，所以尺寸才是最要緊的那個設定。每幀 256 色最好看，也是預設值；共用一套調色盤則更小、更穩。
5. **做出 GIF，然後下載。** 它是在你自己的硬體上拼出來的，所以花多久取決於你的機器，而不是排隊。做好的動畫會先在頁面上放一遍，然後你再儲存。

## 說得更細的版本

[怎麼用圖片做一個動圖 GIF](https://abox.tools/zh-TW/guides/make-a-gif-from-images/): 把一組圖片變成一個動圖 GIF：GIF 到底能放多快、調色盤那個選項改的是什麼，以及真正能讓檔案變小的三件事。

## 工具箱裡還有

- [GIF 拆幀](https://abox.tools/zh-TW/split-gif/): 每一幀都單獨存成一張 PNG。
- [GIF 分析](https://abox.tools/zh-TW/gif-analyzer/): 幀、延時、調色盤，以及每個位元組的去向。
- [圖片轉影片](https://abox.tools/zh-TW/images-to-video/): 一個資料夾的圖片，變成一段影片。
- [影片剪輯](https://abox.tools/zh-TW/trim-video/): 一邊看一邊標出要留的段落，最後拿回一個影片。

## 常見問題

### 我的圖片會被傳到哪裡去嗎？

不會。你的圖片由你自己的瀏覽器在你自己的硬體上讀取、繪製、量化和壓縮。這個工具沒有服務端，頁面的 `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 裡寫著這個頁面允許聯絡的每一個地址，沒有一個屬於本站。這裡沒有任何可以收走你檔案的接收端，就算有，程式碼裡也沒有把檔案送過去的東西。這行以前寫的是 `connect-src 'none'`，那是沒有例外的。加廣告付出的代價就是它，把這句說出來也是約定的一部分。
- **編碼器就是儲存庫裡的四個檔案。** 做一個 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` 裡。這些檔案裡都沒有一行能碰到網路的程式碼。