Ajuster et positionner une image ou une vidéo

Une image bien placée guide la lecture : à côté du texte qui la présente, à la bonne taille, sans écraser la page sur un téléphone. Le client lit plus facilement et voit mieux le produit ; l'entreprise met en valeur ses photos et garde des pages légères, qui s'affichent vite.

Où le trouver

La place et la taille dans la page : dans l'éditeur, clic sur l'image ou la vidéo, puis bouton Alignement de la barre d'outils et réglages du panneau Bloc.

Le fichier lui-même (recadrer, faire pivoter, réduire) : Médias › Médiathèque, clic sur l'image, puis Modifier l'image.

Les étapes

1. Ouvrir la page ou l'article dans l'éditeur et cliquer sur l'image pour sélectionner son bloc. Sur le modèle, les images des articles sont des blocs Image de Spectra (famille Spectra Legacy de l'outil d'insertion), comme celle de l'article « Détergents solides » ; le bloc Image de WordPress, de la famille Média, a le même bouton d'alignement.
2. Positionner : cliquer sur le bouton Alignement de la barre d'outils et choisir « Aucun », « Grande largeur », « Pleine largeur », « Aligner à gauche », « Centrer » ou « Aligner à droite ». À gauche ou à droite, le paragraphe qui suit l'image vient se placer à côté d'elle ; « Grande largeur » et « Pleine largeur » élargissent l'image au-delà de la colonne de texte.

   Capture 1. L'image de l'article « Détergents solides » sélectionnée, menu Alignement ouvert : encadrés, le bouton et ses six choix :

   

   Voir la capture en grand

3. Ajuster la taille : dans le panneau Bloc, à droite. Pour le bloc Image de Spectra, dont les réglages restent en anglais, « Alignment » place l'image dans sa colonne (à gauche, au centre, à droite), « Image Size » choisit la taille du fichier chargé (Miniature, Moyenne, Taille originale…) et « Image Dimensions » fixe la largeur (« Width ») et la hauteur (« Height ») en pixels. La poignée ronde, sur le bord de l'image sélectionnée, se fait glisser pour la réduire.

   Capture 2. Le bloc Image de Spectra et son panneau : encadrés, le bouton Alignement, la poignée de redimensionnement et les réglages « Alignment », « Image Size » et « Image Dimensions » :

   

   Voir la capture en grand

4. Pour le bloc Image de WordPress, les réglages du panneau Bloc s'appellent « Proportion de taille », « Largeur », « Hauteur » et « Résolution » (Miniature, Moyenne, Grande, Taille originale). Son bouton Recadrer, dans la barre d'outils, recadre la photo dans l'éditeur : WordPress enregistre le résultat dans un nouveau fichier et l'original reste dans la médiathèque.
5. Recadrer, faire pivoter ou réduire le fichier lui-même : Médias > Médiathèque, clic sur l'image, puis Modifier l'image. La barre propose Recadrer (tracer à la souris la zone à garder sur l'image, puis « Appliquer le recadrage »), Redimensionner (réduire l'original en gardant ses proportions ; « La taille des images ne peut être que réduite, pas augmentée. ») et Rotation de l'image (90° à gauche ou à droite, 180°, retournement vertical ou horizontal), puis Annuler, Rétablir, Annuler la modification et Enregistrer les modifications. WordPress garde l'original : « Restaurer l'image originale » le rétablit après coup.

   Capture 3. Médias > Médiathèque, photo « theiere-en-verre », écran « Modifier l'image » : encadrés, les trois outils, puis les boutons « Annuler la modification » et « Enregistrer les modifications » :

   

   Voir la capture en grand

6. Vidéo : le bloc Vidéo a le même bouton Alignement, mais aucun champ de largeur : sa taille suit l'alignement choisi et la colonne. Pour placer une vidéo ou une image à côté d'un texte, le bloc Média & texte (famille Média) propose « Afficher le média sur la gauche » ou « sur la droite », « Largeur de média » et « Empiler sur mobile ».
7. Cliquer sur Enregistrer, puis contrôler la page sur ordinateur et sur mobile.

Captures réalisées sur le site modèle Alia Nature (WordPress 7.0.2, thème Astra 4.13, extension Spectra) : selon la version installée le jour de l'épreuve, un libellé peut changer.

Bien placer et dimensionner une image

Une image se place à côté du texte qui en parle et se dimensionne en pensant au plus petit écran. Exemple avec les images d'Alia Nature :

• Réserver l'alignement à gauche ou à droite aux petites images : la documentation de WordPress rappelle qu'une grande image rend alors le texte difficile à lire, surtout sur téléphone.
• Garder la même largeur pour les images d'une même page.
• Choisir la résolution la plus petite qui reste nette : la page se charge plus vite.

Sur le modèle, l'image de l'article « Détergents solides » est un bloc Image de Spectra en « Taille originale », 702 pixels sur 701, sans alignement, sous le texte (captures 1 et 2) : elle occupe toute la colonne. C'est acceptable pour un visuel qui porte un message, mais une simple photo de produit gagnerait à être réduite et placée à côté de son texte.

À l'épreuve

Ce que l'examinateur vérifie

• L'image déplacée avant le paragraphe, à la largeur demandée, alignée à gauche.
• Le texte qui s'affiche à côté de l'image, lisible.
• Une image nette, aux proportions respectées.
• L'article enregistré et contrôlé sur ordinateur et sur mobile.

Les erreurs fréquentes

• Aligner à gauche une image placée après le texte : aucun paragraphe ne vient à côté ; la remonter d'abord avec la flèche « Monter ».
• Étirer une petite image en « Pleine largeur ».
• Recadrer dans la médiathèque alors qu'il suffisait de régler le bloc.
• Oublier « Enregistrer les modifications » dans l'outil d'image, ou « Enregistrer » dans l'éditeur.

Voir aussi

Dans la série des tutoriels WordPress :

• Ajouter une photo, une vidéo ou un son
• Utiliser la médiathèque
• Insérer et modifier une galerie d'images
• Utiliser les blocs Spectra : diaporama, formulaire, FAQ…

Dans le tutoriel WordPress complet :

• Images, vidéos et médias, dont l'alignement et la taille dans le bloc Image

Documentation officielle de WordPress, en anglais : le bloc Image, la modification d'un média.

Tous les tutoriels WordPress