Rogner / modifier une image sous WordPress ?

WordPress intègre des outils pour éditer vos images directement depuis le back-office : redimensionnement, rognage et rotation sont autant d’outils souvent méconnus des utilisateurs débutants.

Ce tutoriel aura donc pour objectif de vous faire découvrir une fonctionnalité bien pratique.

Je vous propose donc un tutoriel spécialement dédié aux débutants pour changer un peu. Aujourd’hui, pas de fonctions spéciales ou de boucles PHP, uniquement un article pour mettre en lumière certaines fonctionnalités de WordPress à côté desquelles passent bon nombre d’utilisateurs novices.

WordPress vous offre deux façons de procéder : l’éditeur d’image de la médiathèque, dont les retouches valent pour toutes vos prochaines insertions de l’image, et l’outil de recadrage du bloc Image, qui crée une copie retouchée pour le contenu en cours.

Édition d’un fichier image sous WordPress

L’ensemble des modifications de fichiers images s’effectue depuis Médias > Médiathèque. Cliquez sur la photo à modifier pour ouvrir la fenêtre Détails du fichier joint ou, en vue liste, sur son titre pour ouvrir l’écran Modifier un média.

Juste en-dessous de l’image d’aperçu, notez la présence d’un bouton Modifier l’image.

A partir de là, il suffit de cliquer dessus pour atteindre les options de retouche intégrées à WordPress.

Retouches d’image sous WordPress

Rogner une image

La première étape consiste à tracer une zone de sélection directement sur l’aperçu de la photo. De cette manière, nous allons délimiter la zone à conserver.

Le panneau Recadrer l’image s’affiche alors. Ajustez si besoin la sélection avec ses poignées, puis cliquez sur Appliquer le recadrage. Vous pouvez aussi commencer par le bouton Recadrer de la barre d’outils, qui sélectionne d’abord toute l’image.

Notez que vous pouvez délimiter la sélection en saisissant directement ses dimensions en pixels dans les champs Sélection et Coordonnées de départ du panneau. Pour imposer un format, indiquez-le dans Proportion de taille, par exemple 16 et 9, ou maintenez la touche Maj enfoncée pendant que vous redimensionnez la sélection pour conserver ses proportions.

Personnellement, je pense qu’il est beaucoup plus simple d’agir directement sur la photo.

Techniquement, WordPress ne touche pas à votre fichier d’origine : à l’enregistrement, il crée un nouveau fichier image et régénère à partir de lui les différentes tailles de l’image. La taille des miniatures, la taille moyenne et la grande taille se règlent sous Réglages > Médias ; WordPress en crée d’autres, de même que certains thèmes et extensions (voir la gestion des miniatures avec WordPress). Ces tailles sont créées lors de l’importation : pour régénérer les images après une modification des dimensions, utilisez ce plugin :

Redimensionner une image

Le deuxième outil intéressant concerne la mise à l’échelle d’une photo à la résolution de votre choix. Pour ce faire, cliquez sur Redimensionner dans la barre d’outils puis, dans le panneau Redimensionnement de l’image, saisissez soit la largeur, soit la hauteur : WordPress calcule l’autre valeur pour conserver les proportions. Une image peut seulement être réduite, pas agrandie.

Lorsque vous êtes satisfait, cliquez sur le bouton Redimensionner du panneau : la nouvelle taille est enregistrée aussitôt. Comme le conseille l’aide de WordPress, redimensionnez l’image avant de la recadrer, de la retourner ou de la faire pivoter.

Autres options de retouche d’image

La barre d’outils propose également les options suivantes :

• Rotation de l’image : un menu pour faire pivoter l’image de 90° à gauche ou à droite, ou de 180° ;
• Retournement : vertical ou horizontal, dans ce même menu ;
• Annuler / rétablir : pour éviter toute erreur de manipulation ;

Vos retouches ne sont appliquées au fichier qu’au moment où vous cliquez sur Enregistrer les modifications : vous pouvez donc enchaîner recadrage, rotation et retournement, puis tout enregistrer en une fois. Le bouton Annuler la modification referme l’éditeur sans rien enregistrer.

Si le résultat ne vous convient pas, rouvrez l’éditeur : la section Restaurer l’image originale qui y apparaît propose un bouton Rétablir l’image pour revenir à l’image d’origine. Les copies modifiées restent toutefois dans le dossier des médias.

Deux précisions : une image déjà insérée dans un contenu continue d’afficher son ancienne version, et vos retouches s’appliquent à toutes les tailles de l’image. Depuis WordPress 6.3, le réglage qui permettait de ne modifier que la miniature est masqué par défaut.

Félicitations, vous venez de modifier avec succès votre fichier image. Vous serez donc en mesure de l’insérer dans vos pages de contenus.

Recadrer une image dans l’éditeur de blocs

Pour une image déjà insérée dans un article ou une page, inutile de passer par la médiathèque : sélectionnez le bloc Image, puis cliquez sur Recadrer dans sa barre d’outils. Depuis WordPress 7.1, ce bouton ouvre la fenêtre Modifier le média.

Dans l’onglet Recadrer, ajustez le cadre à l’aide de ses poignées, choisissez au besoin une Proportion de taille (Libre, Originale, Carré – 1:1…), faites pivoter, retournez ou zoomez, puis cliquez sur Enregistrer. La règle graduée sous l’image permet aussi de la faire pivoter de quelques degrés, et l’onglet Détails de modifier son texte alternatif ou sa légende.

À l’enregistrement, WordPress ne modifie pas l’image d’origine : il ajoute à la médiathèque une copie retouchée, dont le nom de fichier se termine par -edited, et l’utilise dans le bloc. Le message « Image modifiée. » qui s’affiche alors propose un bouton Annuler pour revenir à l’image précédente.

Recadrer ne suffit pas toujours à alléger une page : mon offre d’optimisation des performances WordPress traite aussi le poids et le format de vos images.

Pour contrôler le cadrage de chaque taille d’image, apprenez à rogner manuellement vos miniatures avec Manual Image Crop.