En | 简体中文

Gifsicle Wasm Browser

height=17>

Run Gifsicle in your browser to compress, crop, frame, resize, and more on GIFs.

Function

- Fully restore the functionality of Gifsicle 1.92
- Supports input and output of multiple GIFs
- Supports multiple commands
- Small (Gzip≈150KB)
- no dependencies

Demo

Basic usage

For more commands, please refer to the Gifsicle Manual.

Compression	Action Frame	Crop	Size	Other
Low middle high	href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEuZ2lwaHkuY29tL21lZGlhL0ZHZzRkQjZqWlFZdFcvZ2lwaHkuZ2lmIiwibmFtZSI6IjEuZ2lmIn1dLCJjb21tYW5kIjpbeyJ2YWx1ZSI6IjEuZ2lmICMtMS0tMiAtbyAvb3V0L291dC5naWYifV0sInpvb20iOjF9">Select the last 2 frames href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEyLmdpcGh5LmNvbS9tZWRpYS8xM0NvWERpYUNjQ295ay8yMDAuZ2lmIiwibmFtZSI6IjEuZ2lmIn1dLCJjb21tYW5kIjpbeyJ2YWx1ZSI6IjEuZ2lmICMwLTIgIy0xLS0zICAtbyAvb3V0L291dC5naWYifV0sInpvb20iOjF9">Select 3 frames before and after href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEyLmdpcGh5LmNvbS9tZWRpYS8xM0NvWERpYUNjQ295ay8yMDAuZ2lmIiwibmFtZSI6IjEuZ2lmIn1dLCJjb21tYW5kIjpbeyJ2YWx1ZSI6IjEuZ2lmIC0tZGVsZXRlICMwLTIwIC1vIC9vdXQvb3V0LmdpZiJ9XSwiem9vbSI6MX0=">delete the first 20 frames href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEyLmdpcGh5LmNvbS9tZWRpYS8xM0NvWERpYUNjQ295ay8yMDAuZ2lmIiwibmFtZSI6IjEuZ2lmIn0seyJmaWxlIjoiaHR0cHM6Ly9tZWRpYTIuZ2lwaHkuY29tL21lZGlhL05tOFpQQUdPd1pVUU0vMjAwLmdpZiIsIm5hbWUiOiIyLmdpZiJ9XSwiY29tbWFuZCI6W3sidmFsdWUiOiItYiAtLXJlc2l6ZSAyNDF4MjAwIDIuZ2lmIn0seyJ2YWx1ZSI6IiAxLmdpZiAtLXJlcGxhY2UgIzItNSAgMi5naWYgICAtbyAvb3V0L291dC5naWYifV0sInpvb20iOjF9">Replace 3-6 frames with other GIFs href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEuZ2lwaHkuY29tL21lZGlhLzF5QzJnZUJtSkpiaE1XYnl5Ni9naXBoeS5naWYiLCJuYW1lIjoiMS5naWYifV0sImNvbW1hbmQiOlt7InZhbHVlIjoiMS5naWYgIy0xLTAgICAtbyAvb3V0L291dDEuZ2lmIn0seyJ2YWx1ZSI6Ii1VIDEuZ2lmICMtMS0wICAgLW8gL291dC9vdXQyLmdpZiJ9XSwiem9vbSI6IjAuOSJ9">rewind href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEuZ2lwaHkuY29tL21lZGlhL25qT04zakVtVFlIRWZSYmZzay8yMDAuZ2lmIiwibmFtZSI6IjIuZ2lmIn0seyJmaWxlIjoiaHR0cHM6Ly9tZWRpYS5naXBoeS5jb20vbWVkaWEvSXAzckk4VzFZY1hITzVNeUhRL2dpcGh5LmdpZiIsIm5hbWUiOiIxLmdpZiJ9XSwiY29tbWFuZCI6W3sidmFsdWUiOiItYiAgLVUgICAtLXJlc2l6ZSAxMDB4MTAwIDEuZ2lmIn0seyJ2YWx1ZSI6Ii1iICAtVSAgLS1yZXNpemUgMTAweDEwMCAyLmdpZiAifSx7InZhbHVlIjoiLVUgIFxuMS5naWYgLS1hcHBlbmQgIzAgIDIuZ2lmICMwIFxuMS5naWYgLS1hcHBlbmQgIzEgIDIuZ2lmICMxIFxuMS5naWYgLS1hcHBlbmQgIzIgIDIuZ2lmICMyIFxuMS5naWYgICAgLS1hcHBlbmQgIzMgIDIuZ2lmICMzIFxuMS5naWYgIC0tYXBwZW5kICM0ICAyLmdpZiAjNCBcbjEuZ2lmICAtLWFwcGVuZCAjNSAgMi5naWYgIzUgXG4tbyAvb3V0L291dC5naWYifV0sInpvb20iOiIwLjkifQ==">Alternate 2 GIFs href="https://renzhezhilu.github.io/gifsicle-wasm-browser/?share=eyJpbnB1dCI6W3siZmlsZSI6Imh0dHBzOi8vbWVkaWEuZ2lwaHkuY29tL21lZGlhL2hUaDliU2JVUFdNV2svZ2lwaHkuZ2lmIiwibmFtZSI6IjEuZ2lmIn1dLCJjb21tYW5kIjpbeyJ2YWx1ZSI6Ii1lIC1VIDEuZ2lmICAtbyAvb3V0L291dC5naWYifV0sInpvb20iOiIwLjYifQ==">export all frames	According to the upper left and lower right corners According to the upper left corner and height and width Crop after rotation Crop after flip Cut out excess transparency	Modify the width to 100px Shrink by 50% Modify aspect ratio	loop read info merge Play speed

