Modifier les images dans WordPress.com

WordPress propose des outils pour modifier les images insérées dans les articles.
La bibliothèque de médias permet de réutiliser des images déjà envoyées pour un autre article.
La barre d’outils rapides pour les images permet de facilement modifier l’affichage  d’une image  (légende,  taille, alignement…) ou de la recomposer : recadrage, rotation ou retournement.

Haut de page

Insérer des images depuis la bibliothèque de médias

Les images déjà envoyées sur le site sont disponibles dans la bibliothèque de médias .

Dans la fenêtre d’édition d’article, cliquer sur le bouton image et vidéo - bouton Ajouter un média.

Cliquer sur Bibliothèque de médias :

image dans WordPress - accéder à la bibliothèque de médias
image dans WordPress – accéder à la bibliothèque de médias

WordPress permet de filtrer la recherche des images dans la bibliothèque :

image dans WordPress - filtrer la bibliothèque
image dans WordPress – filtrer la bibliothèque

Les critères de recherche disponibles :

  • le type d’élément :
    tous les médias,
    uniquement les éléments insérés dans l’article en cours d’édition,
    les images,
    les sons,
    les vidéos,
    les éléments envoyés non intégrés dans un article (« Non-joint »),
  • la date à laquelle l’image a été envoyée vers le site à partir un ordinateur en local ,
  • un texte  à rechercher dans le titre ou dans la description des articles.

Sélectionner des images en cliquant sur leurs vignettes. Les touches CTRL (sélections isolées) et  Majuscule (sélection contiguë) permettent de sélectionner plusieurs images. Les images sélectionnées ont une coche en haut et à droite de leur vignette. En cliquant sur la coche, on désélectionne l’image :

galerie - désélectionner une image
galerie – désélectionner une image

Cliquer ensuite sur le bouton Insérer dans l’article :

modifier images - sélectionner dans la bibliothèque
modifier images – sélectionner dans la bibliothèque

Á noter : les paramètres apparaissant dans la colonne de droite ( DÉTAILS DU FICHIER ATTACHÉ ) correspondent à l’image dont la vignette a une coche sur fond bleu.

Les images sélectionnées apparaissent dans l’article en édition (la mise en page dépend de la taille des images et des alignements choisis) :

gérer images - insertion d'images depuis la bibliothèque
gérer images – insertion d’images depuis la bibliothèque

Cliquer sur le bouton bouton aperçu ou le bouton bouton prévisualiser. Cela permet de voir ce qui s’affichera pour un visiteur du site :

bibliothèque de médias - affichage visiteur
bibliothèque de médias – affichage visiteur

Supprimer une image définitivement

Sélectionner une vignette dans la bibliothèque de médias. Dans la colonne de droite, cliquer sur modifier images - suppression d'un fichier image :

modifier images - sélection d'une image à supprimer définitivement
modifier images – sélection d’une image à supprimer définitivement

WordPress.com affiche un message d’alerte, car la suppression de l’image sera irréversible (il faudra renvoyer l’image si on veut l’utiliser de nouveau) et elle disparaîtra de tous les articles où elle a pu être insérée :

modifier images - alerte lors d'une demande de suppression définitive
modifier images – alerte lors d’une demande de suppression définitive
Haut de page

La barre d’outils rapides pour les images

Dans l’éditeur d’articles, cliquer sur une image. La barre d’outils rapides pour les images apparaît :

outils images - accès à la barre d'outils images
outils images – accès à la barre d’outils images

Outils d’alignement

Cliquer sur l’une des quatre icônes d’alignement image dans WordPress - icône de modification de l'alignement.

Voici l’effet des différents alignements disponibles.

