Utiliser des images dans le contenu HubSpot

Vous pouvez ajouter des images aux modules de texte enrichi ou aux modules d'image dans le contenu HubSpot. Les modules de texte enrichi prennent en charge plusieurs types de contenu (images, texte, CTA, etc.), tandis que chaque module d'image ne peut contenir qu'une seule image.

Remarque : Les modules de texte et de texte enrichi personnalisés dans l'éditeur d'e-mails en glisser-déposer ne peuvent pas contenir d'images. 

Ajouter des images

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Base de connaissances : Depuis votre compte HubSpot, accédez à Service client > Base de connaissances.

• • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 

Remarque : Seuls les fichiers .png, .ico, .bmp, .jpg et .gif peuvent être ajoutés aux e-mails marketing.

• Insérer une image : 
  • Pour ajouter une image à un module de texte enrichi, cliquez sur le module de texte enrichi, puis sur l'icône d'image insertImage dans la barre d'outils de texte enrichi.
  • Pour ajouter une image à un module d'image, cliquez sur le module d'image, puis sur Remplacer dans l'éditeur de barre latérale au-dessus de l'image de variable. 
• Sélectionner une image : 
  • Pour insérer une image existante, cliquez sur l'image dans le panneau de droite.

• • Pour charger une nouvelle image de votre ordinateur ou via l'URL de fichier, cliquez sur Ajouter une image dans le panneau de droite. Pour créer une nouvelle image avec les outils d'édition de Canva, cliquez sur Créer avec Canva. Cliquez ensuite sur l'image pour l'insérer.

Avant d'insérer une image, vous pouvez optimiser l'image pour le temps de chargement ou la résolution en cliquant sur Détails sur l'image dans le panneau de droite. Cliquez ensuite sur le menu déroulant Optimisation d'image et sélectionnez une option d'optimisation : 

• • Élevée : l'image se charge à une résolution plus élevée, mais avec un temps de chargement plus long.
  • Par défaut : l'image sera optimisée à la fois pour la résolution et le temps de chargement.
  • Faible : l'image se charge à une résolution inférieure, mais avec un temps de chargement réduit. Découvrez-en davantage sur l'optimisation des pages pour le temps de chargement dans notre documentation pour les développeurs. 

Modifier des images

Une fois que vous avez ajouté une image à votre contenu, vous pouvez modifier sa taille, ajouter du texte alternatif, ajouter un lien ou définir son comportement de chargement. 

Modifier une image dans un module de texte enrichi 

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Base de connaissances : Depuis votre compte HubSpot, accédez à Service client > Base de connaissances.
  • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 
• Dans l'éditeur de contenu, cliquez sur l'image pour afficher la barre d'outils d'édition d'image.
• Modifier l'image :  
  • Pour ajuster l'habillage du texte autour de l'image, cliquez sur les icônes d'alignement inline. 

• • Pour ajuster la taille de l'image, cliquez sur les flèches de largeur et de hauteur ou saisissez une taille en pixels.
  • Pour ajuster le remplissage autour de l'image, cliquez sur le menu déroulant Espacement et saisissez une taille en pixels autour des bords de l'icône d'image.
• Pour supprimer une image d'un module de texte enrichi, cliquez sur l'image, puis sur l'icône Corbeille delete. 

• Pour remplacer une image dans un module de texte enrichi, cliquez sur l'image, puis sur l'icône Remplacer replace repl et ajoutez une nouvelle image.

• Pour lier l'image, ajouter du texte alternatif ou définir le comportement de chargement, cliquez sur l'image, puis sur l'icône Crayon edit :
  • Pour ajouter un lien vers l'image, cliquez sur le menu déroulant Lien vers dans la boîte contextuelle et sélectionnez une catégorie de lien. Dans le champ ci-dessous, saisissez la destination du lien. Découvrez-en davantage sur les différents types de liens.

• • Dans le champ Texte alternatif, saisissez le texte de description pour les moteurs de recherche et les lecteurs d'écran. Cela améliorera l'accessibilité et le SEO de votre site. Découvrez-en davantage sur l'accessibilité du site web dans la documentation des développeurs. 

