FluffyBench

Should you use GIF, WebP, or APNG for an animation?

A moving logo needs more than motion: its colors and soft edges matter, too. Here's how to choose GIF, animated WebP, or APNG for the place you're sharing it.

FluffyBench · 7 min read · Measured one Earth animation saved three ways

Which animation format should you choose?

Start with the app or site that will show the animation. If it only takes GIF, the choice is made. If it also opens animated WebP or APNG, pick by what the artwork needs.

First check which formats the app or site accepts. GIF: when the place asks for GIF, or the art has a few flat colors and hard edges. Animated WebP: lossy for a smaller file where some colors shift a little, or lossless to keep every pixel. APNG: every pixel kept, soft see-through edges; check the file size.

Which format fits

The rest of this page shows each trade-off: color, see-through edges, then file size. Specifications and source notes

GIF is the one nearly every app and site can show. Animated WebP and APNG are newer: they keep more color and softer edges, and the next sections show what that looks like.

What is an animation format, anyway?

Think of an animation as a flipbook: a stack of pictures, plus instructions for how long to show each one and when to start over. GIF, animated WebP and APNG all pack that stack into one image file.

Three Earth pictures stacked like flipbook pages, with an arrow to one image file that holds 8 frames pictures in order, shows each for half a second, then starts over. The file can be a GIF, animated WebP or APNG.

Pictures plus timing, in one file

The Earth pictures are the first three of the eight used in the example below. · Photo: NASA, U.S. federal public domain, via NASA EPIC.

That's handy for a moving logo or a short loop you want to share without sending a video. All three formats can store motion; they differ in how they store color, see-through edges, and how big the file gets.

How do GIF, WebP, and APNG change color?

GIF picks each pixel's color from a short list of up to 256 palette entries. A logo with a few flat colors fits easily. A photo's smooth shading has to share those few colors, so it can break into blotchy steps.

Here's the same patch of cloud and coastline from the first picture of an eight-picture Earth animation, before and after FluffyBench converted it with its starting settings.

The first Earth picture, with the compared patch over the west coast of Australia marked.

Source APNG

Soft cloud and land shading in the source patch.

6.5 MB

GIF

The same patch as a GIF: the shading breaks into a few blotchy colors.

2.6 MB

Animated WebP (lossy)

The same patch as a lossy animated WebP: smooth, with some colors shifted slightly.

927.1 KB

APNG copy

The same patch as an APNG copy: identical to the source.

9.2 MB

GIF turns the soft shading into blotches. The lossy WebP looks smooth but shifts some colors a little. The APNG copy matches the source pixel for pixel in this patch. Sizes are for the complete files. · Photo: NASA, U.S. federal public domain, via NASA EPIC.

Animated WebP has two ways to save. Lossy, the converter's starting setting and the one used here, changes some colors a little to make the file smaller. Lossless keeps every pixel. Here's how WebP's lossless and lossy modes compare.

APNG is PNG with motion. It keeps every pixel exactly, which suits diagrams, pixel art and screenshots.

Which formats keep soft see-through edges?

A logo often sits on a page you don't control, so its edges matter. A soft shadow needs pixels that are partly see-through, and GIF doesn't have those: each GIF pixel is either solid or fully clear. Animated WebP and APNG can keep pixels partly see-through.

Here's one purple badge with a soft shadow, stored both ways and placed on a light page and a dark page.

Top row, GIF: the badge has a hard dark rim where its shadow was and a stepped outline, on both a light and a dark page. Bottom row, animated WebP or APNG: a smooth outline and a shadow that fades into both pages.

The same badge as a GIF and with soft edges

  1. Hard shadow rim

    As a GIF, the faint part of the shadow vanished and the darker part turned solid.

  2. Stepped outline

    The circle's smooth edge became a staircase of solid pixels.

  3. Soft shadow

    Partly see-through pixels let the shadow fade into either page.

Drawn for illustration with the rule FluffyBench's GIF converter applies: pixels more than half see-through become fully clear, and the rest become solid.

Will changing the format make the file smaller?

Here are the complete files from that Earth animation: the 6.5 MB APNG it started as, and the three copies FluffyBench made with its starting settings and no resizing.

Source APNG
6.5 MB
GIF
2.6 MB
Animated WebP (lossy)
927.1 KB
APNG copy
9.2 MB
Each bar is one whole file, on one scale. The APNG copy is the source saved again as APNG.

The lossy WebP came out at about a seventh of the source, and the GIF at about two-fifths. The APNG copy grew by about 40%, even though it kept the exact colors in the patch above. Lossless keeps the pictures exact; it doesn't promise a smaller file, because two programs can pack the same pixels with different effort. Here's why an image can get bigger after conversion.

Doing it in FluffyBench: convert, then check the loop

FluffyBench converts on your device, so nothing is uploaded. Use the WebP converter for animated WebP and the GIF converter for GIF. For APNG, open the GIF converter set to APNG and pick your animation's format under From.

Here's FluffyBench's WebP converter set up for an animation, on a phone. Compression and Quality are WebP settings; the GIF and APNG choices show their own.

  1. WebP converter intake with the Choose images button.
    WebP converter intake with the Choose images button.
    Step 1. On FluffyBench's WebP converter, choose your animation: a GIF, APNG or animated WebP.
    1. Choose images opens your files.
  2. The WebP settings gear in the workspace header.
    The WebP settings gear in the workspace header.
    Step 2. Open Settings with the gear marked WebP.
    1. Tap the gear to open Settings.
  3. Compression set to Lossy, with Lossless beside it.
    Compression set to Lossy, with Lossless beside it.
    Step 3. Pick how WebP stores the pictures.
    1. Lossy: a smaller file; some colors shift a little.
    2. Lossless: every pixel kept; a bigger file.
  4. The Quality slider at 92.
    The Quality slider at 92.
    Step 4. With Lossy, Quality sets how much the pictures may change.
    1. Quality starts at 92; lower numbers make smaller files that change more.
  5. Animated images set to Keep the animation.
    Animated images set to Keep the animation.
    Step 5. Leave Animated images on Keep the animation.
    1. Keep the animation saves every frame as an animated WebP.

Then close Settings, convert, and save the copy.

  1. The WebP settings gear, now showing WebP and 92%.
    The WebP settings gear, now showing WebP and 92%.
    Step 1. Close Settings with the same gear. It now sums up your choice.
    1. Tap the gear again to close Settings.
  2. Convert 1 to WebP button under the chosen animation.
    Convert 1 to WebP button under the chosen animation.
    Step 2. Press Convert. Everything happens on your device.
    1. Convert makes the animated WebP.
  3. The finished WebP with its size, an Animation kept label and the Download button.
    The finished WebP with its size, an Animation kept label and the Download button.
    Step 3. Check the size and the Animation kept label, then download the copy.
    1. The original's size, then the copy's.
    2. Animation kept: the copy still moves.
    3. Download saves the WebP to your device.

A preview shows one picture at a time, so check the copy in the place it's going before you share it.

Step 1: play the whole loop in the app or site where it's going. Step 2: look at its colors and edges on that page's background. Step 3: compare the copy's size with the original, then share the copy.

Three checks before you share

Converting saves a new copy. Keep your original until the copy passes all three checks.

Want to play the copy and count its frames before you share it?

Search FluffyBench