Comment modifier et optimiser les images dans HubSpot

Dernière mise à jour: March 2, 2018

Disponible avec :

Produit: HubSpot Marketing
Abonnement: Basique, Pro et Entreprise
Modules complémentaires: Site web

Ajouter des images à une page, un article de blog, un e-mail ou un post sur les réseaux sociaux augmente significativement l'impact du contenu. Les images améliorent le taux de clics des posts sur les réseaux sociaux et des e-mails, ainsi que la durée de consultation des pages web et des articles de blog.

Bien que l'infrastructure d'optimisation de contenu de HubSpot permette d'accélérer la vitesse de chargement, un trop grand nombre d'images risque de ralentir un site web et de décourager les visiteurs. De manière similaire, un e-mail intégrant plusieurs images de grande taille risque d'être intercepté par les filtres antispam. Ajuster la taille d'affichage d'une image via le code HTML ou dans l'éditeur WYSIWYG de HubSpot ne réduit pas la taille du fichier associé. De nombreux marketeurs ont recours à des outils comme Adobe Photoshop et Pixlr.com pour redimensionner et rogner les images, y ajouter du texte et des filtres, et les compresser pour le web. Cependant, l'utilisation de ces outils est chronophage et impose d'acquérir des compétences techniques supplémentaires.

HubSpot permet de modifier et de redimensionner facilement les images intégrées aux pages web, aux articles de blog et aux posts sur les réseaux sociaux directement dans l'éditeur de contenu, le gestionnaire de fichiers ou l'onglet Publication du tableau de bord des Réseaux sociaux. Avec l'éditeur d'images de HubSpot, vous pouvez par exemple :

  • Réduire les dimensions et la taille des images afin d'accélérer leur chargement et de définir une largeur maximale adaptée.
  • Rogner les images pour les adapter au contenu.
  • Ajouter du texte, des autocollants et des dessins aux images pour renforcer leur impact.
  • Ajuster la luminosité et le contraste d'une image

Optimiser des images pour le web

L'optimisation des images présente des avantages d'un point de vue technique tout autant qu'en matière de référencement. Voici quelques conseils d'optimisation applicables aux images intégrées aux pages HubSpot :

  • Les images intégrées aux pages web et aux e-mails conçus avec un design adaptatif dans HubSpot s'affichent automatiquement aux dimensions adaptées. En conséquence, il n'est généralement pas nécessaire de charger des images plus larges que le corps du contenu, soit 980 à 1 280 pixels pour les pages web, et 600 pixels pour les e-mails. Seule exception : les images d'arrière-plan, qui exigent parfois une résolution élevée.
  • Minimiser les dimensions et la taille des images permet d'éviter l'interception des e-mails par les filtres antispam. À cette fin, il est également recommandé d'augmenter la part de texte des e-mails.
  • Ajouter du texte alternatif ou des descriptions aux images assiste les moteurs de recherche et les lecteurs d'écran dans l'interprétation du contenu. Pour améliorer le référencement du contenu, utilisez des mots-clés ciblés, préalablement identifiés dans l'outil Mots-clés.
  • Une fois le fichier d'image correctement dimensionné, vous pourrez ajuster la taille d'affichage dans l'éditeur WYSIWYG de HubSpot.

Instructions

L'éditeur d'images est accessible lors de l'ajout d'une image à un post sur les réseaux sociaux, du chargement d'une image dans le gestionnaire de fichier ou de l'insertion d'une image dans l'éditeur de contenu. Ce tutoriel prend l'exemple de l'éditeur de contenu, mais les options d'édition sont identiques quel que soit l'outil utilisé. Suivez les instructions ci-dessous pour modifier une image intégrée à une page web, un e-mail, une page de destination ou un article de blog.

Accéder à l'éditeur de contenu

Dans l'exemple, l'éditeur de contenu, accessible depuis l'outil Pages de site web dans le menu Contenu, est ouvert pour modifier une page web. Cependant, les instructions suivantes sont également valables pour l'éditeur d'e-mails, de pages de destination ou d'articles de blog.

Cliquer sur Ajouter une image

Différents types de modules peuvent accueillir des images. Dans l'exemple, l'image est ajoutée à un module de texte enrichi. Cliquez sur l'icône Insérer/modifier une image.

HubSpot Help article screenshot

Charger ou sélectionner une image

Vous pouvez charger une nouvelle image ou modifier une image existante. HubSpot met également une banque d'images à votre disposition.

HubSpot Help article screenshot

Cloner et modifier

Cliquez sur l'icône d'engrenage associée à l'image, puis sur Cloner et modifier.

HubSpot Help article screenshot
L'éditeur d'images de HubSpot est compatible avec les images au format .jpg et .png. Si l'option Cloner et modifier n'apparaît pas, vérifiez que l'image est bien enregistrée dans l'un de ces formats (.jpg ou .png).

Modifier l'image

L'éditeur d'images comprend plusieurs fonctionnalités de modification avancées :

Rogner

