Since 2020, animation in emails has been a proven way to increase engagement metrics. Higher engagement metrics directly translate to better click-through rates. Previously, this animation space had been monopolized by GIFs. But, now, there is a new contender known as APNG.
What are Animated PNGs?
APNG or Animated Portable Network Graphics is a file format that extends animation support to a regular PNG file. While the animation looks similar to GIF, it has more features. APNG supports 8-bit transparency and 24-bit image, both of which are unavailable for GIFs. Moreover, APNGs have backward compatibility with other PNG files.
The first frame of the animation is stored as a PNG stream. The other animation frames and data for speed are stored in chunks. For this reason, even the most standard PNG decoders will be able to display the first frame of the APNG file.
How is APNG different from a GIF?
When you compare the file sizes, APNG has a much more manageable size compared to GIF. This is one of the reasons why APNG was created in the first place. However, an APNG file can get weighty when more PNG files are used to create a smoother animation.
Next, GIF supports 8-bit color gradients, which means that they can display a maximum of 256 colors. But a PNG can display millions of colors. APNGs use this feature of the PNG to display the full range of color depths. In layman’s terms, the GIF animations may come across as grainy or pixelated, while an APNG animation will have a crisper look. But again, as mentioned earlier, if you focus too much on quality, the APNG file can become pretty heavy.
In addition to that, GIFs can only handle transparency with one color. This is why you will notice a pixelated white line around the GIF. On the other hand, APNG supports 8-bit alpha transparency, which means they can handle transparency with 256 colors.
What are some of the issues with using APNG in emails?
You may be wondering, if the features of an APNG are so much better than GIFs, then why are they not used widely. Because, only recently, APNG got supported by major web browsers like Google Chrome and Safari. Furthermore, email clients like Gmail and Outlook.com still don’t support APNG in emails. Therefore, even if you are to use this format in your emails, it would have rendered as a simple PNG image. So, you can expect to see a massive spike in APNG usage in emails when all the email clients start providing the support for this format.
What are some examples of APNG in email?
- A’Moo’sing animation
While Moo is an eCommerce website that sells gifts with personalized messages, it might not be that obvious from their emails. As you can see below, they have used an APNG animation in their email to attract the reader’s attention. If you look closely, you can even count that a total of 5 frames were used to make the animation. Except for that small part, the rest of the email is a static image.
The CTA is placed above the animation and is relevant to the imagery used below. But, when you click on the button, it will redirect you to their website. While the email is not promoting anything, it does direct traffic towards their website. Even though the email looks fun, the effectiveness of this clickbait technique is going to reduce drastically with each subsequent campaign.
- Two-in-one Uber template
Most people prefer to use the APNG animation as the main object of their emails. But, the email marketing team of Uber did the opposite. They have used the APNG animation in the background of their email. The animation consists of two frames played in a loop. This significantly reduces the size of the emails and opens them faster in the reader’s email clients. Even if the animations were not rendered due to some reason, the reader would still get a festive background image.
The email copy also promotes the two major services of the company. In the first point, they have promoted their taxi service by asking the readers to book rides for their party guests. And, in the second point, they have promoted their food delivery app called UberEATS. Finally, their CTA button redirects you to their webpage.
- An APNG masterclass from Headspace
Most of the emails used by Headspace contain animations. But this email has an APNG animation that covers more than 70% of the visible page. Even the trees in the background are animated with a swaying motion. Such high-quality animation is only possible with an APNG file format.
But do you really need such a highly produced email to promote your product? The answer depends on the results of your test campaigns. For Headspace, they found that the more personality they infused in these marketing tools, the more responses they were getting on their qualitative metrics.
- TicTail tricks
Not all animated emails need to be as expansive and creative as the examples mentioned above. You can also use simple animations in your regular promotional email to insert more characters. TicTail has used this technique in their email template. The animation suggests the benefits that the readers will get by using referral codes. They also described the procedure in detail below the APNG animation to cover all the bases.
Conclusion
Except for Gmail, Gmail App, and Outlook.com, all the other email clients now support APNG files. Seeing the rise of APNG in many custom email templates, you can expect these platforms to modify their policies too. Therefore, if you want to create higher-quality templates, it’s time you explore APNG animations.
Author: Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.
Author: Kevin George is the head of marketing at Email Uplers, that specializes in crafting Professional Email 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 blog.
