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.

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

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).

"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

<script type="module">
  import gifsicle from 'https://unpkg.com/gifsicle-wasm-browser/dist/index.mjs'
  // or
  import gifsicle from 'https://cdn.jsdelivr.net/npm/gifsicle-wasm-browser/dist/index.mjs'
      ...
  })
</script>

Api

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

input

• Array: input GIFs file

• file

  • String: the web url of the GIF
  • File , Blob , ArrayBuffer: local files obtained via <input type="file">

• name

  • String: the filename that will be used in command

command

• Array: command to execute

folder

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

isStrict

• 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

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)