So I am generating GIF images by taking imageData stored in an array, undoStack[], and using gif.js to compile them into a gif. I found out that the images are coming out quite large in comparison to what I would like them to be…. See the two attached files. Large.gif being the one that I am generating and small.gif being the one that I am putting into freeconvert.com to compress the file….. There is a 92% reduction. I’ve tried messing with the options in gif.js to optimize the gif generation, but I’ve been unsuccessful. Does anyone have any suggestions to decrease the size of my gifs without losing too much quality? Not sure if I need to somehow optimize the imageData before gif generation, or if there is something I can do after the gif is created to reduce the size like Freeconvert is doing…
THank you in advance!
Here is the function in my web application:
async function saveGIF() {
return new Promise((resolve, reject) => {
const gif = new GIF({
workers: 5,
quality: 10,
width: 1000,
height: 1000,
dither: false,
});
// Calculate total duration and frame interval
const maxDuration = 5000; // Maximum duration in milliseconds (5 seconds)
const targetFPS = 30;
const maxDelayTime = 10;
// Ensure that there are at least two frames
const minFrames = 2;
// Calculate the maximum number of frames based on the duration and target FPS
const maxFrames = Math.floor((maxDuration / 1000) * targetFPS);
// Calculate the delay time for each frame
let delayTime = Math.ceil(maxDuration / Math.min(undoStack.length, maxFrames));
if (delayTime > maxDelayTime) {
delayTime = maxDelayTime;
}
let gifLoad = 0;
// Keep track of the last frame added to the GIF
let lastFrameAdded = null;
for (let i = 0; i < Math.min(undoStack.length, maxFrames); i++) {
const index = undoStack.length > maxFrames ? Math.round((undoStack.length - 1) * i / (maxFrames - 1)) : i;
const imageData = undoStack[index];
// Compare with the last frame added
if (i === 0 || hasEnoughDifference(imageData, lastFrameAdded)) {
gif.addFrame(imageData, { copy: true, delay: delayTime });
lastFrameAdded = imageData; // Update lastFrameAdded
}
}
// Add an additional second with just the last frame
gif.addFrame(lastFrameAdded, { copy: true, delay: 1000 });
gif.on('finished', function (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
if (submitStatus === false){
link.href = url;
link.download = 'doodle.gif';
link.click();
}
URL.revokeObjectURL(url);
// Resolve the Promise with both the GIF blob and its URL
resolve({ blob, url });
});
gif.on('error', function (errMsg) {
console.error('GIF rendering error:', errMsg);
// Reject the Promise with the error message
reject(errMsg);
});
gif.render();
});
}
Same GIF after put into Freeconvert.com
I’ve tried changing the Quality and dithering settings in Gif.js options but that has made little difference. I’ve tried using other libraries such as compressorjs which actually seemed to make my images even larger.