Comment ajouter des images

Pour ajouter une image (photo, dessin,…) dans une page ou l’associer à un produit, WordPress fonctionne toujours de la même manière :

  1. Importation éventuelle de l’image dans un dossier à vous, appelé “bibliothèque de médias”
  2. Sélection dans votre bibliothèque du média à utiliser (média = dessin, photo ou vidéo)
  3. Redimensionnement éventuel de l’image
  4. Placement du fichier dans la page web
  5. Ajout des paramètres de l’image (alignement, texte de remplacement, styles, …)

Une fois l’image insérée dans votre page, il ne faut surtout pas oublier d’enregistrer cette page afin que l’insertion soit conservée.

Voyons dans le détail comment procéder :

Choix de l’image

Tout d’abord et comme le stipulent les conditions d’utilisation du site, vous devez vous assurer d’avoir les droits légaux pour l’utilisation de l’image. Récupérer au hasard une image sur Internet n’est pas une bonne idée car l’auteur de cette image pourra venir vous réclamer des dommages et intérêts plus tard, s’il s’aperçoit de cette utilisation frauduleuse et notre site ne pourra être tenu pour responsable (rappel).

Ensuite, il faut choisir une image dont le poids (du fichier) est compatible avec un affichage écran. Un appareil photo prend des images très fines, pleines de détails. Ces détails “pèsent” dans le poids du fichier. On parle de résolution. Une image est composée de points (pixels). Plus vous avez de points sur une surface donnée, plus le fichier image est lourd. Pour un écran, la résolution préconisée est de 72 dpi. Cela fait des images avec un poids entre 70 et 200 Ko.

Si votre image dépasse ce poids, merci d’utiliser un outil de traitement d’image afin de réduire sa taille, avant de l’importer.

Accès à votre bibliothèque de médias

Si vous êtes en train de créer du contenu pour une page, vous devez voir au dessus de la zone d’insertion une série d’icônes de type traitement de textes (comme ci-dessus). Le bouton “Ajouter un média” est là, qui attire votre œil aguerri. Oui, c’est bien sur celui-ci qu’il faut cliquer pour ouvrir votre bibliothèque de médias.

Vous verrez apparaitre la fenêtre suivante :

Dans cet exemple, vous pouvez voir que la bibliothèque contient déjà pas mal d’images (des copies d’écrans). On pourrait directement en choisir une, mais si vous voulez en importer une nouvelle, vous allez devoir cliquer sur le bouton Envoyer des fichiers, en haut et à gauche de cette fenêtre.

Envoyer des fichiers

En cliquant sur “Envoyer des fichiers“, vous faites apparaitre une fenêtre intermédiaire comportant un nouveau bouton CHOISIR DES FICHIERS, sous lequel figure un message d’avertissement.
La limite de poids autorisée pour importer votre image est de 2 Mo. Si vous n’avez pas suivi mon conseil et que vous cherchez à importer une superbe photo en haute résolution, cette image sera refusée.
Mais comme vous avez fait le nécessaire, il n’y aura pas de problème 🙂
Cliquons donc d’un geste plein d’optimisme sur ce bouton CHOISIR DES FICHIERS

La fenêtre de votre gestionnaire de fichiers s’ouvre. Il ne vous reste plus qu’à sélectionner l’image que vous souhaitez importer (fichier avec extension .jpg, .png ou .gif en couleurs RVB s’il vous plait). Si vous sélectionnez des types de fichiers non autorisés, cela vous sera refusé.

Une fois l’image importée, elle apparait dans votre bibliothèque de médias. Cliquez une fois dessus pour la sélectionner, vous verrez

alors apparaitre les paramètres de réglage de l’image sur la droite de la bibliothèque, comme sur l’image ci-contre :

Supprimer définitivement : se passe de commentaires 😉

Adresse web : le chemin utilisé par WordPress pour retrouver le fichier contenant l’image. Une image n’est jamais stockée DANS une page web. C’est uniquement son chemin qui est indiqué avec le contenu.

Titre : Laissez le nom de l’image s’il est explicite, sinon vous pouvez indiquer un titre, lequel sera examiné par les moteurs de recherche

Légende : sert au référencement de votre image par les moteurs de recherche, mais optionnel

Texte alternatif : le texte qui sera affiché au cas où l’image ne le serait pas. Ce texte sert également aux machines lisant les contenus pour les personnes ayant une déficience visuelle. Ce serait donc sympa de penser à elles…

Description : Si vous faites une belle série de photos, ajouter une description à chacune d’elles permettra là aussi aux moteurs d’associer ce contenu à l’image et donc de la rendre plus accessible.

Une fois que vous avez saisi les informations souhaitées, cliquez sur le bouton de validation au bas de la zone de paramètre (ici le bouton s’intitule  PARAMÉTRER L’IMAGE SÉLECTIONNÉE ).

Votre image est maintenant ajoutée au contenu de votre zone d’édition (ex : le texte de votre page). Elle apparait entourée d’une zone de sélection et est surmontée de plusieurs icônes comme dans l’exemple ci-dessous :

Les icônes au dessus de l’image servent à la positionner par rapport au texte : aligner à gauche, aligner au centre, aligner à droite…
Le crayon permet de rouvrir l’éditeur de paramètres afin de choisir par exemple la taille d’apparence de votre image (j’explique cela plus bas).
Vous pouvez aussi modifier directement les dimensions d’affichage de votre image en manipulant les “poignées” de la zone de sélection (les petits carrés placés à chaque angle de cette zone).

Attention : votre image a ses propres dimensions (largeur, hauteur) qui sont celles de l’image d’origine que vous venez d’importer. Si vous décidez de réduire les dimensions de cette image, ce sont uniquement les dimensions d’affichage qui seront modifiées, pas ses vraies dimensions. Le fichier ne sera pas modifié. Donc, si votre but final était d’afficher une image très petite et que vous avez importé une image beaucoup plus grande, le résultat est que vous aurez un fichier nettement plus lourd que si vous aviez directement importé une image  plus petite.
“Et alors, qu’importe le poids, on n’est pas au régime !”, me direz-vous ?

Ben si, cela importe : un fichier plus lourd ralentit le temps de chargement d’une page. Les internautes sont impatients : si c’est trop lent à charger, ils partent voir ailleurs !

Il reste quelques fonctionnalités de traitement de l’image, mais cela vous sera moins utile, donc je vous présenterai cela dans un autre tutoriel.

Dernière chose : vous pouvez mettre plusieurs images dans une zone de contenu mais, par pitié, ne surchargez pas une seule page de trop d’images. Si vous avez besoin de créer un catalogue d’images, contactez le webmaster et nous chercherons une solution. De toute façon, tous les contenus sont soumis à validation, afin justement d’éviter ce genre de problème.