Run Gifsicle in browser,Compress, rotate, crop and other operations on Gif images
npm install gifsicle-wasm-browser
En | 简体中文
![]()
Run Gifsicle in your browser to compress, crop, frame, resize, and more on GIFs.

- Fully restore the functionality of Gifsicle 1.92
- Supports input and output of multiple GIFs
- Supports multiple commands
- Small (Gzip≈150KB)
- no dependencies
| 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 |
- Merge after modifying size
- Overlay Mode Resize
- Parse Gif information
- play backwards
- Export all frames
- Cut excess transparency
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 ...]
});
`html``
: 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: falsereturn
array of GIFs FileTips
- ### 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.
🦁️ Gif:little lion ears
!gifsicle-wasm-browser Compression parameter graphic 02
gifsicle-wasm-browser is @renzhezhilu at
wasm-codecs/gifsicle and
Developed on the basis of gifsicle.