On remarquera qu’en appliquant les icônes d’alignement des paragraphes à une image sélectionnée (édition article - icônes d'alignment), on obtient le même effet qu’avec les icônes d’alignement de la barre d’outils rapides pour les images.

Alignement à gauche

image dans WordPress - alignement à gauche
image dans WordPress – alignement à gauche

Centrer

image dans WordPress - centrer
image dans WordPress – centrer

Aligner à droite

image dans WordPress - alignement à droite
image dans WordPress – alignement à droite

Pas d’alignement

Si l’image a une légende, elle est renvoyée à la ligne :

image dans WordPress - pas d'alignement avec légende
image dans WordPress – pas d’alignement avec légende

Si l’image n’a pas de légende elle s’insère dans le paragraphe :

image dans WordPress - pas d'alignement sans légende
image dans WordPress – pas d’alignement sans légende

On notera que l’option « Pas d’alignement » des images n’a pas d’équivalent dans la mise en forme des paragraphes.

Outil de suppression

Cliquer sur une image puis cliquer sur l’icône outils images - supprssion qui apparaît dans la barre d’outils rapides pour les images :

outils images - supprimer image
outils images – supprimer image

Á noter : l’image est supprimée de l’article, mais pas de la bibliothèque de médias. Il sera donc toujours possible de l’insérer dans le même article, ou dans un nouvel article simplement en la récupérant dans la bibliothèque de médias.

Outil de modification

Cliquer sur une image puis cliquer sur l’icône image dans WordPress - icône modifier l'image qui apparaît dans la barre d’outils rapides pour les images. Une fenêtre apparaît nous permettant de redéfinir les paramètres associés à l’image. Lorsqu’on a modifié les paramètres, on valide en cliquant sur le bouton modifier images - bouton Mettre à jour.

Descriptif et alignement

  • Légende,
  • Texte alternatif (ce qui s’affiche à la plage de l’image si elle ne peut être chargée dans le navigateur),
  • Alignement

L’alignement est la position que prend l’image par rapport au texte qui l’entoure.

image dans WordPress - modifier des réglages
image dans WordPress – modifier des réglages

Réglages de l’affichage

  • Taille

WordPress.com  propose un choix de taille dont la taille personnalisée qui permet de redéfinir largeur et hauteur en saisissant des valeurs :

image dans WordPress - choix d'une taille
image dans WordPress – choix d’une taille
image dans WordPress - taille personnalisée
image dans WordPress – taille personnalisée

À noter : les tailles personnalisées n’agissent que sur l’affichage de l’image, elles ne modifient pas la taille de l’image stockée sur le site (le fichier de l’image est inchangé, ce n’est qu’au moment de l’affichage que WordPress change la taille de ce qu’il fait voir aux visiteurs). Il est donc possible d’agrandir ou diminuer plusieurs fois la taille de l’image sans perte de qualité.

  • Lien

WordPress permet de créer (ou non) un lien avec l’image.

Fichier média crée un lien vers le fichier de l’image sur le serveur qui héberge le site :

image dans WordPress - lien vers le fichier média
image dans WordPress – lien vers le fichier média

Quand un visiteur du site cliquera sur l’image, celle-ci apparaîtra dans une page web , où il sera par exemple possible de la zoomer :

image dans WordPress - fichier média avec zoom
image dans WordPress – fichier média avec zoom

Page du fichier attaché crée un lien vers une page spécifique pour l’affichage des images :

image dans WordPress - lien vers une page du thème présentant l'image
image dans WordPress – lien vers une page du thème présentant l’image

Voici un exemple de ce que peut voir un visiteur du site :

image dans WordPress - exemple de page d'image
image dans WordPress – exemple de page d’image

Lien personnalisé permet d’associer une adresse web (url) quelle qu’elle soit. Par exemple, nous pouvons associer une vidéo. Quand un visiteur du site cliquera sur l’image, il sera redirigé vers la page présentant la vidéo :

image dans WordPress - lien ver une page web
image dans WordPress – lien ver une page web

Il est bien évidemment possible de n’associer aucun lien à l’image. Dans ce cas, si un visiteur clique sur l’image… il ne se passera rien :

image dans WordPress - aucun lien
image dans WordPress – aucun lien

Options avancées

modifier images - options avancées
modifier images – options avancées
  • Attribut « Title »de l’image

L’attribut « Title »permet d’afficher un texte lorsqu’une image est survolée par la souris :

modifier images - saisir un attribut titre
modifier images – saisir un attribut titre
modifier images - affichage de l'attribut titre
modifier images – affichage de l’attribut titre
  • Classe css de l’image

La classe css permet d’attribuer une mise en forme à un élément d’une page web. Pour une image, on peut par exemple définir une bordure (épaisseur, couleur, type…).

modifier images - attribuer une classe css à 'image
modifier images – attribuer une classe css à ‘image

Par exemple, cela permet d’entourer certaines images (celles à qui on associe la classe css) par une bordure en pointillé :

modifier images - affichage avec classe css
modifier images – affichage avec classe css
  • Bordure de l’image

WordPress.com permet de créer une bordure autour d’une image en choisissant l’épaisseur (en pixels) et la couleur :

modifier images - définir une bordure
modifier images – définir une bordure

Pour définir la couleur, il faut cliquer sur la case Couleur puis choisir une couleur avec l’outil de palette.

La bordure apparaît autour de l’image dans l’éditeur d’article (après avoir cliqué sur le bouton modifier images - bouton Mettre à jour) :

modifier images - bordure d'image dans l'éditeur d'article
modifier images – bordure d’image dans l’éditeur d’article

Et voici ce que pourrait voir un visiteur qui accède au site depuis son ordinateur :

modifier images - bordure d'image vue par un visiteur
modifier images – bordure d’image vue par un visiteur
  • Définition de marges

Les marges sont un espace laissé entre une image et le texte qui l’entoure. WordPress.com permet de définir 4 largeurs de marges en pixels (au-dessus, au-dessous, à gauche et à droite de l’image) :

modifier images - définir des marges
modifier images – définir des marges

Voici l’effet obtenu côté visiteur (à comparer avec la copie d’écran précédente où l’image était collée au texte) :

modifier images - marges vues par un visiteur
modifier images – marges vues par un visiteur
  • Paramétrage du lien

Si un lien est associé à l’image, WordPress.com permet de définir les trois paramètres suivants :

  • indiquer si le lien doit être ouvert dans une nouvelle fenêtre ou est un simple déplacement vers un point (ancre) de la fenêtre courante,
  • ajouter un attribut rel : on notera notamment l’attribut « rel=nofollow« , utilisé pour indiquer aux moteurs de recherche qu’ils ne doivent pas suivre le lien,
  • associer une classe css au lien
modifier images - paramétrage des liens
modifier images – paramétrage des liens
Haut de page

Modifier l’image originale

Cliquer sur l’image à modifier dans l’éditeur d’articles, puis sur l’icône image dans WordPress - icône modifier l'image  puis sur le bouton modifier images - bouton Modifier l'original.

modifier images - accéder à la modification de l'image originale
modifier images – accéder à la modification de l’image originale

Attention : les transformations seront effectuées sur le fichier contenant l’image : ce n’est pas une simple modification d’un affichage de l’image. Par exemple, si on effectue une rotation, l’image apparaîtra tournée partout ou elle est affichée sur le site, et pas seulement dans l’affichage à partir duquel on a appliqué la rotation.

WordPress fait apparaître la fenêtre suivante :

modifier images - modifier l'image originale
modifier images – modifier l’image originale

La barre d’outils permet d’appliquer des modifications sur l’image :

modifier images - barre d'outils pour modifier l'image originale
modifier images – barre d’outils pour modifier l’image originale

Une fois les modifications réalisées, il est possible de les modifier images - enregistrer les modifications sur l'image originale ou de les modifier images - annuler les modifications sur l'image originale en cliquant sur les boutons correspondants.

Recadrer l’image

Cliquer sur l’image puis déplacer la souris jusqu’à définir le nouveau dimensionnement de l’image :

modifier images - rcadrer l'image
modifier images – rcadrer l’image

On remarque que les nouvelles dimensions apparaissent dans la colonne de droite dans la section RECADRAGE DE L’IMAGE :

modifier images - section Recadrage de l'image
modifier images – section Recadrage de l’image

Il est possible de définir la proportion entre la largeur et la hauteur :

modifier images - définir les proportions d'un recadrage
modifier images – définir les proportions d’un recadrage

En survolant la surface de recadrage, le pointeur de la souris se transforme en croix fléchée. Cliquer puis déplacer la souris, la surface de recadrage se déplace avec la souris :

modifier images - déplacer la surface de recadrage
modifier images – déplacer la surface de recadrage

Cliquer sur l’icône modifier images - bouton Recadrer , l’image modifiée apparaît :

modifier images - image recadrée
modifier images – image recadrée

Cliquer sur le bouton modifier images - enregistrer les modifications sur l'image originale :

modifier images - enregistrer une image recadrée
modifier images – enregistrer une image recadrée

L’image modifiée apparaît dans l’éditeur d’article :

modif_images_57

Rotation de l’image

Rotation de 90° dans le sens inverse des aiguilles d’une montre :

modifier images - rotation sens inverse
modifier images – rotation sens inverse

Rotation de 90° dans le sens des aiguilles d’une montre :

modifier images - rotation sens des aiguilles d'une montre
modifier images – rotation sens des aiguilles d’une montre

À noter : il est possible d’effectuer plusieurs rotations.

Retournement de l’image

Retournement de l’image dans le sens vertical :

modifier images - retournement vertical
modifier images – retournement vertical

Le retournement horizontal (les zèbres « regardent » dans l’autre sens) :

modifier images - retournement horizontal
modifier images – retournement horizontal

Annuler et rétablir la dernière action

modifier images - annuler la dernière action
modifier images – annuler la dernière action

 

modifier images - rétablir la dernière action
modifier images – rétablir la dernière action

Redimensionner l’image originale

Dans la colonne de droite, définissez une nouvelle taille d’image (largeur x hauteur en pixels). Quand on modifie une dimension, WordPress calcule l’autre de façon à conserver la proportion.

modifier images - redimensionner l'image originale
modifier images – redimensionner l’image originale

WordPress précise que le redimensionnement a été réalisé. Cliquer sur le bouton modifier images - bouton Retour pour revenir aux détails de l’image :

modifier images - image originale redimensionnée
modifier images – image originale redimensionnée

Cliquer sur le bouton modifier images - bouton d'aidepermet d’obtenir de l’aide.  WordPress.com précise que la taille de l’image ne peut pas être augmentée.

Augmenter la taille d’une image originale entraîne une perte de définition puisqu’il y a autant de pixels pour une surface plus grande).
Supposons qu’on double la taille du fichier image. Si on affiche ensuite avec la taille de départ, cet affichage se fera avec perte de définition.  Il vaut donc mieux ne pas « agrandir » l’image originale, mais agrandir la taille de l’affichage là où c’est souhaité (par déplacement des poignées ou utilisation d’un css).
C’est aussi pourquoi il ne faut diminuer la taille d’une image originale en dessous des tailles utilisées pour son affichage, sauf à accepter la perte de définition (une définition moindre, veut dire un fichier image moins volumineux et donc un temps de téléchargement réduit, ce qui peut être l’effet recherché).

 Remplacer une image

