PNG animés dans les e-mails : une alternative aux GIF ?

L'imagerie animée est l'une des principales tendances en matière de conception d'e-mails pour 2019 . Partout dans le monde, les spécialistes du marketing par e-mail cherchent à ajouter du mouvement à leurs campagnes, et la façon la plus populaire de le faire est d'utiliser la puissance des GIF animés.

Mais les GIF animés ne sont pas le seul type de fichier qui vous permet d'ajouter du mouvement aux images. Les graphiques réseau portables animés, ou APNG, sont également une option que vous voudrez peut-être explorer.

Raisons d'utiliser les APNG dans les e-mails

Un PNG animé est exactement ce que son nom suggère : une collection de PNG qui sont combinés pour introduire le mouvement. Donc, pour comprendre ce qui rend un APNG spécial, il est essentiel de comprendre les caractéristiques d'un simple PNG.

Il existe deux types de formats PNG : PNG-8 et PNG-24. Le format PNG-8 est similaire aux GIF dans la mesure où ils sont enregistrés avec 256 couleurs maximum. Le format PNG-24 est capable d'afficher des millions de couleurs. Ainsi, par rapport aux couleurs limitées d'un GIF qui donnent souvent aux animations un aspect de mauvaise qualité, les APNG vous permettent d'utiliser toute la gamme de profondeurs de couleurs . Cela donne à vos images un aspect plus net, en particulier lorsque vous utilisez une photographie avec une large gamme de couleurs, mais une qualité supérieure a toujours un coût. Si vous ne surveillez pas attentivement la taille de vos fichiers, les fichiers PNG peuvent devenir assez volumineux. Si vous en utilisez plusieurs pour créer un APNG, les fichiers volumineux peuvent avoir un impact négatif sur le temps de chargement de vos e-mails.

De plus, contrairement aux GIF, les APNG vous permettent de travailler avec transparence . Les GIF se gèrent mal de manière transparente, appliquant un bord blanc rugueux autour des éléments lorsqu'ils sont définis sur un fond transparent :

Pourquoi voudriez-vous utiliser une animation sur un fond transparent, demandez-vous ?

Transparence et animations dans les e-mails : APNGs in Litmus's newsletter d'octobre

Pour notre newsletter d'octobre sur le thème d'Halloween cette année, nous voulions donner à nos lecteurs la possibilité « d'éteindre les lumières », en changeant l'e-mail d'un design lumineux en un design sombre et effrayant. De plus, pour encore plus de chair de poule, nous avons décidé d'inclure une animation pour faire clignoter des yeux effrayants dans le noir, des fantômes planer et suinter, mais uniquement lorsque les lumières sont éteintes.

Pour masquer les animations dans la version lumineuse de l'e-mail, nous les avons conçues dans la même couleur que l'arrière-plan sur lequel elles ont été placées dans la version lumineuse. Lorsqu'un abonné « éteignit les lumières », ces couleurs d'arrière-plan changeaient et, surprise, rendaient nos animations effrayantes visibles !

Pour que cette astuce fonctionne, les animations devaient vivre sur un fond transparent - et c'est exactement pourquoi l'utilisation de GIF n'était pas une option pour nous. Si nous avions utilisé un GIF, vous verriez ces bords blancs autour de nos illustrations, qui auraient semblé désordonnés et auraient exposé nos graphiques cachés lorsque les lumières étaient allumées. Les PNG animés, en revanche, relèvent parfaitement le défi de la transparence.

Nous avons envisagé une tactique alternative pour résoudre ce problème en animant une feuille de sprite de PNG à l'aide de l' animation CSS . Mais dans le contexte de ce projet, la quantité de CSS impliquée pour chaque graphique aurait abouti à un e-mail trop chargé en code. Et plus important encore, la prise en charge des clients de messagerie pour les PNG animés a en fait dépassé la prise en charge de l'animation CSS ces dernières années.

Assistance client de messagerie pour les APNG

De nombreux clients de messagerie populaires offrent une prise en charge complète des APNG. Les exceptions les plus gênantes sont Gmail (à la fois le client de messagerie Web et les applications mobiles), Outlook.com et Outlook sous Windows. Ces clients de messagerie n'affichent que la première image de l'animation.

Les fichiers PNG animés sont entièrement pris en charge dans :

