gif.js.turbo

gif.js.turbo is an optimized and memory-efficient fork of the popular gif.js / gif.js.optimized library. It builds upon the foundation of the original gif.js / gif.js.optimized and incorporates further optimizations, resulting in enhanced performance and reduced memory footprint as well as smaller GIFs

Improvements:

• No data is being stored in the memory after, once a frame is added it is sent to a worker thread for processing. This implies that we are processing frames while they are being added and not storing them. Compared to gif.js.optimized this library consumes 3x less memory.
• Since data is being consumed by worker while frames are added, this gives a speed bump of 15-20% on average.
• Ability to send previous-frame buffer as transferable to reduce memory usage and increase speed.
• Adds transparency optmization which encodes only frames that have changed since the last frame to reduce size of GIF by 30-90%.
• Adds box crop offset optimization, that detects the moving part of gif and treats the rest as background, thereby reducing memory by another 5-10%.
• Micro optmization to prevent look up on indices.
• Methods are now async so no need to listen for events.
• Code now in Javascript for ease of use.

Optimiztions from gif.js.optmized:

• Images that were generated by web workers being transferred back, to reduce memory usage and improve speed.
• Added boolean debug parameter, will print info to console only when set to true.
• Some micro code optimizations.
• Build replaced with webpack.

gif.js

Try out demo at the link below: gif.js Demo - http://terikon.github.io/gif.js.optimized/

Works in browsers supporting: Web Workers, File API and Typed Arrays

Tested in

*Google Chrome *Firefox 17 *Safari 6 *Internet Explorer 10 *Mobile Safari iOS 6

Usage

Include gif.js found in dist/ in your page. Also make sure to have gif.worker.js in the same location.

var gif = new GIF({
  workers: 2,
  quality: 10
});

// add an image element
await gif.addFrame(imageElement);

// or a canvas element
await gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
await gif.addFrame(ctx, {copy: true});

const gif = await gif.flush()

Transparency optmization

Consider the input frame and frame written in gif below, it identified the moving portion and only wrote pixels for those which were moving

input frame 10 where text and image move	output image pixels written for frame 10

Extract frames using:
const extractFrames = require("gif-extract-frames");
async function extract() {
  const results = await extractFrames({
    input: "./test-1.gif",
    output: "./temp/frame-%d.png",
    coalesce: false,
  });
  console.log("number of frames", results.shape[0]);
}

extract();

Options

Options can be passed to the constructor or using the setOptions method.

Name	Default	Description
repeat	0	repeat count, -1 = no repeat, 0 = forever
quality	10	pixel sample interval, lower is better
workers	2	number of web workers to spawn
workerScript	gif.worker.js	url to load worker script from
background	#fff	background color where source image is transparent
width	null	output image width
height	null	output image height
transparent	null	transparent hex color, 0x00FF00 = green
applyTransparencyOptimization	false	Make previous frames as transparent, saves memory by upto 90%.
applyCropOptimization	false	Saves memory of final GIF by upto 5-10%, applyTransparencyOptimization needs to be on for this to work
transparencyDifferenceThreshold	1	Loss level of GIF, 1 implies loss-less gif. Higher the value, higher the loss. L2 loss used for gifs with dithering else L1.
useTransferFrame	false	Use transfer of previous frame to reduce memory
globalPalette	null	By default null, pass null or global palette generated through NewuQuant.

If width or height is null image size will be deteremined by first frame added.

async addFrame options

Name	Default	Description
delay	500	frame delay
copy	false	copy the pixel data
copy	false	copy the pixel data
isLastFrame	false	Last frame needs to be set to true for the last frame

Acknowledgements

gif.js.turbo is based on: *gif.js.optimized *gif.js.optimized *Kevin Weiner's Animated gif encoder classes *Neural-Net color quantization algorithm by Anthony Dekker *Thibault Imbert's as3gif

License

The MIT License (MIT)

Copyright (c) 2013 Johan Nordberg

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.