Animated PNG (APNG) is a raster image format that brings motion to the classic PNG file. It supports full colour depth, smooth transparency, and lossless compression, which makes it a strong choice for situations where vector animation formats like SVG are not an option, such as animated stickers, email signatures, or platforms that only accept raster images.
This guide covers what APNG is, how the format works, where it is commonly used, how it compares to other animation formats, and how to create them.
Table Of Content
How Does The APNG Format Work?
Advantages Of Using Animated PNG Over Other Formats
APNG vs GIF vs WebP: Animated Image Formats Compared
Where To Use Animated PNG Files
Browser Support For Animated PNG
How To Create Animated PNG Files In SVGator
What Is Animated PNG (APNG)?
Animated PNG (APNG) is an extension of the Portable Network Graphics (PNG) specification that allows multiple image frames to be stored within a single file and displayed in sequence, producing animation. The format supports 24-bit colour (16.7 million colours) and full 8-bit alpha transparency for smooth, semi-transparent edges.
The format was first proposed by Stuart Parmenter and Vladimir Vukicevic at Mozilla Corporation in 2004. Their goal was to create a PNG-based animation format that could replace GIF for common use cases like animated icons, loading indicators, and short visual loops. Unlike GIF, which is limited to 256 colours and binary transparency, APNG retains the full PNG colour space and produces visually cleaner results at comparable or smaller file sizes.
How Does The APNG Format Work?
An APNG file is built on the same structure as a standard PNG file, with a few extra pieces that make animation possible. A regular PNG stores a single image. An APNG extends that by adding frame data and playback instructions directly inside the file.
Every APNG file contains three key components that control the animation:
- Animation control data - This tells the browser that the file is animated, how many frames it contains, and how many times the animation should loop. A loop count of zero means the animation repeats indefinitely.
- Frame control data - Each frame has its own set of display instructions: width, height, position on the canvas, delay time before the next frame appears, and how the frame interacts with the previous one.
- Frame image data - This is the actual visual content of each frame, compressed using the same lossless method as standard PNG. This means every frame retains full image quality with no degradation.
The frame control data includes two important settings worth understanding. The disposal method determines what happens to the canvas before the next frame is rendered. The frame can stay visible (so the next frame draws on top), be cleared to transparent, or be reverted to its previous state. The blend operation controls whether a new frame completely replaces the canvas content or composites on top of it using alpha blending.
One of the most useful technical details of the APNG format is that the frame rate is not fixed globally. Each frame has its own individual delay value, which allows variable timing within a single animation. This makes it possible to create effects like pauses, slow reveals, or sequences that speed up or slow down without needing separate files.
Advantages Of Using Animated PNG Over Other Formats
Animated PNG offers several technical advantages over other animated image formats. These advantages make APNG particularly well-suited for use cases where image quality, transparency, and file efficiency matter.
- Full colour support - APNG supports 24-bit colour depth, which means up to 16.7 million colours per frame.
- Alpha transparency - APNG supports full 8-bit alpha transparency, allowing smooth semi-transparent edges and partial opacity effects.
- Lossless compression - APNG uses the same deflate compression as standard PNG, which is lossless. This means no image quality is lost when the file is saved, re-opened, or re-exported.
- Smaller file size for equivalent quality - For animations with similar visual complexity, APNG files are typically smaller than their GIF equivalents. The combination of a larger colour palette and more efficient compression reduces the need for dithering, which in turn reduces file size.
- Backwards compatibility - An APNG file is a valid PNG file. Browsers or applications that do not support APNG will display the first frame as a static PNG image. This graceful fallback behaviour makes APNG safe to deploy in mixed-support environments.
- No external dependencies - An APNG file is a single, self-contained file. It requires no external player libraries, JavaScript, or additional assets to display the animation. This simplicity makes it easy to share, embed, and integrate across platforms.
- Smooth gradients and transitions - Because APNG supports millions of colours and alpha blending, gradient transitions render cleanly without the colour banding or dithering artefacts.
APNG vs GIF vs WebP: Animated Image Formats Compared
Choosing the right animated image format depends on the specific requirements of your project. Each format has strengths and trade-offs in terms of colour depth, transparency, compression efficiency, and browser compatibility. The table below provides a direct comparison between APNG, GIF, and WebP.
| Feature | APNG | GIF | WebP |
| Colour Depth | 24-bit (16.7M colours) | 8-bit (256 colours) | 24-bit (16.7M colours) |
| Transparency | Full alpha (8-bit) | Binary only (on/off) | Full alpha (8-bit) |
| Compression | Lossless (deflate) | Lossless (LZW) | Lossy or lossless (VP8) |
| File Size Efficiency | Good | Poor (due to dithering) | Excellent (lossy mode) |
| Animation Support | Yes (variable frame delay) | Yes (fixed frame delay) | Yes (variable frame delay) |
| Browser Support | All modern browsers | Universal | All modern browsers |
| Best Use Case | High-quality animated graphics with transparency | Simple animations, memes, social media | Web images where smallest file size is priority |
For a comprehensive deep-dive into how all major raster formats compare, including JPEG and static PNG, read the full GIF vs PNG vs JPEG vs WebP: raster image format guide.
If you are also considering vector-based animation formats like SVG or Lottie, the raster vs vector comparison explains the fundamental differences between the two approaches and when each one is the better fit.
Where To Use Animated PNG Files
Animated PNG files are versatile enough to work across a wide range of digital contexts. The combination of high colour depth, alpha transparency, and lossless quality makes APNG suitable for both web and non-web use cases. Below are the most common applications.
- Email signatures and campaigns - An animated logo or visual accent in an email signature adds a professional touch. However, email client support for APNG varies. Apple Mail and Thunderbird render APNG correctly, while Gmail and Outlook display the static first frame as a fallback.
- Social media content - Animated stickers, profile elements, and short visual loops can be created as APNG files for platforms that support the format. The quality advantage over GIF is especially visible in animations with gradients, shadows, or transparent elements.
- Discord and messaging platforms - Discord supports APNG for custom server stickers and emotes. APNG’s alpha transparency produces cleaner edges and smoother blending than GIF stickers, which is particularly noticeable at small display sizes.
- Presentations - Animated diagrams, process visualisations, and data chart reveals can be exported as APNG files and embedded in presentation tools that support animated images. This approach adds visual interest without requiring embedded video files.
- Ecommerce - Product rotation animations, feature highlight sequences, and promotional banners benefit from APNG’s ability to display photographic-quality animation with transparency. This is especially useful for product images that need to appear on different background colours across a website.
For use cases that require interactivity (click, hover, or scroll triggers), vector-based SVG animation is a better fit.
Browser Support For Animated PNG
Animated PNG is supported by all major modern web browsers. The format has reached near-universal browser compatibility, which makes it a reliable choice for web projects.
The current browser support for APNG is as follows:
- Google Chrome: supported since version 59 (June 2017)
- Mozilla Firefox: supported since version 3 (June 2008), the earliest adopter
- Apple Safari: supported since version 8 (October 2014)
- Microsoft Edge: supported since version 79 (January 2020, Chromium-based)
- Opera: supported since version 46 (June 2017)
Beyond web browsers, APNG is also supported on iOS (Safari and Messages), Android (Chrome and many image viewing apps), macOS (Preview and Quick Look), and major image processing platforms. This broad cross-platform compatibility means APNG files can be used consistently across web, mobile, and desktop environments.
From a development perspective, APNG is a strong candidate for progressive enhancement. You can safely use APNG as the primary animated image format, knowing that unsupported environments will receive a clean static PNG fallback with no broken images or error states.
How To Create Animated PNG Files In SVGator
SVGator can export animations as APNG files with full transparency support and customisable frame rate settings. The entire workflow happens with no coding required. You can create animated PNG files online in three straightforward steps.
1. Draw Your Design
Start by creating your artwork directly in SVGator using the built-in shape tools, pen tool, and boolean operations, or import an existing SVG file from Figma, Adobe Illustrator, or Sketch. You can also upload static PNG images and use them as elements within your animation. SVGator’s asset library provides a collection of ready-made vector elements that can speed up the design process.
2. Animate
Select the elements you want to animate and add animators from SVGator’s animation panel. Available animators include Position, Scale, Rotate, Opacity, Morph, Fill Colour, Stroke Offset, and Filters. Place keyframes on the timeline to define the start and end states of each animation. Adjust the timing by dragging keyframes, and apply easing presets to control the motion curve between keyframes.
3. Export Your Animated PNG
Once your animation is complete, click Export and select Animated PNG (APNG) as the output format. Configure the export settings to match your requirements.
SVGator renders the APNG file using fast cloud rendering, which means you do not need any local processing power.
How to create an animated PNG (APNG) | SVGator tutorial
Final Thoughts
Animated PNG (APNG) is a versatile, high-quality image format that fills the gap between static PNG images and full video content. It outperforms GIF in every technical dimension that matters for modern design work: colour depth, transparency, compression efficiency, and visual smoothness.
If you are ready to create your own animated PNG files, SVGator’s online APNG maker provides a complete workflow for designing, animating, and exporting production-ready APNG files directly in your browser.
FAQ
Is APNG the same as PNG?
APNG is based on PNG, but they are not the same. A standard PNG file contains a single static image. An APNG file extends the PNG format by embedding additional frame data and animation control chunks that allow multiple images to be displayed in sequence. Every APNG file is a valid PNG file, which means applications that do not support APNG will simply display the first frame as a static image.
What is the difference between APNG and GIF?
The main differences between APNG and GIF are colour depth and transparency quality. APNG supports 24-bit colour (16.7 million colours) and full 8-bit alpha transparency, while GIF is limited to 256 colours and binary (on/off) transparency. APNG also produces smaller file sizes for animations of equivalent visual quality because its compression is more efficient and it does not require dithering to simulate colours outside its palette.
Does APNG support transparent backgrounds?
Yes. APNG supports full 8-bit alpha transparency, which means each pixel can have 256 levels of transparency. This allows smooth, semi-transparent edges, soft shadows, and partial opacity effects. GIF, by comparison, only supports binary transparency where each pixel is either fully visible or fully transparent, which results in jagged edges on non-rectangular shapes.
Are APNG files larger than GIF files?
In most cases, APNG files are actually smaller than equivalent GIF files. This is because APNG’s larger colour palette eliminates the need for dithering (the process of simulating colours by mixing available palette colours), which adds visual noise and increases file size in GIF. For animations with gradients, photographic content, or semi-transparent elements, APNG produces significantly smaller and cleaner files.
