Héberger les images de vos emails exportés

Vous pouvez héberger vous-même les images exportées, ou laisser Emailify les importer automatiquement dans notre propre CDN.

Utiliser le CDN d’hébergement d’images d’Emailify (par défaut) ​

Pour les exports HTML, Emailify exporte par défaut vos emails HTML avec les images enregistrées à côté des fichiers .html, pour que vous puissiez les mettre en ligne où vous le souhaitez.

Si vous préférez que le CDN (réseau de diffusion de contenu) d’Emailify héberge vos images, activez l’interrupteur Upload Hosted Image URLs. Vos images seront alors importées et les URL de votre email HTML seront automatiquement remplacées pour pointer vers les fichiers importés.

Si vous utilisez l’une des intégrations intégrées aux plateformes d’emailing, vos images sont automatiquement importées dans le CDN d’Emailify.

Pourquoi une image hébergée peut être plus lourde que le fichier source ​

Emailify génère les octets d’image utilisés par l’email exporté et optimise le PNG ou le JPG généré avant d’ajouter ce même fichier à l’export et, si l’option est activée, de l’importer. L’hébergement change l’URL ; il n’applique pas de compression supplémentaire.

Comme Figma fournit les octets d’export générés et non le fichier importé d’origine, le fichier hébergé n’est pas une copie octet pour octet du JPG ou du PNG source. Son poids peut être différent, y compris plus élevé. Pour le réduire, utilisez avant l’export un calque source de taille adaptée et un format d’image approprié ; Emailify ne peut pas conserver à l’identique la compression du fichier d’origine dans ce workflow.

Importer les images dans votre propre bucket de stockage cloud ​

Par défaut, Emailify héberge vos images sur son CDN (réseau de diffusion de contenu), mais vous pouvez à la place utiliser le bucket de votre propre service de stockage cloud (par exemple AWS S3 ou Backblaze B2).

