Motion Effect Implementation - APNG/WebP Chapter

1. APNG/WebP Formats

APNG

APNG (Animated Portable Network Graphics) is a bitmap animation format based on PNG, with an extension method similar to GIF89a primarily used for the web, while maintaining backward compatibility with traditional PNG. The first frame is a standard single-frame PNG image, so software that only supports the original PNG can display the first frame normally. The remaining animation frames and frame rate data are stored in extended data blocks that comply with the original PNG standard.

APNG was introduced by Mozilla in 2004 with the aim of attempting to replace the GIF file format while adding features not available in GIF. In fact, as early as 1995, to avoid patent issues and Unisys's commercial licensing of the LZW data compression algorithm used in the GIF format, APNG's predecessor, the MNG animation format, was already born. Due to the complex structure of the MNG library, which consumed significant resources during use, early browser support was limited, with Chrome, IE, Opera, and Safari never supporting it. Even by 2007, APNG failed to achieve official standard certification. However, this did not stop Mozilla from continuing to support APNG.

WebP

WebP (pronounced "weppy") is an image format that offers both lossy and lossless compression. Derived from the VP8 video codec, it is considered a sister project to the WebM multimedia format. Developed by Google after acquiring On2 Technologies, it is released under the BSD license.

WebP was introduced by Google in 2010 with the intention of changing the web image landscape dominated by JPG, PNG, and GIF. It supports not only lossless or lossy compression and alpha channels but also animation. Currently, among web browsers, Google Chrome and Opera natively support both static and dynamic WebP formats, with Google Chrome supporting progressive decoding of WebP since version 12. Additionally, mobile devices running Android 4.0 and above also support WebP images.

2. Advantages and Disadvantages of APNG/WebP

Advantages of APNG/WebP

1. Image Quality

Compared to GIF, APNG/WebP formats not only support transparent pixels.

Moreover, images in APNG/WebP formats do not have white edges.‍‍

2. File Size

GIF uses the LZW compression algorithm, while APNG employs the Deflate compression algorithm, and WebP uses intra-frame coding based on the VP8 video format, with RIFF as the container format. Under the same conditions, APNG/WebP files are smaller in size and offer better quality.

3. Color

GIF reproduces true-color images with 8-bit color (256 colors), whereas APNG/WebP supports 24-bit true color (16.7 million colors), capable of carrying richer color details than GIF.

Disadvantages of APNG/WebP

Compatibility

GIF is supported by almost all browsers, while APNG/WebP has much poorer compatibility. Currently, APNG is natively supported only by Firefox, Opera, and iOS 8 and above. WebP is supported only by Opera, Chrome, and Android.

3. Installation Methods for Both Approaches

BX-WebP/Apng Exporter Plugin

1. First, download the BX-WebP/ApngExporter file.

2. Download the ZXP installer tool according to your operating system.

https://aescripts.com/learn/zxp-installer/

3. Then drag the BX-WebP/ApngExporter.zxp file into the installer (or select the file via File -> Open) to install it.

iSparta

Download the iSparta installation package and install it directly according to your system.

4. Practical Demonstrations of Both Methods

BX-WebP/Apng Exporter Plugin

1. Open the composition you want to export in AE and set the frame rate in the composition.

2. Find and run the installed "BX-WebP/ApngExporter" under "Window" -> "Extensions" in the AE toolbar.

3. Select the export format and corresponding export path (click "WebP Path" or "APNG Path" to choose).

4. Set the image quality, an integer between 0-100. Higher values mean better quality but larger file sizes.

5. Set the loop count, an integer where 0 means infinite looping.

iSparta

1. Export the animation from AE: File -> Export -> Add to Render Queue -> Select PNG sequence (default is QuickTime) and save to an easily accessible location.

2. Open iSparta, locate the saved sequence files, select all PNG files, and drag them into iSparta.

3. Set the output settings, ensuring the frame rate matches the animation frames to avoid errors.

4. Choose the loop count, where 0 means infinite looping.

5. Give your file a cool and meaningful name, just like mine.

6. Select the output format by checking or unchecking "WebP Path" or "APNG Path".

7. Set the image quality, an integer between 0-100. Higher values mean better quality but larger file sizes.

Summary

We often complain about GIFs for their poor quality, white edges, large file sizes, and lack of transparent pixels. However, APNG/WebP formats pose significant challenges for server storage. We cannot abandon existing formats, as this would drastically increase data storage. Converting on demand is inefficient, especially for large PNG files, which are very slow to process. Additionally, the compatibility limitations of APNG/WebP are major pain points in practical use.

Ultimately, we should choose formats based on specific scenarios. As for animations, they are a double-edged sword—they can bring innovation but also increase product load. As designers, we should plan our creativity carefully to ensure smooth product performance while delighting users.