Quantcast

What alternatives to animated GIF are there?

GIF is the oldest and simplest image format still commonly used on the web. Despite its limited color palette (256 colors per frame), lack of alpha transparency and relatively large file size, 30 years later it still remains widely used and the only animated image format supported in nearly all major web browsers and image viewers.

This is largely due to lack of general consensus about what should be the replacement. There are multiple competing animated image formats, and also some debate on whether we need them at all (leaving animation to video formats). In this article I will give a short introduction to alternative animated image formats.

Demo in GIF format GIF image, 781 KB, 67 frames

APNG Animated Portable Network Graphics

https://en.wikipedia.org/wiki/APNG

APNG is an extension to PNG format (although officially rejected by PNG group). It works similarly to GIF, supporting 24-bit images (allowing to use a lot more colors than GIF), 8-bit alpha channel (partial transparency) and better compression.

It's developed in 2008, but for a long time adaption remined low, with only Mozilla supporting APNG. Recently it has gained more widespread adaption with Safari, Chrome and Opera adding APNG support. Currently it has the widest support in web browsers amongst alternatives to GIF - it's supported by Firefox, Safari, Opera, Chrome, and Edge, leaving only IE and some mobile browser users out. It also provides some degree of backward compatiblity in applications which doesn't support APNG, allowing to display the first frame as normal PNG image.

Up to date chart of current APNG support in browsers: https://caniuse.com/#search=apng.

Ezgif allows to create APNG files and edit APNG with most of our tools.

Demo in APNG format APNG image, 2.33 MB, 67 frames

WebP Modern image format developed by Google

https://developers.google.com/speed/webp/

WebP is bit newer image format, first announced in 2010. Similarly to APNG, it also supports 24-bit images and 8-bit transparency. It features lossy and lossless compression, making it possible to achieve very small file size in some cases, or ratain full lossless quality, making it very versatile format. Being completely new format, it also doesn't fail gracefully, displaying just a broken image or alt text. Like APNG, recently it has gained support in nearly all major web browsers, leaving only IE out.

Some sites choose to serve WebP images to supported browsers, and GIF or APNG to the rest, but this requires some specific web server configuration or server side code and preperation of each image in multiple formats.

WebP support in browsers: https://caniuse.com/#search=webp.

Ezgif allows to create, edit and convert WebP files.

Demo in WebP format WebP image, 1.5 MB, 67 frames

Demo in WebP format, worse quality WebP, more compressed, 531 KB, 67 frames

AVIF AV1 Image File Format

https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)

AVIF is an image file format specification for storing images or image sequences compressed with AV1 in the HEIF file format. AVIF specification was finalized in February 2019, so it's the newest format in the list, but it's already supported by Google Chrome and Opera. Firefox support is currently in development. This format looks very promising, with significant reduction in file sizes. It also supports lossy and losless compression.

Up to date chart of current AVIF support in browsers: https://caniuse.com/#search=avif.

Ezgif allows to create, convert, split and edit AVIF files with most of our tools.

Demo in AVIF format AVIF image, 87.4 KB, 67 frames

MNG Multiple-image Network Graphics

https://en.wikipedia.org/wiki/Multiple-image_Network_Graphics/

MNG is another animated image format related to PNG. It predates APNG, and some browser vendors have experimented with it in past, but currently it's not supported natively by any major web browser. Interestingly enough though, it has pretty good tooling support, mostly thanks to it being supported by imagemagick, which is used as image processing library or backend by many other programs.

Ezgif allows to create MNG files, convert existing MNG to APNG or GIF and use MNG with most of our editing tools. Images most likely won't be displayed in your browser though. With current state of support, APNG is much more practical choice, but MNG has some specific use cases, for example in developing games on some engines.

MNG demo image: https://ezgif.com/images/format-demo/butterfly.mng, 2.9MB, 67 frames.

FLIF Free Lossless Image Format

https://flif.info/

FLIF is a new and innovative image format featuring animation support with alpha transparency, progressive loading (allowing to display image in lower quality while it's still downloading) and some impressive statistics in comparison to different formats. It's not supported by any browsers natively, but there is a javascript browser polifill, making it possible to use FLIF in any browser (although currently not fully supporting animated FLIFs).

Ezgif has some experimental FLIF tooling - you can create and edit animated FLIF files, but animations may run at incorrect speed and the performance of larger animations may be poor. It seems the development has stalled and there is no native browser support, so currently there is not much practical use for this format.

FLIF image, 699KB, 67 frames
(using <canvas> element and Poly FLIF)