Recadrer les images

Voici les façons simples et fiables de recadrer des images dans WordPress (WP 6.x), du plus rapide au plus précis.

1) Recadrer directement dans l’éditeur de blocs (rapide)

Pour une image insérée dans un article/page:

1. Cliquez l’image > barre d’outils du bloc > icône “Recadrer”.
2. Ajustez avec les poignées ou choisissez un ratio (1:1, 16:9, 4:3…).
3. Vous pouvez aussi pivoter/zoom (selon le bloc) puis valider avec la coche.
4. Mettez à jour la page.

• Astuce: le recadrage du bloc n’altère pas toujours l’original en Médiathèque; il peut générer une variante utilisée uniquement dans ce contenu.

2) Recadrer dans la Médiathèque (précis et persistant)

Pour modifier le fichier image au niveau média:

1. Médias > Bibliothèque > cliquez sur l’image > “Modifier l’image”.
2. Sélectionnez une zone à la souris, ou:
   • Entrez un ratio (ex. 16:9) dans “Contraindre les proportions”.
   • Entrez des dimensions exactes (en px) dans “Taille de sélection”.
3. Cliquez l’icône “Recadrer” pour appliquer, puis “Enregistrer”.
4. Choisissez la portée (si proposée): “Appliquer à toutes les tailles”, “Miniature seulement”, ou “Toutes sauf miniature”.
5. Vous pouvez “Restaurer l’image originale” à tout moment.

• Bon à savoir: ici, WordPress crée des versions recadrées pour les tailles concernées et conserve l’original caché pour restauration.

3) Recadrer les vignettes (miniatures) automatiquement

• Réglages > Médias > “Miniature”:
  • Cochez “Recadrer la miniature à des dimensions exactes” pour un cadrage dur (hard crop) de la taille “thumbnail”.
• Si vous changez ces tailles après coup, utilisez “Regenerate Thumbnails” pour recréer toutes les variantes.

4) Définir vos propres tailles recadrées (développeur)

Utile pour imposer un ratio uniforme (ex. cartes d’articles 16:9):

// functions.php (thème enfant)
add_theme_support('post-thumbnails');
add_image_size('card-16x9', 640, 360, true); // true = recadrage dur
// puis utilisez: the_post_thumbnail('card-16x9');

Après ajout, régénérez les miniatures.

5) Recadrage pour images d’arrière‑plan (Cover/Hero)

• Bloc “Couverture”: utilisez le sélecteur de point focal pour “décadrer” intelligemment sans couper le sujet.
• Pour des backgrounds en CSS, pensez à fournir un visuel déjà recadré et utilisez background-position pour cadrer le sujet. Alternative en balise <img>: object-fit: cover; pour un rendu “recadré” via CSS (sans modifier le fichier).

6) Bonnes pratiques de cadrage

• Travaillez sur une copie si vous hésitez; l’original peut être restauré, mais mieux vaut prévenir.
• Ne pas “agrandir” (upscale): recadrez puis, si nécessaire, réduisez. Gardez assez de pixels pour les écrans Retina (jusqu’à 2× la taille d’affichage).
• Gardez le sujet centré ou appliquez la règle des tiers pour un rendu équilibré.
• Après gros changements de tailles dans le thème, régénérez les miniatures pour éviter des flous ou des déformations.

7) Plugins utiles (recadrage ciblé)

• Crop Thumbnails ou Manual Image Crop: recadrer précisément chaque taille d’image (ex. miniature vs bannière).
• Perfect Images (ShortPixel): gère tailles, retina et recadrages automatiques.
• Regenerate Thumbnails: indispensable après avoir ajouté/modifié des tailles.

8) Différence recadrer vs redimensionner

• Recadrer: on coupe une partie de l’image pour changer le cadrage et/ou le ratio.
• Redimensionner (scale): on réduit la largeur/hauteur mais on garde tout le contenu. Pour la performance, combinez les deux si nécessaire.