Humans have been fascinated with the concept of animation since the early 1900s. “Humorous Phases of Funny Faces” is a silent cartoon by J. Stuart Blackton released in 1906 and the first animated film ‘Fantasmagorie’ was released on August 17, 1908. With the widespread use of computers for creating computer animation in the early 1960, the opportunity for different computer graphics rose.
On June 15, 1987, Compuserve released the Graphical Interface Format (.gif) that supported displaying multiple frames within a single image and that kickstarted the fascination of creating animations in the digital format. GIFs were a great step up from the static images and enabled the ability to include movement but it had its flaws. GIFs didn’t support transparency and 8-bit colors. So, any transparent portion was automatically filled with white color which made the edges jagged.
Inception of APNG
PNG is a digital file format that was created in December 1994 and it supported transparency for up to 24-bit color range but didn’t support animation via frames. Fast forward ten years later, in 2004, Stuart Parmenter and Vladimir Vukićević of the Mozilla Corporation created the APNG specification which allowed storing the animations needed for interfaces such as the loading circle you may have seen in most websites during loading.
In 2017, APNG entered mainstream use as Animojis in Apple iMessage app when Apple iPhone X was released.
As you can see in the above example, APNG is similar to animated GIFs but the difference lies in the quality of animation with the inclusion of 24bit transparency. The popularity of APNG has led marketers and email developers to adopt this in their custom email templates.
Read also: Find Your Images Online Using Reverse Image Search!
Advantages of using APNG in emails
Since APNG supports 24-bit color mode, it means that the images support displaying 224 = 16 million colors and unlimited frame rates. On the other hand, GIF only supports 8-bit color mode so the support is limited to 28 = 256 colors and only 10 frames per second. This means while using GIFs, you can observe color banding and choppier animation.
In the example above, the shadows behind the guy get distorted when saved in the GIF format.
In the example above, as the light beam moves across the surface, it is evident that the colors are not distorted and maintain the aesthetics. Moreover, the animation looks smoother compared to the GIF.
However, with greater support for a wide color spectrum and unlimited frame rates, the overall file size increases significantly and can mean longer loading times. These shortcomings can be overcome by better compression behavior that can reduce the file size without compromising on the quality.
How compatible are APNG in emails?
Thankfully most popular email clients support APNG in emails. A quick glance through the caniemail.com compatibility list shows that only APNG is not supported in the Windows system. So emails sent to Outlook.com and Gmail do not currently support APNG animations. Thankfully, the unsupported email clients display the first frame as a static image, so you only need to ensure that the first frame is not left blank.
Apple devices support APNG in all their devices. Hence, if the major subscriber base of an email marketing agency is Apple users, it is a great time to try APNG in your emails.
In a nutshell, the compatibility list for APNG is:
Supported
- Apple Mail
- iOS Mail
- Samsung Mail
- Outlook (MacOS)
- com (Depends on Browser)
- com app (iOS)
- AOL (Depends on Browser)
- AOL app
- Yahoo (Depends on Browser)
- Yahoo app
Not Supported
- Gmail
- Gmail app
- Outlook (Windows)
How to Create APNG Animations?
Currently, individual frames in an APNGs need to be saved as PNG and then stitched together using 3rd party tools such as PNG animator or Animated PNG maker from ezgif.com.
In the case of Adobe Animate, the animation needs to be exported as a Movie with PNG sequence enabled whereas for Adobe Photoshop, you also need to enable the “Straight – Unmatted” option from the “Alpha Channel” dropdown to ensure transparency is maintained.
Upload the output PNG files to any of the two tools and ensure compressions are enabled. Voila! The final output APNG is ready to be included in your email template design.
Industry Applications of APNG in Emails
- Fashion
- eCommerce
- Send one-off greetings
- Email Newsletters
- Travel and Hospitality
- Non-profit Organizations
Wrap Up
APNG standards were created in 2004 but it took 13 years for them to be used on a commercial scale. This doesn’t mean that it is an end for Animated GIFs. They are still great for creating cinemagraphs and playing a short clip from a video. Adoption of APNG means that email marketers have a new rich media format to experiment in their HTML email templates to delight their audience base.
Author Bio
Kevin George is the head of marketing at Email Ulpers, which specializes in crafting Email Newsletter Design Templates, PSD to Email Conversion, and Mailchimp Templates. Kevin loves gadgets, bikes & jazz, and he breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on email marketing blogs.
