HTML Elements

Page 6

Animated PNG

Introduction Animated PNG Animated PNG Markup Summary

Dakru Design Logo: APNG Format

Introduction

This page discusses APNG animations for the Web. We cover how to prepare an animated PNG file with the APNG Assembler application. Notice the beautiful colors in the Dakru Design Logo on this page. It's difficult to display the same color range with animated GIF files.

If the animation, above, doesn't run, then your browser doesn't support the APNG format. However I assigned the animation to run one loop each time you load the page. Therefore you might have to reload this Web page to see the animation.

Animated PNG

Most of us have seen animated GIF files. They're lightweight and include transparency. However animated GIFs require indexed, or 8 bit files. Use the search icon above, to find the Indexed Color Animation Tutorial, on this Website, for indexed file details.

Animated PNG files are also lightweight and include transparency yet they support 24 bit depth with 8 bits of alpha transparency, or 32 bits of pixel depth total.

Comparison

For comparison, I created the United States animation as both an animated GIF and an APNG file. The animated GIF file weighs 100KB. The APNG file is 324KB. The compression seems almost equivalent to the animated GIF compression. APNG animations display three times the color depth and, at least in this particular example, weigh a little over three times the size.

Unfortunately fewer browsers and devices support APNG, at this time, than WebP. See the previous page to learn about WebP files. However w3Schools cover APNG files, so perhaps they're gaining some traction.

APNG ASM

I downloaded and ran the very simple APNG Assembler 2.91 executable from APNG Assembler download. I'm not recommending the application yet, but it seems to work fine. Just unzip the zip file. You'll have a directory with an executable file named, apngasm_gui.exe, and a readme.txt file.

Run apngasm_gui.exe
Drop a series of files into the Frame window.
Enter a filename in the Output file box. I chose the file extension .apng.
Click the ... button to select an output file location.
Select the Make Animated PNG button.
Place your .apng file within an image tag and it seems to work just fine.

Animated PNG Markup

The following HTML markup places the APNG file within a figure tag and adds a caption.

<figure>

<img 
src="dakru-3d.apng" 
alt="Dakru Design Logo: APNG Format" 
>

<figcaption>
Dakru Design Logo: APNG Format
</figcaption>

</figure>

Graphics Source

The Dakru Design animated logo went through quite a few steps as I experimented with a few technologies. At one point in time the logo was interactive. The user could swipe over the logo to make it rotate and move. The text consists of translucent overlapping layers of color.

Summary

This page discussed APNG animations for the Web. We covered how to prepare an animated PNG file with the APNG Assembler application. Notice the beautiful colors in the Dakru Design Logo on this page. It's difficult to display the same color range with animated GIF files. See the previous page for information about WebP animations.