#Animated sequential lights gif full#
#Animated sequential lights gif portable#

Many popular email clients offer full support for APNGs. And even more significantly, email client support for animated PNGs has actually overtaken support for CSS animation in recent years. But in the context of this project, the amount of CSS involved for each graphic would have resulted in an email that was too code-heavy. We considered an alternative tactic to address this issue by animating a sprite-sheet of PNGs using CSS animation keyframing. Animated PNGs, on the other hand, handle the challenge of transparency perfectly. Had we used a GIF, you’d see those white edges around our illustrations, which would have looked messy and exposed our hidden graphics when the lights were on. When a subscriber “switched the lights off,” those background colors changed and-surprise-made our spooky animations visible! Purple ghosts on the transparent background are invisible until the background color changes.įor this trick to work, the animations had to live on a transparent background-and that’s exactly why using GIFs wasn’t an option for us. To hide the animations in the bright version of the email, we designed them in the very same color as the background they were placed on in the bright version. Plus, for extra spookiness, we decided to include some animation to make scary eyes blink in the dark, ghosts hover and goo ooze-but only when the lights are turned off. Why would you want to use an animation over a transparent background, you ask? Transparency and animations in Email: APNGs in Litmus’ October newsletterįor our Halloween-themed October newsletter this year, we wanted to give our readers the opportunity to “switch off the lights,” changing the email from a bright design to a dark and spooky one. GIFs handle transparently poorly, applying a rough white edge around elements when set on a transparent background: Plus, in contrast to GIFs, APNGs allow you to work with transparency. If you’re using many of them to create an APNG, the large file sizes can negatively impact your email loading times. If you don’t carefully watch your file sizes, PNGs can become quite large. That gives your images a crisper look-especially when you’re using photography with a broad range of colors-but higher quality always comes at a cost. So compared to the limited colors of a GIF that often give animations a low-quality look, APNGs let you use the full range of color depths. The PNG-24 format is able to display millions of colors. The PNG-8 format is similar to GIFs in that they are saved with 256 colors maximum. There are two types of PNG formats: PNG-8 and PNG-24. So to understand what makes an APNG special, it’s key to understand the characteristics of a simple PNG. Reasons to use APNGs in emailĪn animated PNG is exactly what the name suggests: a collection of PNGs that are combined to introduce movement.

#Animated sequential lights gif portable#

Animated Portable Network Graphics-or APNGs-are an option you might want to explore, too. Email marketers everywhere are looking to add movement to their campaigns-and the most popular way of doing that is by using the power of animated GIFs.īut animated GIFs aren’t the only file type that allows you to add movement to imagery.

Animated imagery is one of the top email design trends for 2019.