Remarque : L'ajout de texte alternatif à une image n'ajoute aucun texte de titre. Le texte alternatif affecte le référencement dans les moteurs de recherche et l'accessibilité, tandis que le texte de titre apparaît lorsqu'un visiteur passe le curseur de sa souris sur l'image en ligne.

• Pour définir le comportement de chargement d'image et personnaliser le type de lien d'image pour les moteurs de recherche, cliquez sur Avancé. 
  • Pour définir le comportement de chargement d'image, cliquez sur le menu déroulant Chargement d'image et sélectionnez une option : 
    • Lazy : l'image se charge uniquement lorsque le visiteur atteint cette partie de la page. Cela réduit le temps nécessaire au chargement de votre page et améliore le SEO. Par défaut, les images se chargeront avec ce paramètre. 
    • Eager : l'image se charge en même temps que la page. 
    • Paramètres par défaut du navigateur : le comportement de chargement de l'image est déterminé par les paramètres du navigateur du visiteur. 
  • Pour personnaliser le type de lien d'image, dans la section Type de lien, sélectionnez un ou plusieurs attributs : 
    
    • Ordinaire : ce lien n'est pas sponsorisé. 
    • Aucun suivi : ce lien n'est pas associé à votre site web.
    • Sponsorisé : ce lien est un lien sponsorisé ou une publicité.
    • Contenu généré par les utilisateurs : ce lien redirige vers du contenu généré par des utilisateurs, comme un commentaire de blog ou une discussion de forum. 
• Cliquez sur Appliquer pour appliquer les modifications à l'image.

• Dans l'angle supérieur droit de l'éditeur de contenu, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

Modifier une image dans un module d'image

• Accédez à votre contenu :

  • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
  • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
  • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mail.
• Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier. 
• Dans l'éditeur de contenu, cliquez sur le module d'image.
• Pour supprimer l'image actuelle, cliquez sur Supprimer dans la section Image de l'éditeur de barre latérale. Cela supprimera l'image actuelle du module d'image, mais ne supprimera pas le module de la page. 

• Pour remplacer l'image actuelle, cliquez sur Remplacer dans la section Image de l'éditeur de barre latérale, puis ajoutez une nouvelle image. 
• Dans le champ Texte alternatif, saisissez le texte de description pour les moteurs de recherche et les lecteurs d'écran. Cela améliorera l'accessibilité et le SEO de votre site. Découvrez-en davantage sur l'accessibilité du site web dans la documentation des développeurs. 

Remarque : L'ajout de texte alternatif à une image n'ajoute aucun texte de titre. Le texte alternatif affecte le référencement dans les moteurs de recherche et l'accessibilité, tandis que le texte de titre apparaît lorsqu'un visiteur passe le curseur de sa souris sur l'image en ligne.

• Définissez la taille de l'image. Vous pouvez définir la taille automatiquement ou en définissant une hauteur et une largeur personnalisées : 
  
  • Ajuster automatiquement : l'image s'adapte à la taille de l'appareil sur lequel elle est regardée. 
  • Hauteur et largeur exactes : l'image s'affichera avec la même taille sur tous les appareils.
• Définir une taille maximale : 
  • Taille d'origine de l'image : l'image n'apparaîtra jamais plus grande que sa taille initiale. 
  • Personnalisé : l'image n'apparaîtra jamais plus grande qu'une largeur et une hauteur définies dans les champs de largeur et de hauteur. 
• Pour définir le comportement de chargement d'image, cliquez sur le menu déroulant Chargement d'image et sélectionnez une option : 
  • Lazy : l'image se charge uniquement lorsque le visiteur atteint cette partie de la page. Cela réduit le temps nécessaire au chargement de votre page et améliore le SEO. Par défaut, les images se chargeront avec ce paramètre. 

• • Paramètres par défaut du navigateur : le comportement de chargement de l'image est déterminé par les paramètres du navigateur du visiteur. 
• Pour ajouter un lien vers l'image, saisissez une URL de destination dans le champ Lien (facultatif). Sélectionnez la case à cocher Ouvrir le lien dans un nouvel onglet pour diriger le visiteur vers l'URL de destination dans un nouvel onglet du navigateur. 

• Dans l'angle supérieur droit de l'éditeur de contenu, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications.