The Complete Guide to Transparent Video: WebM, APNG, MOV, and Spritesheets

Transparent video is one of those things that sounds simple until you actually try to implement it. Then you discover that WebM does not work on Safari, APNG files can get huge, MOV files do not play in browsers, and spritesheets require JavaScript. Each format has a legitimate use case. Understanding which one to reach for, and when, saves hours of debugging.

This is the complete breakdown: what each format is, where it works, how to implement it, and what the trade-offs look like in practice.

What Is Transparent Video?

Standard video formats like MP4 use three colour channels: red, green, and blue. Transparent video adds a fourth channel: alpha. The alpha channel stores opacity information for every pixel, just like a PNG image. This lets you place an animated character over any background without a visible rectangle around it.

This is exactly what makes animated mascots work well in apps and websites. Without transparency, you need to know the background colour at design time and hard-code it into the animation. With transparency, the character floats naturally over whatever is behind it, whether that is a white screen, a dark card, or a full-bleed photo.

Format 1: WebM VP9 (Android and Chrome)

WebM with the VP9 codec supports an alpha channel and is the best option for Android apps and any Chromium-based browser. File sizes are excellent, quality is high, and the format handles video compression well, which means animated characters look smooth without bloated file sizes.

Where it works: Chrome, Edge, Firefox, Android WebView, Android apps via MediaPlayer or ExoPlayer.

Where it does not work: Safari (desktop and iOS). This is the critical gap. Any user on an iPhone or Mac using Safari will see a broken or blank video element if you only provide WebM.

Implementation in HTML

<video
  autoPlay
  loop
  muted
  playsInline
  style={{ background: 'transparent' }}
>
  <source src="/mascot.webm" type="video/webm" />
  <source src="/mascot.apng" type="image/apng" />
</video>

The browser picks the first source it can play. Chrome picks the WebM. Safari skips it and plays the APNG fallback. This two-source pattern handles cross-browser transparent video with a single video element.

Format 2: APNG (iOS and Safari)

APNG (Animated PNG) is the format Safari and iOS will actually play with transparency. It is technically an image format, not a video format, which means it lacks video compression. Each frame is stored as a full PNG image. This makes APNG files larger than equivalent WebM files, sometimes significantly larger.

Where it works: Safari (desktop and iOS), Chrome, Firefox, Edge. Essentially everywhere except very old Internet Explorer.

Trade-off: File size. A 3-second animation that is 400kb as WebM might be 2MB as APNG. For a mascot that plays on app launch, this matters. Keep animations short and optimise the APNG with tools like apngopt or ImageMagick to reduce frame count where possible.

Implementation in a React component

import Image from 'next/image'

// APNG works as a regular <img> tag on all modern browsers
export function MascotWave() {
  return (
    <img
      src="/mascot-wave.apng"
      alt="Mascot waving"
      width={200}
      height={200}
      style={{ background: 'transparent' }}
    />
  )
}

Note: Next.js Image optimisation will break APNG animation by converting the file to a static image. Use a standard HTML img tag or an unoptimised Next.js Image for animated APNGs.

Format 3: ProRes MOV (Professional Production)

Apple ProRes 4444 is a professional video codec that supports an alpha channel with lossless quality. It is used in broadcast, film, and motion graphics workflows where quality is non-negotiable and file size is not a concern.

Where it works: macOS apps, Final Cut Pro, After Effects, DaVinci Resolve, Adobe Premiere. Anywhere in a professional media pipeline.

Where it does not work: Browsers (without additional software), Android, Windows without codec packs. This format is not for web or mobile delivery.

Use ProRes MOV when you are delivering a mascot animation to a motion designer who will composite it into a video, or when you need the highest possible quality for broadcast work. For app and web delivery, WebM and APNG are the right tools.

Format 4: Spritesheets (Games and Complex UIs)

A spritesheet packs all animation frames into a single image file, arranged in a grid. Your code steps through the frames at a defined frame rate, producing animation. This approach has been the standard in game development for decades.

Where it works: Everywhere. Spritesheets are just PNG files. Any platform that can display an image and run JavaScript or a game engine can use a spritesheet.

When to use it: Games (Unity, Godot, Phaser), performance-critical UIs where video decode overhead matters, situations where you need frame-level control over the animation (pause on a specific frame, play in reverse, etc.).

CSS spritesheet animation

/* Assuming 8 frames in a row, each 200x200px */
.mascot-sprite {
  width: 200px;
  height: 200px;
  background-image: url('/mascot-spritesheet.png');
  background-repeat: no-repeat;
  animation: play-mascot 0.8s steps(8) infinite;
}

@keyframes play-mascot {
  from { background-position: 0px 0px; }
  to   { background-position: -1600px 0px; }
}

JavaScript spritesheet controller

function SpriteAnimation({ src, frameCount, fps = 12 }: {
  src: string
  frameCount: number
  fps?: number
}) {
  return (
    <div
      style={{
        width: 200,
        height: 200,
        backgroundImage: `url(${src})`,
        backgroundRepeat: 'no-repeat',
        animation: `sprite-play ${frameCount / fps}s steps(${frameCount}) infinite`,
      }}
    />
  )
}

Browser Compatibility at a Glance

File Size Comparison

For a typical 3-second mascot animation at 30fps and 400x400px resolution:

Which Format Should You Use?

For most web and mobile app use cases, the answer is: WebM as the primary source, APNG as the fallback. This covers every browser and platform with the best available quality and file size for each.

Use spritesheets when you need frame-level control or are working in a game engine. Use ProRes MOV only when delivering source files to a video production workflow.

MascotVibe exports WebM and APNG automatically with every animation, so you get both formats without any manual conversion. See the full mobile implementation guide for platform-specific code for React Native, Flutter, and Unity.