1. Créer un site
  2. Tutoriels
  3. Pages
  4. Ajouter une image dans une page

 

Photography

Ajouter une image dans une page

Quelle soit sur votre ordinateur, dans votre espace de stockage ou hébergée sur un quelconque site d'hébergement gratuit de fichiers, nous allons voir ensemble comment afficher une image dans une page (avec l'outil de création de page ou en passant par le widget Image).

Insérer une image dans une page avec le widget Image

Pour plusieurs raisons, nous vous conseillons d'utiliser le widget Image plutôt que d'insérer votre image directement dans l'éditeur visuel.

  1. L'utilisation de widgets vous permet de concevoir des mises en page complexes sans avoir à mettre les mains dans le code html (pour positionner une image par rapport à du texte par exemple).
  2. Vous pourrez régler la largeur de chaque bloc.
  3. Vous pourrez changer l'ordre des colonnes et des lignes de façon très simple.
  4. L'adresse de l'image est indépendant de celle du site. Si vous utilisez le widget Image, vos images continueront de s'afficher dans vos pages si vous changez l'adresse de votre site l'adresse (ex : si vous laisser expirer votre nom de domaine, l'adresse de votre site repasse en .e-monsite.com).
  5. Pour en savoir plus sur la façon de gérer les pages avec les blocs de widgets, nous vous recommandons la lecture du tutoriel : l'outil de création de page.

Pour ajouter une image en utilisant le widget, ajoutez une ligne et de manière facultative une ou plusieurs colonnes. Sélectionnez le widget Image puis choisissez l'image à insérer. 

Si votre image est sur votre ordinateur, il faut la télécharger dans votre espace de stockage. Cliquez sur Ajouter une image. Sélectionnez votre image puis cliquez sur Insérer.

Une fois le téléchargement terminé, vous pouvez :

  1. Modifier le titre de l'image (par défaut c'est le nom du fichier)
  2. Choisissez la taille de l'image telle qu'elle sera affichée dans la page (avatar, grande taille, moyenne, petite taille). Ce sont des paramètres que vous pouvez modifier dans Configuration > Apparence > Personnaliser.
  3. Choisissez ensuite l'alignement (l'emplacement de l'image sur la ligne : à gauche, au centre, à droite).
  4. Modifier la cible du lien : c'est la taille à laquelle s'ouvrira l'image quand un internaute cliquera dessus. Si vous ne souhaitez pas ajouter de lien sur l'image, choisissez Aucun lien.
  5. Enfin, choisissez le style d'affichage de la photo (arrondi, rond, polaroïd, ou avancé).

Insérer une image dans une page avec l'éditeur visuel

Que votre image soit sur votre ordinateur ou déjà dans votre espace de stockage images, vous pourrez l'insérer dans un bloc éditeur visuel en cliquant dans la barre d'outils sur le bouton Image.

  1. Cliquez sur Image puis sur Parcourir.
  2. Sélectionnez votre image puis cliquez sur Insérer.

Attention : Vous ne devez jamais faire "glisser-déposer" une image de votre poste de travail directement dans l'éditeur visuel. Vous seriez le seul à la voir et vous endommageriez le contenu de votre page. Une image doit être hébergée sur un serveur (donc placée dans un espace de stockage) si vous souhaitez qu'elle s'affiche dans une page.

Si l'image est déjà en ligne (mais pas dans votre espace de stockage)

Si l'image est déjà en ligne, elle a une adresse URL et vous pouvez donc l'afficher dans une page sans avoir à la placer une nouvelle fois dans votre espace de stockage.

Vous pouvez récupérer l'adresse de l'image :

  1. En faisant un clic droit sur l'image puis en cliquant sur Copier l'adresse de l'image.
  2. En faisant un clic droit sur l'image, puis en cliquant sur Afficher l'image et en copiant l'adresse de l'image dans la barre d'adresse de votre navigateur.

Il est interdit d'utiliser des images ne vous appartenant pas. Il faut toujours demander l'autorisation au propriétaire.

Vous avez copié l'adresse de l'image.

  1. Dans la barre d'outils de l'éditeur visuel, cliquez sur le bouton Image.
  2. Collez l'adresse de l'image puis cliquez sur insérer.

L'image s'affiche dans la page dans sa taille d'origine. Vous pouvez ensuite modifier la taille et la disposition de l'image en allant dans les propriétés générales ou avancées.

 
 

Modifier les propriétés d'une image

Si vous avez déjà inséré une image dans la page, vous pouvez aussi utiliser le bouton Insérer/ éditer une image pour modifier la taille de l'image, son alignement ou même pour placer des marges autour de celle-ci.

  1. Cliquez sur le bouton Image dans la barre d'outils de l'éditeur visuel, puis sur le bouton Insérer / éditer une image.
  2. L'onglet Information sur l'image permet de modifier le titre et la description de l'image mais aussi ses dimensions. 
  3. L'onglet avancé permet de modifier la position de l'image et de déterminer des marges. Vous pouvez également modifier la taille de l'image en conservant les proportions. Pour gérer la position ou les marges autour d'une image, le plus simple est d'utiliser l'outil de création de page.

Ajouter plusieurs images sur une même ligne

Avec l'éditeur visuel, en cliquant à chaque fois sur Image puis en insérant vos images avec l'option Alignement > Aucun.

Il n'y aura pas d'espacement entre vos images et vous devrez placer des marges (n'utilisez pas la touche espace pour positionner une image). De plus, l'éditeur visuel ne reprenant pas les dimensions exactes de votre site, il est possible par exemple que 4 images alignées dans l'éditeur visuel ne le soit pas réellement dans la page.

Pour éviter tous ces désagréments et les soucis de mise en page, privilégiez l'utilisation du widget Image, en ajoutant 1, 2, 3, 4, 5 ou 6 widgets sur une même ligne. Pour en savoir plus sur cette méthode (permettant de créer des pages plus complexes facilement), nous vous invitons à lire le tutoriel :  disposer du contenu côte à côte.

La suppression d'images

Une fois l'image insérée dans une page, si vous la supprimez de l'espace de stockage, elle ne s'affichera plus (cela affichera un emplacement vide dans la page ou une croix rouge). Il ne faut donc jamais supprimer une image de l'espace de stockage si celle-ci est affichée sur votre site.

  1. Si vous souhaitez supprimer une image insérée dans une page via le widget Image, c'est très facile. Comme pour tout type de widget, il suffit de cliquer en bas à gauche du widget sur Supprimer la colonne.
  2. Si vous souhaitez supprimer une image insérée dans une page avec l'éditeur visuel, il faut sélectionner l'image en cliquant dessus puis appuyer sur la touche Suppr de votre clavier.
  3. Enfin, si vous souhaitez définitivement supprimer une image de nos serveurs, il faut passer par votre espace de stockage (dans Stockage > Gérer les images).

Avec l'outil de création de pages intégrez facilement vos images

 

 

Ces tutoriels pourraient aussi vous aider :

Format d'images

Personnaliser le style des images

Format polaroid ou image ronde : découvrez comment appliquer facilement des styles sur vos images pour rendre vos pages attractives et originales.

Créer des pages web

Le guide de la création de pages

Créez des pages web facilement grâce à un système de lignes et de colonnes, ce qui permet d'afficher du contenu dynamique dans vos pages.