1 選擇圖片
抓住某一幀的 把手拖動就能重排，也可以用每一幀上的箭頭。這裡的順序就是它們播放的順序。
2 GIF 設定
顏色數 顏色越少，檔案越小，色帶越明顯。
抖動 做 logo、線稿和截圖時把它關掉。
新增圖片後就能看到預覽
- 幀數
- —
- 時長
- —
- 畫面尺寸
- —
- 播放
- —
直接從資料夾裡開啟 index.html，瀏覽器會攔下 JavaScript 模組，於是你選好圖片之後，頁面不會有任何反應。改用 http 把這個資料夾提供出去：
powershell -ExecutionPolicy Bypass -File serve.ps1
然後開啟 http://localhost:8080/。
把一組圖片變成一段動畫。
每一幀都由你自己的瀏覽器繪製、量化和壓縮，做好的 GIF 也是在這臺機器的記憶體裡拼起來的。就算這裡有什麼東西想把圖片送走，頁面的另一端也根本沒有伺服器可以接。
即時檢查： 檢查中…
離線： 檢查中…
不用信我們說的。開啟開發者工具，盯著「網路」面板，做一個 GIF 試試。沒有哪個請求帶上圖片、縮圖，或者檔名。嫌麻煩就直接拔掉網線，照樣做。
connect-src 'none'，那是沒有例外的。加廣告付出的代價就是它，把這句說出來也是約定的一部分。src/quantize.js 和 src/lzw.js，容器部分在 src/gif.js。做一個 GIF 不需要去取任何東西，第一次用也不會下載什麼引擎。 你可以自己核對。上面這些不用你信。這個頁面是儲存庫裡的模板和配置產生出來的，構建指令碼你能讀，也能自己跑一遍，跑出來的結果就提交在 dist 分支上。拿實際發給你的內容，跟你自己從原始碼構建出來的結果對一遍就知道了：
github.com/A-Box-of-Tools/website
最值得先讀的幾個檔案：config/site.toml 裡是 Content-Security-Policy，把每一幀落到哪套調色盤上由 src/quantize.js 決定，壓縮器和它寫進去的那個檔案則在 src/lzw.js 和 src/gif.js 裡。這些檔案裡都沒有一行能碰到網路的程式碼。
如果公司的安全軟體警告說有上傳。它盯著瀏覽器裡選擇檔案的那一刻，而且無法知道頁面是否打算把它發出去——所以在選擇時就發出警告。這裡什麼都不會發出去：開啟瀏覽器的開發者工具，切到網路，然後選一個檔案。沒有任何請求帶著它，除了這個頁面自己的本地預覽之外，根本沒有任何請求。同樣的檢查，你們的 IT 同事半分鐘就能做完。
抓住某一幀的 把手拖動就能重排，也可以用每一幀上的箭頭。這裡的順序就是它們播放的順序。
顏色數 顏色越少，檔案越小，色帶越明顯。
抖動 做 logo、線稿和截圖時把它關掉。
新增圖片後就能看到預覽
這次管用嗎？
哪裡不對？
謝謝，這很有用。
發出去的只有你這個回答，而且只在你按下按鈕的時候。你的檔案、它的名字，以及跟它有關的任何東西，一樣都不發。
# 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` 裡。這些檔案裡都沒有一行能碰到網路的程式碼。
frame_2 會排在 frame_10 前面。 怎麼用圖片做一個動圖 GIF 把一組圖片變成一個動圖 GIF：GIF 到底能放多快、調色盤那個選項改的是什麼，以及真正能讓檔案變小的三件事。
不會。你的圖片由你自己的瀏覽器在你自己的硬體上讀取、繪製、量化和壓縮。這個工具沒有服務端，頁面的 Content-Security-Policy 裡寫著它允許聯絡的每一個地址，沒有一個屬於本站。拔掉網線，它照樣做 GIF。
凡是你瀏覽器能解碼的靜態圖片格式都行，實際上就是 JPG、PNG、WebP、GIF、AVIF，在蘋果裝置上還有 HEIC。這裡沒有另外一份需要維護的清單，因為解碼是瀏覽器的工作，不是我們的。
因為 GIF 把每一幀都當作完整畫素來存。沒有運動補償，沒有「和上一幀一樣、只是挪了個位置」這種存法，也沒有畫質旋鈕：體積大約就是面積乘幀數，能把它壓下來的只有三件事。
做小一點：尺寸減半，檔案就只剩四分之一。少用幾幀，或者讓每一幀停久一點。降到 64 色或 32 色，並關掉抖動——對平塗畫面來說這代價比聽起來小，對照片來說則很大。要是還塞不下，老實說，你在做的其實是影片，同樣的內容做成 MP4，大概只有十分之一大。
沒有那個數字看上去那麼快。這個格式把每幀的停留時間按百分之一秒來存，而從九十年代起，瀏覽器就把小於兩個百分之一秒的值一律抬到十分之一秒。這條規矩是為當年那些轉動的地球圖寫的，後來一直沒刪。所以 0.01 秒並不會按每秒 100 幀來播，而是每秒 10 幀。正因如此，這個工具不提供低於 0.02 秒的選項，而 0.05 秒（每秒 20 幀）差不多就是值得去要的上限了。
GIF 的一幀最多裝 256 種顏色，總得有人來挑這 256 種。
每幀各自最合適的顏色會給每一張圖單獨挑 256 種，看起來最清爽，一組互不相干的照片就該這麼選。整個 GIF 共用一套調色盤則把所有幀放在一起，只建一張表。檔案更小，而且能消掉同一場景各幀之間調色盤來回跳所造成的閃爍，所以當這些幀是一段連續畫面而不是一堆合集時，就選它。
能，只要你的圖片本身有：把「透明」改成「保留透明區域」。不過動手前有件事得知道。GIF 的透明只有一位，一個畫素要麼完全看不見，要麼完全畫上去，中間沒有過渡，所以抗鋸齒的邊緣、柔和的陰影，以及任何漸隱的東西，都會變成硬邊。要是你的動畫會放在一個你已知顏色的背景上，那把它壓到那個顏色上會更好看。
工具裡沒有寫死的上限。真正的天花板是你機器的記憶體，以及你對出來那個檔案大小的耐心：圖片是一張一張讀的，所以一百幀沒問題，但 640 畫素的一百幀同樣是個非常大的 GIF。見上面的「我的 GIF 為什麼這麼大？」。
免費，沒有帳號，不用登入，也沒有試用期。出來的檔案上同樣沒有水印。本站帶廣告，經費就是從那裡來的，廣告拿不到任何關於你圖片的資訊。
能。頁面載入一次之後斷開網路，它照樣運作。這也是證明「什麼都沒上傳」最省事的辦法，真要把你的圖片送出去處理，拔線那一刻就停了。