Dans l’éditeur d’article, cliquer sur une image puis sur le bouton image dans WordPress - icône modifier l'image :

modifier images - image à remplacer
modifier images – image à remplacer

Dans la fenêtre Détails de l’image, cliquer sur le bouton modifier images - bouton Remplacer:

modifier images - image à remplacer
modifier images – image à remplacer

Remplacer par une image de la bibliothèque de médias

Cliquer sur une vignette de la bibliothèque de médias. L’image sélectionnée apparaît dans la colonne de droite. Cliquer sur le bouton modifier images - bouton Remplacer :

modifier images - remplacer depuis la bibliothèque de médias
modifier images – remplacer depuis la bibliothèque de médias

L’ancienne image disparaît et la nouvelle image vient se positionner au même endroit. Attention : la taille et définition des images n’étant pas forcément identiques, un recadrage peut être nécessaire :

modifier images - image de remplacement dans l'éditeur d'article
modifier images – image de remplacement dans l’éditeur d’article

Remplacer par une image envoyée

Cliquer sur l’index modifier images - index Envoyer des fichiers , puis sur le bouton image et vidéo - lancer la sélection des fichiers à envoyeret sélectionner une image dans l’explorateur de Windows :

modifier images - sélectionner une image de remplacement à envoyer
modifier images – sélectionner une image de remplacement à envoyer

L’image sélectionnée apparaît dans la colonne de droite. Cliquer sur le bouton modifier images - bouton Remplacer, l’image de remplacement apparaît dans l’éditeur d’article :

modifier images - remplacement par une image envoyée
modifier images – remplacement par une image envoyée
Haut de page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.