• Courrier Apple
• iOS
• Courrier Samsung
• Outlook (MacOS)
• Outlook.com
• Application Outlook.com
• AOL
• Application AOL
• Yahoo
• Application Yahoo

Seule la première image s'affiche dans :

• Gmail
• Application Gmail
• Outlook (Windows)

Comment créer des PNG animés pour vos campagnes email

Il n'est actuellement pas possible d'enregistrer des animations au format APNG à partir de logiciels tels qu'Adobe Photoshop ou Adobe Animate, vous aurez donc besoin d'outils supplémentaires pour créer vos animations. Voici comment nous avons créé les PNG animés pour notre newsletter :

1. Créez votre animation dans Adobe CC et enregistrez chaque image au format PNG

Nous utilisons Adobe Animate pour créer nos animations, qu'il s'agisse d'un GIF ou d'un APNG. La différence, cependant, est qu'Adobe Animate n'offre pas d'option native pour exporter un fichier APNG. Au lieu de cela, vous devrez exporter chaque image en tant que fichier PNG unique. Après avoir créé votre animation, allez dans Exporter > Exporter le film et sélectionnez "Séquence PNG" dans le menu déroulant.

Le processus dans Photoshop est très similaire. Allez dans Fichier > Exporter > Rendu vidéo . Dans le volet Rendu vidéo , sélectionnez « Séquence d'images Photoshop » dans la liste déroulante et choisissez PNG comme format. Vous devez faire une étape supplémentaire pour vous assurer que vos pngs sont transparents : dans la zone Options de rendu , sélectionnez « Straight - Unmatted » dans la liste déroulante « Alpha Channel » . Une fois que vous avez sélectionné où vous souhaitez enregistrer vos images, appuyez sur le bouton Rendu .

2. Combinez vos PNG individuels dans un APNG

Il est maintenant temps d'assembler vos fichiers image individuels dans un APNG !

PNG animator est un excellent logiciel que vous pouvez acheter pour un petit prix sur l'App Store d'Apple si vous êtes un utilisateur du système d'exploitation. Une alternative gratuite est le créateur de PNG animé de ezgif.com qui offre des fonctionnalités similaires.

Nous avons choisi d'utiliser l'outil en ligne pour compléter nos dossiers. Ici, nous avons pu exclure toutes les images qui n'étaient pas nécessaires dans le fichier final et définir la durée requise pour chaque image.

3. Optimisation de la taille du fichier APNG pour une utilisation dans les e-mails

Comme les GIF, les APNG peuvent rapidement devenir assez lourds. La réduction des couleurs et du nombre d'images utilisées contribuera à réduire la taille des fichiers. La compression zlib standard semblait être la seule option qui fonctionnait pour nos fichiers, et une fois que nous avons cliqué sur Make APNG! bouton, nous pourrions voir un exemple de notre animation et sa taille de fichier avant le téléchargement. C'est une excellente occasion d'apporter d'autres modifications, telles que la modification de la vitesse ou la suppression de quelques images supplémentaires, avant le téléchargement.

Avant de télécharger nos fichiers image à utiliser dans notre e-mail, nous avons pu les compresser un peu plus. Nous avons simplement exécuté nos APNG via TinyPNG , qui réduit la taille des fichiers en supprimant les métadonnées et en réduisant les couleurs, tout en préservant la transparence et l'animation. Cela a fait une énorme différence, en réduisant la taille totale de notre fichier image de 943 Ko à 243 Ko, économisant ainsi plus de 74 % de la taille du fichier ! Cependant, tous les outils de compression PNG ne préservent pas l'animation, alors assurez-vous de revérifier votre travail après le traitement de vos images.

Et c'est tout! Vous êtes maintenant prêt à ajouter un APNG à votre e-mail, comme vous le feriez avec n'importe quel autre type d'image. Si vous souhaitez voir notre newsletter complète en action, vous pouvez la voir ici ou consulter le code dans Litmus Builder .

Que pensez-vous de l'utilisation des APNG dans les e-mails ?

Avez-vous déjà utilisé des PNG animés dans vos campagnes par e-mail ? Quels sont les outils sur lesquels vous comptez pour les créer et maintenir une taille de fichier faible ? Nous aimerions connaître votre expérience. Partagez vos apprentissages dans les commentaires ci-dessous.