gif-encoder
gif-encoder copied to clipboard
Quality and File Size Issues(Doesn't look like gif limitations)
I would have liked to make this a discussion rather than an issue but there is no discussion tab for this repository so I'll just initially bring it up here.
Here is a gif I made in photoshop (You will need to zoom in for a better look):
Here is the same gif but created using the gif-encoder:
The photoshop created gif has a consistent palette for the background image throughout the animation. While as even on the highest quality gif-encoder has some trouble keeping a consistent palette resulting in some flickering.
This doesn't happen for every image, for example using a simpler version of the background(no shading on face), I can create a gif with no flickering with gif-encoder:
Before I reproduced the gif in photoshop, I thought this was just a limitation of gifs having a reduced colour palette but after creating it manually on photoshop and having someone else create it using their own method, I had to make sure so I used a colour analyser aside from photoshop to count the different colours on each frame. Needless to say, there are less than 70 individual colours used overall for the shaded version and even less for the unshaded. Neither could use the maximum 256 but for some reason, when I use gif-encoder, I cannot accurately get the correct colours per frame.
On another note, there is a massive disparity in file size between gifs made in photoshop and gif-encoder. As you can check for yourselves, the shaded version has an exported file size of 4kb from photoshop and with gif-encoder it is 68kb. I know it is not fair for me to compare gif-encoder and photoshop, so... I tried using an online gif maker and there were no problems with flickering even though the file size was around 8kb which is twice the size as photoshop but still better size compared to the library. I'm not an image expert otherwise I would make contributions here but maybe the author is still willing to improve this library after all these years?
To give you an update, I used the octree algorithm provided by gif-encoder-2 and that sorted out the flickering. However the file size is still as big as gif-encoder.
Thanks for writing in =D Ah, yes -- I see the flickering issue if I stare at the top of the eyes =/
Unfortunately, I don't have time to dig into this =/ but will gladly welcome PRs if you'd curious
We do expose the low-level APIs to control the palette yourself:
https://github.com/twolfson/gif-encoder/tree/0.7.2#setimagepalettepalette
Regarding file size, I'd wager Photoshop has the benefit of knowing what the entire image looks like, whereas our library was written with receiving a stream of images of unknown quantity in mind
This is the same reason it generates the palette on every frame, because it just doesn't know what else is in store
This library doesn't get a whole lot of use I believe, and there do seem to be newer GIF encoders out there as you've found
If you're still not getting the performance out of those, I suggest passing the results through an image optimizer. e.g. imagemin is what I recommend on spritesmith results. They seem to integrate gifsicle for their library, https://github.com/imagemin/imagemin-gifsicle
I'll leave the issue open, as these are valid concerns the library could improve upon
I will do what you suggest and create functionality that will create a global colour table that knows the frames in advance by allowing an array of image data to be passed in or holds off the processing of the stream data until finish() is called. In that way maybe only frames that have unique colours can have a local palette to use. I don't know how far I will go with it but I can at least give it a shot. This library is quite popular on npm so I figure it is still useful for me to try and add some useful updates.
@SZOKOZ You can try gifenc
Because my react-native-gifencoder is also some fork of gif.js just like gif-encoder here
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