Complete example

gifsicleTool.js By combining multiple commands, it can complete more practical functions.

- Merge after modifying size
- Overlay Mode Resize
- Parse Gif information
- play backwards
- Export all frames
- Cut excess transparency

Quick start

npm install

import in vue
```
$ npm i gifsicle-wasm-browser --save
``

``javascript
import gifsicle from "gifsicle-wasm-browser";

gifsicle.run({
input: [{
file: "./cat.gif",
name: "1.gif",
}],
command: [
-e -U
--resize 100x_
1.gif
-o /out/out.gif],
})
.then(outGifFiles => {
console.log(outGifFiles);
// [File,File,File ...]
});
``

Next.js client usage


Make sure the call runs on the client (e.g. inside a Client Component or useEffect).

`tsx
"use client";
import gifsicle from "gifsicle-wasm-browser";

async function compressGif(file: File) {
const [output] = await gifsicle.run({
input: [{ file, name: "input.gif" }],
command: ["-O3 input.gif -o /out/out.gif"],
// optional: pass a custom worker path if you copy it to /public
// workerUrl: "/gifsicle-worker.js",
});

return output;
}
`

- The worker bundle already contains the wasm bytes, so you do not need to copy a separate .wasm file. If your bundler cannot resolve new URL("./worker.js", import.meta.url), copy dist/worker.js into public/ and pass workerUrl.

cdn

cdn demo

`html

``

Api

gifsicle.run(input=[], command=[])

$3


- Array: input GIFs file
- ### file
- String: the web url of the GIF
- File , Blob , ArrayBuffer: local files obtained via \
- ### name
- String: the filename that will be used in command

$3

- Array: command to execute

$3

- Array: (optional) folder name to be used in command

$3

- Boolean: (optional) command End immediately on error or warning
- default: false

return

array of GIFs File

Tips

- ### Function usage
- name in input can be customized, but cannot be repeated.
- The last line of command must contain -o /out/**.gif,
- The default available directories are / , /out , /tem, when command is executed, all files in /out will be exported
- command will be executed one by one in sequence, please use multiple gifsicle.run() if you need to process multiple GIFs at the same time. Execute sequentially | Execute simultaneously
- ### Experience about compressing Gif
- Use -O3 or -O2 with caution, especially for large files over 10Mb, the time-consuming will increase exponentially, and the compression effect is almost the same as -O1.
- The value range of lossy` is between 1-200, the larger the value, the more obvious the noise of the Gif image.
- In my experience, 30-60 is a more balanced choice.

🦁️ Gif:little lion ears

!gifsicle-wasm-browser Compression parameter graphic 02

Author

gifsicle-wasm-browser is @renzhezhilu at
wasm-codecs/gifsicle and
Developed on the basis of gifsicle.

To do

- [x] single Gif input and output
- [x] Multiple Gifs input and output (full version)
- [x] Npm
- [ ]
Multi-core processing (SharedArrayBuffer)