How to reduce GIF size but keep it look good?

j4nos commented 1 year ago

If I do not clear each frame with a background color but try to use a global background color with gif.js, then image will look strange, black backgound everywhere and previous frame shines over, even if I tried turn off / on dispose effect. Though size will be reduced.

Look here: http://t44-post-cover.s3.eu-central-1.amazonaws.com/teszt45-axd0

https://github.com/jnordberg/gif.js

What is wrong with my settings?

const gif = new GIF({
    workers: 2,
    quality: 1,
    workerScript: '/gif.worker.js',
    debug: true,
    width: canvasSize.width,
    height: canvasSize.height,
    repeat: 0,
    background: '#fff',
    transparent: '0x00FF00',
})

gifjs?.addFrame(ctx, {
    copy: true,
    delay: 200,
    dispose: 2, // tried 0, 1, 2, 3
})

flyskywhy commented 1 year ago

You can try gifenc

Because my react-native-gifencoder is also some fork of gif.js

But in my react-native-runescape-text I replace react-native-gifencoder with gifenc for Fix when one color e.g. '#ff0000' only have 1 or 2 or 3 pixel in one frame, the generated gif pixel will be '#9f0000'; fix some frame not transparent but black; reduce gif size 10x

qq15725 commented 1 year ago

You can now use modern-gif to obtain the smallest GIF

jnordberg / gif.js

How to reduce GIF size but keep it look good? #147