How do I generate 24-bit True Color Animated Gifs in iOS?

Question

I want to generate a true color animated Gif from a couple of PNG files represented as base64 string. I found this post and did something similar. I have an array with the dataUrls:

NSArray* imageDataUrls; // array with the data urls without data:image/png;base64, prefix   

Here is what I did:

  NSDictionary *fileProperties = @{
                                     (__bridge id)kCGImagePropertyGIFDictionary: @{
                                             (__bridge id)kCGImagePropertyGIFLoopCount: @0, // 0 means loop forever
                                             }
                                     };


    NSDictionary *frameProperties = @{
                                      (__bridge id)kCGImagePropertyGIFDictionary: @{
                                              (__bridge id)kCGImagePropertyGIFDelayTime: @0.4f, // a float (not double!) in seconds, rounded to centiseconds in the GIF data
                                              }
                                      };


        NSURL *documentsDirectoryURL = [[NSFileManager defaultManager] URLForDirectory:NSDocumentDirectory inDomain:NSUserDomainMask appropriateForURL:nil create:YES error:nil];
        NSURL *fileURL = [documentsDirectoryURL URLByAppendingPathComponent:@"animated.gif"];


        CFMutableDataRef destinationData = CFDataCreateMutable(kCFAllocatorDefault, 0);
        CGImageDestinationRef destination = CGImageDestinationCreateWithData(destinationData, kUTTypeGIF, kFrameCount, NULL);


        CGImageDestinationSetProperties(destination, (__bridge CFDictionaryRef)fileProperties);



        NSData* myImageData;
        UIImage *myImage = [UIImage alloc];
        for (NSUInteger i = 0; i < kFrameCount; i++) {
            @autoreleasepool {
                myImageData = [NSData dataFromBase64String:[imageDataUrls objectAtIndex:i]];
                myImage = [myImage initWithData: myImageData];

                CGImageDestinationAddImage(destination, myImage.CGImage, (__bridge CFDictionaryRef)frameProperties);
            }
        }
        myImageData = nil;
        myImage = nil;


CFRelease(destination);

NSData* data = nil;
data = (__bridge NSData *)destinationData;

Finally, I send the gif image as base64EncodedString back to the phonegap container.

// send back gif image
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString: [data base64EncodedString]];

It works good but the quality of the resulting gif image is bad. This is because it has only 256 colors.

Here is the original png image:

Here is a screenshot of the generated gif image:

How do I get the same quality as I imported, i.e., how can I raise the quality level of the generated gif? How do I generate true color gifs on iOS?

Answer 1

GIFs are not designed to store true-color data, and they are also poorly suited for animations¹. Since this is such an unusual use of GIFs, you will have to write a lot of your own code.

1. Break each frame into rectangular chunks, where each chunk contains at most 256 distinct colors. The easiest way to do this is to use 16x16 chunks.

2. Convert each chunk to an indexed image.

3. Add each chunk to the GIF. For the first chunk in a frame, use the frame delay. For other chunks in a frame, use a delay of 0.

Done. You will have to familiarize yourself with the GIF specification, which is freely available online (GIF89a specification at W3.org, see section 23). You will also need to find an LZW compressor, which is not too hard to find. The animation will also use an obscene amount of storage: including base64 conversion, I estimate about 43 bits/pixel, or about 1.2 Gbit/s for 720p video, which is about 400x as much storage as you would use for high-quality MPEG4 or WebM, and probably about 3x as much storage as the PNGs would require. The storage and bandwidth requirements will likely incur undesirable costs for hosts and clients, unless the animations are very short and small.

Note that this will not allow you to use alpha transparency, this is a hard limitation of the GIF format.

Opinion

The idea of putting high quality animations in a GIF is absurd in the extreme, even though it is possible. It is especially absurd given the available alternatives:

• If you are targeting modern browsers or mobile devices, MPEG4 (support matrix) and WebM (support matrix) are the obvious choices. Between the two formats, only Opera Mini supports neither.

• If you are targeting older browsers or less-capable devices, or if you cannot afford MPEG4 encoding, you can encode the frames as individual JPEG or PNG images. Bundle these with a JSON payload with the timing, and use JavaScript or other client-side scripting to switch between animation frames. This works surprisingly well.

Notes

¹ From the GIF 89a specification:

Animation - The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.