La fonctionnalité Rogner permet de découper l'image selon une sélection et d'ajuster ses proportions. Utilisez-la pour modifier la forme de l'image ou supprimer des zones superflues.

Pour rogner une image, cliquez sur RognerFaites glisser les angles de la sélection ou choisissez un format prédéfini. Cliquez sur Appliquer, puis sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Redimensionner

Cette fonctionnalité permet de modifier les dimensions d'une image. Réduire la taille d'une image diminue également la taille du fichier associé, et donc le temps de chargement.

Pour redimensionner une image, cliquez sur Redimensionner, saisissez les dimensions souhaitées en verrouillant ou non les proportions, puis cliquez sur Appliquer, et enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Orientation

La fonctionnalité Orientation permet de faire pivoter ou d'inverser une image. Utilisez-la pour réorienter l'image si nécessaire.

Pour modifier l'orientation d'une image, cliquez sur Orientation, utilisez les boutons de rotation ou d'inversion, puis cliquez sur Appliquer, et enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Texte

La fonctionnalité Texte permet d'annoter une image et d'y ajouter une légende. Ajoutez du texte à une image pour clarifier sa signification ou la relier au contenu de la page ou de l'article. De nombreux clients de messagerie ne prenant pas en charge les images d'arrière-plan, cette fonctionnalité est également utile pour superposer du texte aux images intégrées à un e-mail.

Pour ajouter du texte, cliquez sur Texte, saisissez votre message, puis cliquez sur Appliquer. Vous pouvez ajouter autant de zones de texte que vous le souhaitez, et modifier la police et la couleur du texte. Cliquez sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Effets

Les effets donnent du caractère à une image.

Pour ajouter des effets, cliquez sur Effets, sélectionnez un effet, puis cliquez sur Appliquer,  et enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Améliorer

La fonctionnalité Améliorer permet d'embellir une image. Trois modes prédéfinis sont disponibles :

  • Le mode Haute-définition augmente la netteté de l'image.
  • Le mode Illuminer résout les défauts de luminosité.
  • Le mode Ajustement des couleurs règle automatiquement les couleurs.

Pour améliorer une image, cliquez sur Améliorer, choisissez un des modes prédéfinis, puis cliquez sur Appliqueret enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Dessiner

Pour dessiner sur une image, cliquez sur Dessiner, sélectionnez une couleur et un pinceau, tracez un dessin à l'aide de la souris, puis cliquez sur Appliquer pour ajouter le dessin à l'image. Cliquez sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Cadres

Pour ajouter un cadre, cliquez sur Cadres, sélectionnez le cadre de votre choix, puis cliquez sur Appliquer pour l'ajouter à l'image. Cliquez sur Enregistrer pour enregistrer l'image clonée.

HubSpot Help article screenshot

Vignettes

Les vignettes comprennent des flèches, des bulles de texte, et d'autres éléments d'illustration à superposer aux images. Pour ajouter une vignette, cliquez sur Vignettes, sélectionnez un élément, faites-le glisser à l'emplacement de votre choix, puis cliquez sur Appliquer, Cliquez sur Enregistrer pour enregistrer l'image clonée.

HubSpot Help article screenshot

Luminosité

Pour ajuster la luminosité d'une image, cliquez sur Luminosité, utilisez le curseur de réglage, puis cliquez sur Appliquer, Cliquez sur Enregistrer pour enregistrer l'image clonée.

HubSpot Help article screenshot

Contraste

Pour ajuster le contraste d'une image, cliquez sur Contraste, utilisez le curseur de réglage, puis cliquez sur Appliquer, et enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Saturation

Pour ajuster la saturation d'une image, cliquez sur Saturation, utilisez le curseur de réglage, puis cliquez sur Appliquer, et enfin sur Enregistrer pour sauvegarder les modifications.

HubSpot Help article screenshot

Tonalité des couleurs

Pour ajuster la tonalité des couleurs d'une image, cliquez sur Tonalité des couleurs, utilisez le curseur de réglage, puis cliquez sur Appliquer, et enfin sur Enregistrer pour sauvegarder les modifications.
HubSpot Help article screenshot

Mise au point

La fonctionnalité Mise au point applique un effet de flou au pourtour d'une sélection. Pour ajuster la mise au point, cliquez sur Mise au point, sélectionnez une forme, faites-la glisser à l'emplacement de votre choix, puis cliquez sur Appliquer, Cliquez sur Enregistrer pour enregistrer l'image clonée.

HubSpot Help article screenshot

Yeux rouges

Pour atténuer les yeux rouges, cliquez sur Yeux rouges, sélectionnez une taille de pinceau, cliquez sur les yeux rouges apparaissant sur l'image, puis cliquez sur Appliquer. Cliquez sur Enregistrer pour enregistrer l'image clonée.

HubSpot Help article screenshot

Ajouter une image au contenu

Après avoir cliqué sur Enregistrer, sélectionnez l'image clonée, puis cliquez sur Utiliser l'image pour l'ajouter au contenu.

HubSpot Help article screenshot

Article précédent:

Measuring Your Performance Project

Article suivant: