---
url: "/fr/emailify/content/gifs.md"
description: "Ajoutez des fichiers .gif animés depuis votre ordinateur à vos emails, en images en ligne (dans une Column) ou en arrière-plan (Row, Hero, Wrapper)."
---

# Ajouter des GIF animés à vos designs d’email

> Ajoutez des fichiers .gif animés depuis votre ordinateur à vos emails, en images en ligne (dans une Column) ou en arrière-plan (Row, Hero, Wrapper).

### Tutoriel vidéo : ajouter des GIF animés de Figma aux exports d’emails HTML

Cette vidéo montre comment ajouter des GIF animés à vos designs d’email et exporter depuis Figma des emails HTML responsive prêts pour la production avec le plugin Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/Jmy2Tuzzwjg)

> **Warning:** L’import d’images GIF animées nécessite une licence Emailify Pro.

> **Note:** Si vous utilisez la version d’essai gratuite du plugin, les GIF sont importés sous forme d’images statiques. Vous pouvez aussi utiliser l’option **Export HTML** avec le bouton **Upload** sur **off** pour exporter et télécharger en local les fichiers `.gif` animés avec vos emails HTML.

## Ajouter un GIF animé comme image de contenu dans vos calques Column {#add-an-animated-gif-as-a-content-image-inside-your-column-layers}

[Video](/assets/videos/emailify/content/inline-animated-gif.mp4)

Vous pouvez glisser-déposer un fichier `.gif` depuis votre ordinateur dans n’importe quel calque **Column** : il est ajouté comme calque de contenu image dans Figma.

Pour conserver la qualité de votre GIF, redimensionnez le calque proportionnellement (en maintenant la touche **Shift** pendant le redimensionnement de votre calque Figma) afin de garder les proportions d’origine. Emailify peut ainsi utiliser les données du fichier GIF d’origine dans vos exports.

Si vous donnez à votre calque Figma des proportions différentes de celles du GIF d’origine, Emailify doit recréer les images de votre GIF dans un tout nouveau fichier `.gif` pour tenir compte de la zone d’image recadrée (les clients de messagerie HTML ne prennent pas en charge le recadrage CSS). Le fichier GIF est alors plus lourd et l’export plus lent.

## Pourquoi mon GIF exporté est-il plus lourd que le GIF d’origine ? {#why-is-my-exported-gif-larger-than-the-original-gif}

Si vous modifiez les proportions du calque GIF dans Figma, Emailify doit recréer les images du GIF dans un nouveau fichier `.gif` pour que l’email exporté corresponde à la zone d’image recadrée. Les clients de messagerie HTML ne prennent pas en charge le recadrage CSS des GIF de la même façon que les aperçus de Figma : recréer les images peut donc alourdir le fichier final et ralentir l’export.

Pour que le GIF exporté reste proche de la taille du fichier d’origine, redimensionnez-le proportionnellement et conservez ses proportions d’origine.

> **Tip:** Vous pouvez définir l’attribut de [texte alternatif](/fr/emailify/content/alt-text) ou ajouter un [lien URL cliquable](/fr/emailify/content/link-images) à vos images avec le bouton Settings de l’en-tête du plugin.

> **Note:** Emailify essaie de détecter automatiquement si votre GIF a un arrière-plan transparent. Si votre GIF a besoin de transparence et que le plugin ne le détecte pas de lui-même, ajoutez le mot **Transparent** n’importe où dans le nom de votre calque Figma (par exemple `My Layer Name - Transparent`) pour forcer son export avec un arrière-plan transparent.

Le format GIF accepte soit une opacité de 0 %, soit une opacité de 100 %, mais rien entre les deux. Vous pouvez donc avoir un GIF animé avec un arrière-plan entièrement transparent derrière des éléments entièrement opaques et visibles. Les calques doivent donc être soit entièrement transparents, soit non : tout calque dont l’opacité est inférieure à 50 % sera transparent, et tout calque dont l’opacité est supérieure à 50 % sera opaque.

## Ajouter un GIF animé comme image d’arrière-plan d’un calque Row, Hero ou Wrapper {#add-an-animated-gif-as-a-background-image-on-a-row-hero-or-wrapper-layer}

[Video](/assets/videos/emailify/content/gif-background-image.mp4)

Si vous devez utiliser un GIF animé comme image d’arrière-plan derrière du _vrai_ contenu en texte enrichi, glissez un fichier `.gif` depuis votre ordinateur sur le remplissage Figma de n’importe quel frame Row, Hero ou Wrapper : il devient le remplissage d’image de l’arrière-plan du frame. Les autres remplissages Figma de ce frame (par exemple des superpositions de couleur ou de dégradé) sont aussi inclus dans l’export `.gif` final.

L’avantage est que les calques de contenu à l’intérieur du frame restent rendus comme des calques de contenu enrichi individuels dans votre export d’email HTML, par-dessus l’arrière-plan GIF animé.

> **Note:** Emailify essaie de détecter automatiquement si votre GIF a un arrière-plan transparent. Si votre GIF a besoin de transparence et que le plugin ne le détecte pas de lui-même, ajoutez le mot **Transparent** n’importe où dans le nom de votre calque Figma (par exemple `My Layer Name - Transparent`) pour forcer son export avec un arrière-plan transparent.

Le format GIF accepte soit une opacité de 0 %, soit une opacité de 100 %, mais rien entre les deux. Vous pouvez donc avoir un GIF animé avec un arrière-plan entièrement transparent derrière des éléments entièrement opaques et visibles. Les calques doivent donc être soit entièrement transparents, soit non : tout calque dont l’opacité est inférieure à 50 % sera transparent, et tout calque dont l’opacité est supérieure à 50 % sera opaque.

> **Warning:** **GIF animés dans Outlook :** la plupart des clients de messagerie [prennent en charge les GIF animés](https://www.caniemail.com/features/image-gif/), mais Outlook _2019 et versions antérieures_ n’affiche que la **première image** d’un GIF au lieu de lire l’animation. Assurez-vous que cette image contient les visuels ou le texte essentiels pour qu’elle fonctionne aussi comme image statique de repli. Dans **Outlook avec Office 365**, les GIF sont lus automatiquement _trois fois_ avant de s’arrêter, avec un _bouton de lecture_ pour les relancer.
