![]() ![]() 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 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. On the Message tab, in the Move group, click Actions, and then click View in Browser.Animated imagery is one of the top email design trends for 2019. View an e-mail message in your Web browser (Outlook 2016 or Outlook 2013) Or, you can view the email message in your browser. Click the search result and under Simplify and personalize Windows, enable Show animations in Windows. If you have Outlook for Office 365, version 2008 or higher, use Windows 10 to enable animated GIFs.Ĭlick Start and type Show animations. In the Display section, check the box to Play animated GIFs. In Outlook for Office 365 before version 2008, select File > Options > Advanced. You can enable animated GIFs in Outlook by doing one of the following: If only the first frame of the animation appears, you have animations, or animated GIFs, disabled. Causeīy default, Outlook plays animated graphics in the body of email messages. When you receive an e-mail message that contains animated graphics, such as animated. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |