The Graphics Interchange Format was initially developed by CompuServe in 1987, and has become a staple of the internet. However, GIFs have some limitations, and many sites have switched to using HTML5 video in WebM or MP4 format (such as Gfycat, Imgur, Twitter, and others).
There are a few competing formats that are designed to overcome the problems of GIFs, namely Animated PNG and Animated WebP. Now that Chrome 59 (currently in beta) supports both formats, it's worth discussing - which is better?
Before diving into testing, it's worth briefly talking about the formats themselves and what they were designed for.
The Animated Portable Graphics Format, or aPNG for short, is an extension to the normal PNG format developed in 2008. Although it was rejected by the PNG group as an official extension in 2007, it remains in use. For example, Apple's iOS 10 iMessage stickers use the aPNG format.
WebP is an image format developed by Google, as a derivative of the VP8 video format and sister project to the WebM video container format. Originally WebP did not support animated images or transparency, but those features have since been added. Telegram uses the WebP format for its stickers, and most images on the Play Store use it as well.
WebP and aPNG have not gained much traction on the web (especially compared to GIFs), mostly due to browser support. Excluding Chrome, only Firefox and Safari support aPNG (Opera did before it switched to Chrome's rendering engine, Blink). WebP is only supported by Chrome, Opera, and Opera Mini. Chrome 59 is currently the only browser that can view both formats.
To see how the image formats stacked up against each other, I performed four tests based on how GIFs are commonly utilized on the web. I converted each source file to WebP, aPNG, and GIF (unless the source was already a GIF) using FFMPEG version N-80234-g49b0246, running on Windows 10. No changes, such as compression or resizing, were performed during the conversion.
Where possible, I have uploaded each result file so you can see them for yourself. Keep in mind that you'll need a browser that works with the file you're trying to open. If your browser doesn't support animated PNG, only the first frame will be shown.
Test #1 - Short YouTube video
Creating GIFs from short video clips (such as reaction GIFs) is perhaps the most popular use for the format, especially on social networks. So for my first test, I downloaded a six second YouTube video and converted it to a GIF, WebP, and aPNG.
Source: 29FPS 320x322 H.264 MPEG-4 video - 289 KB
WebP: 508 KB (preview)
aPNG: 14 MB (preview)
GIF: 4 MB (preview)
In this test, WebP is definitely the winner (in terms of file size) at just 508 KB - but it was still roughly twice the size of the original MP4.
Test #2 - Short GIF
For the next test, I used this GIF created from an episode of Rick and Morty. These smaller GIFs are especially popular on sites like Tumblr, where the upload size limit is small. I converted the file to aPNG and WebP.
Source: 400x321 GIF with 31 frames, 8-bit color depth - 490 KB
WebP: 445 KB (preview)
aPNG: 666 KB (preview)
This time, the difference between WebP and aPNG is much smaller. WebP still came out ahead, and ended up being marginally smaller than the original GIF.
Test #3 - Video game recording
Saving your best game moments as GIFs isn't a good idea - unless you like massive files. That's why sites like Gfycat have become popular for sharing gameplay clips, because they convert files to either WebM or MP4 (or both). For this test, I downloaded this high-resolution recording of Overwatch from Gfycat.
Source: 60FPS 2560x1440 Google VP8 WebM video (11 seconds long) - 13MB
WebP: 61 MB
GIF: 465 MB
aPNG: 1,504 MB before I ran out of space on my SSD and the conversion stopped
So in case it wasn't obvious, you should probably leave your gameplay footage as actual video.
Test #4 - Stickers
Stickers have become incredibly popular in messaging applications, and some of them have basic animations as well. This is one of the best use cases for WebP and aPNG - these stickers are multi-frame images, rather than animations created from a video source. For my final test, I used this sticker of a happy Taco.
Source: 100x100 GIF with 8 frames, 8-bit color depth - 17 KB
WebP: 12 KB (preview)
aPNG: 20 KB (preview)
In the final test, WebP once again came ahead with a smaller size than the original GIF.
When looking at these results, it's incredibly important to think about what each format was designed for. GIFs were initially created for short image animations, but now are more commonly used as silent looping videos. Animated PNG was designed for much the same purpose, but allows for 24-bit images and 8-bit transparency .
WebP is much more suited for video-based content, because WebP supports both lossy and lossless compression. This is especially noticeable in tests #1 and #2, where WebP was closest in file size to the original video. Animated PNG is really only ideal if you need the highest quality possible, or multiple transparency layers.
You may be thinking, "why don't we all just use video formats like WebM and MP4?" In some cases, it does make sense. For example, Twitter converts all uploaded GIFs to MP4 video to reduce data usage for users (and to save space on its servers). But in Google's WebP FAQ, the company explains that Chrome (and likely other browsers) are designed to play videos smoothly based on the assumption that pages only have one or two videos. Having several videos playing at once can cause massive performance drops. In addition, WebP supports more compression options than WebM.
So do animated WebPs and Animated PNGs have a chance of de-throning GIFs? Probably not. The key reason GIFs have stuck around so long is they are near-universally supported. Every major web browser works with GIFs, but support for aPNG and WebP is scattered. It will likely be a while until we start to see either format become widely used - if ever.