use the magic of apng in emails
Humans have been fascinated with the concept of animation since the early 1900’s. “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 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 was 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.

convert transparent gif to png 3 original
https://ya-webdesign.com/image/convert-transparent-gif-to-png/657400.html

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.

loading gifIn 2017, APNG entered mainstream use as Animojis in Apple iMessage app when Apple iPhone X was released.

elephant apng
https://apng.onevcat.com/assets/elephant.png
As you can see in the above example, APNG are similar to animated GIFs but the difference lies in the quality of animation with 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 millions 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.

Say What Dan-O GIF By TheMacnabs
https://giphy.com/gifs/TheMacnabs-themacnabs-dano-say-whaaaat-SwUFWEbOwrCPr3B9J5
In the example above, the shadows behind the guy get distorted when saved in the GIF format.

light beam moves across the surfaceIn 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 support apng
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 it 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 avatarKevin George is the head of marketing at Email Uplers, that 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.

Related Titles:

Email Marketing of Tobacco Companies
Email Marketing of Tobacco Companies
What Types of Emails Does B2C Need
What Types of Emails Does B2C Need
A 9-Step Guide to Creating a Successful Email Marketing Campaign
A 9-Step Guide to Creating a Successful Email Marketing Campaign
The Importance of Superior Contact Information and Reliable Email Servers
The Importance of Superior Contact Information and Reliable Email Servers