With Chrome now supporting Animated PNG as of Chrome 59 we have two image formats that can supplant the old and tired GIF format. Varying posts and sites have different conclusions on when to use APNG versus an animated Webp. In all my findings (linked below where the source Gif comes from) animated webp beats apng in filesize each and every time. Sometimes by not very much. This of course is anecdotal and I'm not as familiar with apng as the creators and others may be so they may be able to squeeze more out of an apng than I can.

All that being said I've heard and read people say "APNG might be bigger but webp takes longer to decode in the browser". That assumes the larger APNG will load faster than the smaller webp. Is that the case though? I assume the smaller webp gets downloaded to the client faster then it'll start decoding faster. Thus animating faster. So lets actually test that instead of me spouting off haha. On to the source GIF.

The GIF I'm using for this post comes from my post on Converting MP4 To Webm  . That was a 1080p video stripped down to about 5 seconds and resized to a width of 800.

Here are the relevant details of the unoptimized GIF:

• Dimensions: 800x450
• Length: 5s
• Size: ≈37.9MB

Setup

Before we can even embark on this trip we have to convert the GIF above to an APNG and an Animated Webp. Maybe you can convert the GIF on this page to an APNG and get better results. Please try I don't want to dismiss APNG as much as I think I'm probably coming off as.

Converting to an Animated PNG (apng)

Gif2apng offers three different options for converting a GIF to an animated PNG. We have zlib, 7zip and Zopfli compression. Each compression option besides zlib allows you to set an iteration amount which defaults to 15.

I'm using gif2apng version 1.9 [ 1 ] [ 2 ]. For both 7zip and zopfli I'll use the "default" iterations of 15 and a more aggressive version of 100. Be warned if you want to do this. Depending on your server specs or locally on your own computer and it's specs Zopfli will take a long time. Increasing the iterations for either of the compression algorithms will also increase how long it takes to convert your image to an APNG. Be prepared to set aside a pretty big chunk of time if you do this on your computer :).

After converting the GIF to an Animated PNG I'll also run it through APNGOPT. This should "optimize" the Animated PNG. This too offers differing amount of iterations. I'll use the "default" of 15 for each apng that was converted with the defaults above and 100 for all the 100 iterations.

APNG Filesize Results

We can see that Zopfli compression saves the most before running these through apngopt. It's very CPU intensive though. After running these through apngopt things didn't change much or at all.

APNG Footnotes

1. On a windows machine just use the GUI they package from sourceforge. It seems to be the most up to date. I haven't had the time to see if the GUI and CLI differ in anyway so that'll be up to you unless you're ok with the output of the GUI then keep on keepin on!
2. If you install gif2apng through your OS's package manager (ie: apt-get/apt) depending on your OS's you'll more than likely get version 1.7.
3. Depending on your OS again if you use the CLI version of apngopt you'll get versions ranging from 1.1 to 1.4.

Animated Webp

The same reference gif was converted to a webp using three different options and WebP Encoder version: 0.6.0 (WebP Mux version: 0.4.0).

I didn't dive into the different CLI options available for gif2webp. Things such has -kmin , -kmax — which specify the minimum and maximum distance between consecutive key frames and can improve decoding performance — or adjust the deblocking filter -f from the docs suggested 50. These could with adjustments and tweaking produce smaller or in some instances bigger files. You'll have to test those out for specific images, or use the defaults such as I have.

• It's default settings (quality 75)  
• quality of 70 and 6 (-m 6) for the compression mode. It's highest. 
• A quality of 70 with default compression of 4 (lossless) 
• an unfair mixed mode (lossless and lossy compression) with a quality of 70 
• another unfair Quality 70 with Commpression of 6 & Mixed compression (lossy and lossles) 

Webp at it's default settings beats (barely) each of the converted APNG's, 30.86MB for the Webp compared to 33.01MB using default APNG settings (zlib) and 30.87MB using zopfli compression @ 100 iterations.

Ok cool all the file size mumbo jumbo is out of the way. Does a few kb/mb matter when they are so close? The default webp settings gives us the same size file of an apng using apngout and zopfli @ 100 iterations.

Yep. The larger apng will in fact decode faster. But does that matter? Kind of.

Summoning the WebPageTest Gods!

Typically in a situation like this I would use Webpagetest's "visual comparison"   option that way we could see the pages load side by side. I'd run a desktop test and then I'd run a mobile test using the "emerging markets" settings. I can't right now since as mentioned above APNG support is in Chrome 59+. The visual comparison tool uses the current stable release of Chrome (which just happened to be updated while I was testing these out. Still to be sure I ran with the Canary version). What most everyone using a non dev/beta version of Chrome uses.

