GIF animés dans les e-mails : 10 conseils pour réduire la taille des fichiers

Surprenant. Divertissant. Informatif. Les GIF sont toutes ces choses, et les spécialistes du marketing et les clients adorent ces ajouts amusants aux e-mails. Mais savez-vous ce que les GIF peuvent être d'autre ? Gros. Il est facile pour un fichier GIF d'atteindre des proportions énormes et gigantesques qui interfèrent avec les temps de chargement des e-mails.

Alors, que doit faire un spécialiste du marketing par e-mail ? Evan Diaz, le concepteur principal de Lucky Red Pixel, a les réponses. Voici ce que nous avons appris de sa présentation Litmus Live, "Créer des animations qui ravissent et aident les abonnés".

Minuscule mais puissant : Pourquoi il est si crucial de maintenir la taille des fichiers GIF à un niveau bas

Les GIF volumineux ralentissent le chargement des e-mails ou les téléchargements qui consomment le forfait de données téléphoniques d'un abonné. Ces deux éléments peuvent frustrer les abonnés, ce qui compromet tout votre travail acharné et affecte les performances de vos campagnes. C'est pourquoi garder les fichiers GIF de petite taille est l'un des principaux défis que les spécialistes du marketing par e-mail doivent maîtriser s'ils souhaitent utiliser la puissance des GIF animés dans leurs campagnes par e-mail.

Quelle peut être la taille d'un GIF dans un e-mail ?

En général, plus votre GIF est petit, plus il se charge rapidement dans vos e-mails, et plus vos temps de chargement sont courts, meilleure est l'expérience pour vos abonnés. Mais quelle est la taille de fichier maximale acceptable pour un GIF ? Evan conseille de conserver les fichiers de moins de 5 Mo. À 5 Mo, un abonné n'aura probablement qu'à attendre quelques secondes pour que les images se chargent. Chez Litmus, nous essayons de garder les GIF sous 1 Mo pour garantir des temps de chargement rapides et pour ne pas consommer trop de données de nos lecteurs s'ils ouvrent notre e-mail sur mobile lors de leurs déplacements.

Concentrez-vous sur l'optimisation de la taille des fichiers tout au long du processus de création GIF

La réduction de la taille du fichier GIF commence sur la planche à dessin. Une fois que vous avez une idée pour votre GIF, vous pouvez faire quelques choix de conception pour contrôler les tailles. De plus, lorsqu'il s'agit de peaufiner votre GIF dans Photoshop et de le traiter pour une utilisation par courrier électronique, il existe des astuces supplémentaires que vous pouvez utiliser pour empêcher vos GIF de devenir trop lourds. Voici les dix meilleurs conseils pour réduire les tailles de GIF :

1. Tenez-vous en à des transitions plus simples (AKA plus rapides)

Si votre animation implique des transitions, tenez-vous-en aux « coupures » plutôt qu'aux « fondus ». Alors que les coupures sautent d'un visuel à l'autre, les fondus prennent leur temps pour délivrer le même message. Les fondus impliquent plus d'images, plus de couleurs et sont donc accompagnés de fichiers de plus grande taille. L'exemple ci-dessous montre à quel point l'impact d'une transition de fondu est important sur la taille du fichier. Si vous choisissez un effet de fondu plutôt qu'une simple transition de coupe, votre fichier GIF est 7,8 fois plus volumineux.

Vous n'êtes pas fan des transitions coupées ? Evan suggère d'utiliser une transition « traduire », où une image glisse sur l'image précédente. De cette façon, vous obtenez un mouvement intéressant sans enliser le fichier avec plus de transitions de couleurs à partir d'un fondu.

2. Utilisez des illustrations sur des photos lorsque cela est possible

De la même manière que le traitement de plus de couleurs dans une transition de fondu augmente la taille du fichier GIF, il en va de même pour les couleurs complexes des photographies. Les illustrations auront plus de composants de couleur unie qu'une photo ou une vidéo, ce qui les rend généralement moins lourdes.

Un autre avantage des illustrations simplement colorées est que vous pouvez incorporer plus de mouvements et d'animations avec un encombrement de fichier plus petit. Les modifications subtiles d'une photographie sont plus lourdes à charger que plusieurs cadres animés pour une illustration qui raconte une histoire. S'il n'y a aucun moyen de contourner l'utilisation d'une photographie, vous devez isoler la partie animée. Au lieu que l'image entière soit un GIF, vous pouvez réduire considérablement la taille du fichier en laissant toutes les sections immobiles sous forme d'images.

3. Superposer des couleurs pour limiter la palette de couleurs dans les photographies

Une autre façon de réduire la taille du fichier lorsque vous devez utiliser une photo ou une vidéo consiste à superposer une seule couleur sur le GIF. Une superposition monochrome donne au GIF une teinte sur la marque et limite le nombre de couleurs différentes que le GIF doit traiter. Le résultat : des tailles de fichiers plus petites !

4. Lorsque vous transformez une vidéo en GIF, importez une image sur deux dans un calque

Photoshop convertira vos images vidéo en calques lorsque vous sélectionnez Fichier > Importer > Images vidéo en calques. C'est un outil pratique, mais il peut conduire à une taille de fichier GIF incontrôlable si vous ne faites pas attention.