Une fois le service d’hébergement d’images choisi, saisissez ci-dessous les identifiants et les informations de votre bucket : pendant l’export, vos images seront automatiquement importées dans votre bucket (et le chemin de votre bucket sera utilisé dans les attributs src des balises <img> de votre HTML) :

  • Region (par exemple us-east-1)
  • Access Key (par exemple 003g8...)
  • Secret Access Key (par exemple K454q...)
  • Bucket Name (par exemple my-emailify-bucket)
  • Bucket URL (par exemple https://my-emailify-bucket.s3.us-east-1.amazonaws.com/)

Assurez-vous que les buckets que vous créez ont des autorisations de lecture en accès Public ; sinon, les URL des images importées ne seront pas accessibles une fois l’email HTML envoyé.

Adresses Cloudflare R2 ​

R2 utilise deux adresses distinctes. Saisissez-les toutes les deux dans les réglages d’hébergement des images :

  • S3 API endpoint : copiez le point de terminaison depuis votre compte Cloudflare, par exemple https://accountid.r2.cloudflarestorage.com. Conservez le segment de juridiction éventuellement affiché par Cloudflare, comme .eu. Saisissez le nom de votre bucket dans R2 Bucket Name.
  • URL publique des images : utilisez un domaine personnalisé connecté au bucket, par exemple https://images.example.com/, ou son URL publique r2.dev activée. Le S3 API endpoint nécessite une authentification et ne peut pas servir d’URL publique pour les images d’un email.

Si vous aviez enregistré le S3 API endpoint dans le champ d’URL, Emailify le déplace dans S3 API endpoint. Ajoutez votre URL publique des images avant d’exporter à nouveau. Si vous aviez déjà enregistré un domaine public, il est conservé ; ajoutez le point de terminaison API distinct s’il manque. Vos clés d’accès et le nom de votre bucket sont conservés.

Consultez le guide du S3 API endpoint et le guide d’accès public aux buckets de Cloudflare.

Erreurs d’hébergement d’images avec Mailchimp ​

Lors d’un export direct vers Mailchimp, Emailify vérifie le dossier d’images, les fichiers existants et les URL des images importées. Si Mailchimp rejette une requête d’image, l’export signale l’erreur et ne crée pas le modèle avec des URL d’images non confirmées. Vérifiez votre connexion Mailchimp et votre clé API, puis exportez à nouveau.

Services de stockage cloud auto-hébergés pris en charge par Emailify ​

Vous pouvez héberger vous-même les images exportées depuis Emailify sur l’un des services de stockage d’objets compatibles S3 ci-dessous :

Définir une URL de base personnalisée pour héberger les images sur votre propre serveur ou CDN ​

Par défaut, l’attribut src de toutes les images du HTML exporté par Emailify est un chemin relatif img/ (par exemple img/ceb3f891b78815897e04299f93eef255.jpg) ; cela vous permet de vérifier votre email et d’importer un zip dans certaines plateformes comme MailChimp, qui importent automatiquement les images et mettent à jour les URL src à votre place.

Mais si votre plateforme ne propose pas cette fonctionnalité, ou si vous hébergez simplement les images sur votre propre serveur, vous voudrez peut-être définir votre propre URL de base.

URL de base personnalisée par email ​

Vous pouvez définir une URL de base personnalisée pour un email précis : sélectionnez le frame Figma principal de votre email, cliquez sur le bouton Settings dans l’en-tête du plugin, activez l’interrupteur Override "img/" Base Path, puis collez le chemin de l’URL de base où les images seront hébergées. Une fois cette URL activée, elle est automatiquement ajoutée en préfixe de tous les attributs src de vos images (par exemple, img/ est remplacé par https://your-custom-server.com/image/path/here/ dans le fichier HTML exporté).

Ce réglage par email est idéal lorsque vous avez besoin d’URL de base différentes pour certaines campagnes, ou pour remplacer le réglage CDN global sur certains emails.

URL de base CDN personnalisée globale ​

Si vous hébergez toujours vos images sur le même CDN ou serveur personnalisé pour tous vos emails, vous pouvez définir une URL de base personnalisée globale au lieu de la configurer email par email :

  1. Dans le panneau des réglages d’export, repérez le menu déroulant du CDN
  2. Sélectionnez Custom Base Image Path URL dans la liste des options de CDN
  3. Saisissez votre URL de base personnalisée dans le champ qui s’affiche (par exemple https://cdn.example.com/images/)
  4. Tous les emails exportés utiliseront désormais par défaut cette URL de base pour les chemins des images

Le réglage CDN personnalisé global permet d’uniformiser facilement l’hébergement des images de toutes vos campagnes. Si une URL de base personnalisée globale et une URL par email sont toutes deux configurées, le réglage par email est prioritaire : vous pouvez ainsi remplacer le CDN global pour certaines campagnes si besoin.

Que vous utilisiez le réglage global ou le réglage par email, assurez-vous que votre URL de base personnalisée est accessible publiquement et correctement configurée pour CORS si nécessaire. L’URL peut se terminer ou non par une barre oblique : Emailify gère correctement les deux formats.

Pourquoi les images ne s’affichent-elles pas dans mon email HTML exporté ? ​

Si les images d’un email ne s’affichent pas après l’envoi, c’est généralement que les fichiers d’image ne sont pas hébergés à des URL publiques en ligne, que l’email a été envoyé depuis un outil qui a réécrit le HTML, ou que le client de messagerie du destinataire a bloqué les images distantes.

Si vous exportez le HTML avec des chemins locaux img/, les images sont enregistrées à côté du fichier .html et doivent être importées avec le modèle d’email ou hébergées séparément. Si vous activez Upload Hosted Image URLs, Emailify importe les images et remplace automatiquement les URL d’images du HTML par des liens hébergés.

Pourquoi les images fonctionnent-elles en local mais pas après l’envoi ? ​

Un aperçu HTML local peut charger les images depuis le dossier img/ exporté sur votre ordinateur. Une fois l’email envoyé, les destinataires n’ont pas accès aux fichiers de votre ordinateur : les images doivent donc être hébergées en ligne ou importées via votre ESP.

Gmail et Outlook ne sont pas des moyens fiables d’envoyer du HTML personnalisé exporté, car ils peuvent modifier le balisage et ne gèrent pas l’hébergement des images dans un workflow d’envoi d’emails HTML en masse. Utilisez plutôt un ESP ou l’une des intégrations d’Emailify.

Que vérifier en premier si les images exportées sont cassées ? ​

  • Assurez-vous que les images sont hébergées à des URL publiques en https://, ou importez le dossier img/ exporté via votre ESP.
  • Activez Upload Hosted Image URLs si vous voulez qu’Emailify importe les images à votre place.
  • Si vous utilisez votre propre bucket ou CDN, assurez-vous que le bucket autorise la lecture publique des URL des images importées.
  • Si un import échoue, vérifiez qu’un VPN, un pare-feu, un proxy ou le réseau de votre entreprise ne bloque pas la requête.
  • Attendez la fin du chargement des images Figma dans le fichier avant d’exporter.
  • N’oubliez pas que certains clients de messagerie bloquent les images distantes jusqu’à ce que le destinataire choisisse de les afficher.

Erreurs de connexion à l’hébergement personnalisé ​

Pour Amazon S3, Emailify construit le point de terminaison d’import à partir de la Region et du Bucket Name sélectionnés. La Bucket URL est l’URL de base publique utilisée pour les images de votre email exporté ; la modifier ne change pas le point de terminaison d’import.

Saisissez le nom complet du bucket, y compris l’éventuel identifiant de compte et le suffixe de région. Par exemple, un bucket régional de compte nommé my-email-images-123456789012-ap-southeast-2-an utilise la région ap-southeast-2 et l’URL de bucket https://my-email-images-123456789012-ap-southeast-2-an.s3.ap-southeast-2.amazonaws.com/. AWS prend en charge les noms de buckets globaux comme les noms de buckets régionaux de compte.

L’identité IAM associée à votre clé d’accès doit disposer de s3:PutObject sur arn:aws:s3:::YOUR-BUCKET-NAME/* pour importer les images. Emailify n’a besoin ni d’un accès public en écriture, ni de l’autorisation de créer ou de supprimer des buckets. D’autres restrictions dans vos stratégies AWS ou vos réglages de chiffrement peuvent toutefois empêcher les imports ; consultez les recommandations d’AWS sur les autorisations.

Les URL des images exportées doivent aussi être lisibles sans connexion. Utilisez un bucket d’images public ou un CDN public adossé à votre bucket, et vérifiez l’URL d’une image importée dans une fenêtre de navigation privée. Conservez vos autres fichiers privés dans un stockage séparé ; ne les rendez pas publics pour faire fonctionner les images de vos emails.

Si un export signale Image hosting failed, relancez l’export après avoir corrigé la connexion ou les autorisations. L’import réussi d’un modèle d’email ne signifie pas que ses images ont été importées. Si l’erreur persiste, envoyez le message d’erreur ou une capture d’écran au support, sans y inclure votre clé d’accès ni votre clé secrète.