Gif has low quality / noise

[SpaceNinjaApe]

Ive generated a gif out of 30 .png files. But if you look closely you can see some quality issues there. The source Files are "clean". They look exactly the same (well except for that animated thing). This was the result:

Files; gif.tar.gz use tar xfz gif.tar.gz to unpack the files

Code:

        let pathA = PathService.getInstance().combinePaths([outPutPath, `????.png`])
        let pathB = PathService.getInstance().combinePaths([outPutPath, `done.gif`])
        var pngFileStream = require('png-file-stream');
        var GifEncoder = require('gif-encoder');
        var file = fs.createWriteStream(pathB);
        let gif = new GifEncoder(dimensions[0], dimensions[1]);
        gif.setRepeat(0);
        gif.setQuality(10);
        gif.pipe(file);
        gif.writeHeader();

        pngFileStream(pathA).on('data', (pixelsBuffer) => {
            gif.addFrame(pixelsBuffer)
        }).on('finish', () => {
            gif.finish();
            console.log("done")
        })

Am i doing it wrong? Just started using your libary and followed your workaround for missing png-file-stream. described in #11 .

[twolfson]

GIF are inherently limited palettes in their final output. At most we can have 256 colors in a given frame: https://en.wikipedia.org/wiki/GIF#Palettes

Usual workarounds for this might be dithering but in your case, it seems like this is a website or app footer, so I'd recommend using normal content for everything but the loading spinner, then animating an SVG instead. You should be much happier with the final result =/

[SpaceNinjaApe]

Sadly a GIF would be the only way. But thanks for this information!