So I'm running these tests on Chrome Canary and will use the median from the first view as the comparison. I'll run each image option/type three (3) times on Chrome desktop using a cable connection — 5Mbps 28ms Latency — and three times using a Fourth Generation Moto G and their "Mobile 3g" connection — 768 Kbps 3G connection with 300ms of latency.

Webp Defaults vs. Best Animated PNG

The first comparison I ran is the default settings of gif2webp. As mentioned above this defaults to a quality of 75, compression mode of 4 and is lossless like APNG. You can download these animated images and run them yourself. You'll see which actually loads faster without even having to read haha.

Webp at it's default settings might in fact be smaller in file size (for this particular animation) than the APNG. It helps in the fact that we are sending less bytes down the wire but as for over all page load performance you can see below it's not helping much or if any at all.

Here we can see the visual differences between both of these formats.

These are large files. You're doing yourself and your users a disservice if you send these big honking things down the wire to them.

Webp and APNG on Mobile 3g Connection

Webp's defaults will help you out on a a slow 3g connection because it's sending less data. APNG gets frames faster to the screen since it decodes faster, hence the better speed index below.

So don't use APNG nor the Webp Defaults on a slow connection in my opinion. They are big files.

Your Best Bet

So is there a solution for smaller file size than gif and that actually helps your page performance? Yes if you don't mind a possible lossy compressed image.

We can take the Webp image converted with the defaults, the mixed compression (lossy & lossless), the lossy converted webp, and a lossy compressed and filtered webp image and compare those to the "best" file size wise APNG and an unoptimized GIF.

Before I show you those here are the numbers from those runs on a desktop.

Here is the visual comparison.

What I was most surprised by was how close a default settings animated webp and an unoptimized gif page load times and speed index were.

These aren't fair comparision to APNG either since there is lossy compression. There's also high variance in the load times. Much like you'd have in a real world scenario. So take these results with a grain of salt. I didn't put much effort into making them all variable free.

APNG and Webp Mobile 3g

Where you'll get the most benefit with this animated webp is on a slow 3g connection.

The animated webp's load faster on 3g since there's less data being sent. APNG's decode a bit faster and the GIF is just flat out bad. What I didn't include is CPU busy time but you can get a feel for that in the "First Interactive" numbers. Here's what Webpagetest says First interactive is:

reports when the page is first expected to be usable and will respond to input quickly (with the possibility of slow responses as more content loads).

What Should You Use

None of these. No really. Well I should say typically depending on your browser support and what you have as a source format you shouldn't use any of these (animated webp, animated png or GIF).

If you have control over your source. Meaning you have the actual video you wish to use as a short animation then use a short video. As I've shown in my other post, Converting MP4 To Webm, these video formats can be significantly smaller. For instance these same animated images as their corresponding MP4's and webm's are a lot smaller.

Running these short videos through WPT gives us, in my opinion, the definitive answer on why you should use these video formats for short gif like animations over the other formats in this post.

Real World Scenario

Now this is a very particular "test" for one type of animation. Certain images and videos will vary greatly in their file sizes compared to their actual size. For instances like using responsive images. If we have three images used in srcset, or picture element (which hopefully you should be using a responsive image element or attributes) with the following dimensions 1:

APNG Default Settings

1. The GIF's are converted to Animated Webp's and Animated PNG's using their default settings. Animated Webp defaults are covered above. Animated PNG's defaults for gif2apng are
   1. 7zip compression
   2. 15 iterations
   3. Optimized Palette

Then usually an 800px wide webp/apng wont be sent to mobile users. So page load times and the rest of the metrics will be better. For instance here are the 400px wide animated images Webpagetest results:

These smaller images load a lot faster. Still not as fast as an MP4 or WebM at 800px wide.

Wrap Up

There's a reason Gyfcat (webm or MP4) and Imgur (gifv) serve videos for their "GIFS". They are faster and typically smaller. The end user can also stop these from playing which could keep lower powered machine's fans from spinning :) or let them actually use the page.

Use video formats! Then think about webp if your browser support allows it followed by APNG and then if you have to use a GIF. You can use your server and content negotiation like I outlined in this post Conditionally Serve Webp, JXR Images with Nginx for both Nginx and Apache or use the picture element and type switching if you don't have access to server configs or htaccess file.