Optimisez la taille de votre fichier en limitant les calques à toutes les 2 images. Cette option prendra une image sur deux pour créer des calques, ce qui réduit la taille du fichier. S'il ne suffit pas de réduire les calques à une image sur deux, Evan a noté que le fait que Photoshop ne récupère qu'une image sur quatre est toujours un bon point de départ.

5. Supprimer les cadres en double

N'oubliez pas : plus vous utilisez d'images dans votre GIF, plus la taille du fichier est importante. Après avoir importé votre GIF dans Photoshop, vous pouvez regarder l'animation image par image. S'il existe plusieurs calques avec la même image de cadre, attribuez le démarrage aux doublons.

Chez Litmus, nous utilisons souvent EZGIF pour optimiser nos GIF animés. L'optimiseur GIF en ligne gratuit vous donne la possibilité de supprimer facilement les images en double si vous n'avez pas accès à Photoshop ou à un outil similaire.

6. Si vous supprimez les images en double, ajustez le délai pour garder le rythme GIF

Si vous supprimez des images de votre GIF, vous devrez modifier le délai d'image pour que la synchronisation GIF reste la même. Il suffit de « tenir » l'image unique pendant l'équivalent du temps qu'il aurait fallu pour parcourir les images en double que vous avez supprimées. C'est ainsi que vous maintenez le rythme du GIF.

Gardez à l'esprit qu'il existe une relation inverse simple dans les GIF : plus le nombre d'images par seconde est élevé, moins la lecture est saccadée. Un délai de 0,03 sera probablement la valeur par défaut que Photoshop donne à votre GIF téléchargé, ce qui crée une animation de 30 FPS qui se charge très facilement. Mais plus vous devez charger d'images par seconde, plus la taille de votre fichier sera importante. Vous voudrez trouver l'endroit idéal pour que votre animation soit suffisamment fluide tout en gardant la taille de votre fichier faible.

7. Choisissez la réduction adaptative des couleurs

Lorsque vous enregistrez votre GIF pour le Web, vous disposez de quelques options de réduction des couleurs. La meilleure suggestion de pratique d'Evan est la réduction des couleurs « adaptative ». Cet algorithme échantillonne les couleurs qui apparaissent le plus dans une image et fournit un juste équilibre entre la taille du fichier et la fidélité des couleurs.

8. Gardez la « transparence » activée

Les GIF gèrent souvent mal la transparence, appliquant un bord blanc dur autour des éléments lorsqu'ils sont définis sur un fond transparent. Si vous souhaitez utiliser des animations sur un fond transparent, les PNG animés sont la solution . Alors, à quoi sert réellement cette case à cocher « transparence » dans Photoshop ? Il permet aux pixels qui n'ont pas changé d'une image à l'autre de rester tels qu'ils sont. Cela signifie que les zones du GIF qui restent constantes d'une image à l'autre n'ont pas besoin d'être rechargées. Evan suggère de laisser cette option activée la plupart du temps, car cela peut réduire la taille de votre fichier d'un tiers ou plus.

9. Équilibrez la table des couleurs avec le tramage

Lors de l'exportation, vous avez également la possibilité d'ajuster le nombre de couleurs enregistrées dans la table des couleurs du fichier image. Plus le nombre de couleurs est faible, plus la taille du fichier est petite. Pour obtenir la meilleure combinaison entre la taille de fichier optimisée et la fidélité des couleurs, choisissez :

• 128-256 couleurs pour les vidéos
• 64-128 couleurs pour les illustrations animées

Si vous souhaitez vraiment affiner la taille de votre fichier, vous pouvez combiner les modifications de votre table de couleurs avec le pourcentage de tramage. Un pourcentage de tramage plus élevé conduit à des dégradés plus lisses, même avec une table de couleurs limitée. Par exemple, une échelle de gris avec seulement 8 bandes de couleur devient un dégradé lisse avec 100 % de tramage activé. Un tramage plus élevé combiné à une table de couleurs à l'extrémité inférieure pour les vidéos pourrait bien être l'endroit idéal pour un GIF qui a l'air bien mais qui se charge rapidement.

10. Réduisez simplement la qualité vidéo et la taille du fichier avec Lossy

Vous voulez optimiser la taille de votre fichier GIF sans tous les réglages fins impliqués dans les tables de couleurs et le tramage ? La sélection d'un niveau de perte de 20 à 40 % réduit la taille du fichier et une certaine qualité d'un seul coup. Vous pouvez jouer avec ces pourcentages pour trouver l'équilibre entre la qualité et la taille du fichier qui vous convient.

Regardez l'intégralité de la conférence Litmus Live d'Evan

Vous cherchez encore plus de conseils sur la façon de créer des animations qui ravissent et aident les abonnés ? Vous pouvez regarder l'intégralité de la conférence Litmus Live d'Evan ci-dessous !

Quel est votre secret pour optimiser les GIF animés pour les e-mails ?

De bons GIF peuvent ajouter du contexte et du plaisir à un e-mail, tandis qu'un GIF qui tourne mal peut détourner l'attention du message ou amener les abonnés à éviter complètement vos e-mails. Quelles sont vos astuces pour optimiser les GIF animés pour les e-mails ? Nous aimerions les entendre dans les commentaires ci-dessous!