Animated PNG VS. Animated Webp VS. GIF battle Royale!

This post is over six (6) months old. Some things on this page my be out of date or no longer applicable.

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


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

Filesize Comparisons of Animated PNG
Compression Type Size in MB Link To File
Unoptimized Gif ≈37.9MB Unoptimized Gif  
Animated PNG with Zlib ≈33.01MB Animated PNG (using zLib)  
Animated PNG with 7zip 15 iterations ≈31.22MB Animated PNG 7zip 15 iterations 
Animated PNG with 7zip 100 iterations ≈31.22MB Animated PNG 7zip 100 iterations 
Animated PNG with Zopfli 15 iterations ≈30.92MB Animated PNG zopfli 15 iterations 
Animated PNG with Zopfli 100 iterations ≈30.87MB Animated PNG zopfli 100 iterations 

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.

Filesize of APNG after using APNGOPT
Compression Type Original Size in MB APNGOPT Size in MB
Unoptimized Gif ≈37.9MB
Animated PNG with Zlib ≈33.01MB ≈33.04MB
Animated PNG with 7zip 15 iterations ≈31.22MB ≈31.21MB
Animated PNG with 7zip 100 iterations ≈31.22MB ≈31.21MB
Animated PNG with Zopfli 15 iterations ≈30.92MB ≈30.91MB
Animated PNG with Zopfli 100 iterations ≈30.87MB ≈30.86MB
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.

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.

Filesize of Webp & Optimized APNG
File Quality Compression Mode Webp Size in MB Best APNGOPT Size in MB
Animated Webp Default (75) Default (4) ≈30.82MB ≈30.86MB
70 6 highest ≈31.80MB
70 Default (4) ≈30.82MB
70 Mixed ≈5.86MB
70 Mixed & 6 (highest) ≈5.32MB

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.

Webp Defaults, Best APNG Chrome Desktop Cable Connection
Webp Defaults (test screenshot  ) Best APNG (test screenshot  )
Page Load Time 65.398s 53.274s
Speed Index (lower better) 2671 3108
Document Complete 65.398s 53.274s
Visually Complete 16.400s 44.7s
Fully Loaded 65.489s 53.341s
First Interactive 1.076s 0.984s

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.

Webp Defaults, Best APNG Chrome Mobile 3g Connection
Webp Defaults (test screenshot  ) Best APNG (test screenshot  )
Page Load Time 144.133s 146.060s
Speed Index (lower better) 5791 5157
Visually Complete 21.037s 41.014s
Fully Loaded 144.133s 146.060s
First Interactive 4.485s 3.327s

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.

WPT Result Comparison of Gif, Animated PNG & Animated Webp on Desktop Cable Connection
Webp Conversion Type
Defaults Lossy Lossy & Filtered Mixed APNG Best GIF
Page Load Time 65.398s 11.495s 11.349s 9.632s 53.274s 66.412s
Speed Index (lower better) 2671 962 785 882 3108 2282
Document Complete 65.398s 11.495s 11.349s 9.632s 53.274s 66.412s
Visually Complete 16.400s 1.200s 4.400s 4.200s 44.7s 45.100s
Fully Loaded 65.489s 11.600s 11.446s 9.734s 53.341s 66.486s
First Interactive 1.076s 0.879s 0.681s 0.783s 0.984s 0.778s
test screenshot   test screenshot test screenshot   test screenshot   test screenshot   test screenshot  

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.

WPT Result Comparison of Gif, Animated PNG & Animated Webp on Mobile 3g Connection
Webp Conversion Type
Defaults Lossy Lossy & Filtered Mixed APNG Best GIF
Page Load Time 144.133s 37.631s 37.408s 31.839s 146.060s 124.712s
Speed Index (lower better) 5791 3811 3964 3858 5157 29382
Visually Complete 21.037s 6.871s 34.057s 30.033s 41.014s 106.860s
Fully Loaded 144.133s 38.075s 37.950s 32.412s 146.060s 124.712s
First Interactive 4.485s 3.448s 3.473s 3.458s 3.327s 18.347s
test screenshot   test screenshot   test screenshot   test screenshot   test screenshot   test screenshot  

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.

Filesize Comparison of GIF, Animated Webp, Animated PNG, MP4 & WebM
File Type Type Size in MB Link To File
Unoptimized Gif ≈37.9MB Unoptimized Gif  
Default Webp ≈30.82MB
APNG Zopfli 100 Iterations ≈30.87MB
Trimmed MP4 ≈457KB MP4 Trimmed, Resized and No Audio  
Constant w/43 crf ≈182KB Constant Webm Trimmed, Resized and No Audio  

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.

Webp Defaults, APNG, MP4 & Webm Webpagetest Results
Webp APNG MP4 WebM
Cable 3g Cable 3g Cable 3g Cable 3g
Page Load Time 65.398s 144.133s 53.274s 146.060s 0.775s 3.555s 0.832s 3.679s
Speed Index (lower better) 2671 5791 3108 5157 1025 3597 1012 3448
Visually Complete 16.400s 21.037s 44.7s 41.014s 3.500s 6.340s 1.800s 6.510s
Fully Loaded 65.489s 144.133s 53.341s 146.060s 1.404s 9.175s 0.926s 4.476s
First Interactive 1.076s 4.485s 0.984s 3.327s > 0.980s 3.570s > 0.971s 3.418s
test screenshot   test screenshot   test screenshot   test screenshot  

Webp, APNG, MP4 and Webm Desktop Cable Connection

Webp, APNG, MP4 and Webm Mobile 3g Connection

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:

File Dimensions Webp APNG GIF
800x450 ≈30.82MB ≈31.22MB ≈37.9MB
400x225 ≈7.76MB ≈8.02MB ≈9.43MB
300x169 ≈4.16MB ≈3.97MB ≈4.93MB

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:

Page Load Time 47.528s 47.947s
Speed Index 2905 3155
Visually Complete 20.049s 26.078s
Fully Loaded 47.892s 48.327s
First Interactive 1.199s 1.454s
Test Screenshot Webp Mobile 400px   APNG Mobile 400px  

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.