Guide expert : Maîtriser les vignettes, tailles d'images et images mises en avant sur WordPress

Une image vaut mille mots, à condition qu'elle soit parfaitement optimisée. WordPress propose des outils puissants pour gérer les redimensionnements et vignettes, évitant tout cafouillage visuel. Découvrez tout sur les tailles d'images et les images mises en avant.

Modifier les fichiers PHP de votre thème WordPress

Ce guide inclut du code PHP pour WordPress. Si vous débutez, suivez notre cours gratuit intensif PHP avant de procéder. (Note : lien fictif pour exemple ; adaptez.)

Pas à l'aise avec l'édition des thèmes ? Évitez les pertes lors des mises à jour en utilisant le plugin Mes fonctions personnalisées.

https://en-gb.wordpress.org/plugins/my-custom-functions/

Fondamentaux des tailles d'images WordPress

Dans le tableau de bord WordPress, accédez à Paramètres > Médias. Vous y trouverez trois tailles par défaut : vignette, moyenne et grande.

La vignette peut être recadrée précisément aux dimensions spécifiées (rapport d'aspect libre). Avec le recadrage activé, l'image est mise à l'échelle, centrée, puis rognée.

Pour moyenne et grande, définissez des dimensions maximales : l'image est réduite si nécessaire, mais pas agrandie si trop petite.

À l'upload, l'original est conservé, et les versions redimensionnées générées automatiquement.

Ajouter des tailles d'images personnalisées dans WordPress

Les tailles par défaut ne suffisent souvent pas. Thèmes et plugins en ajoutent, et vous pouvez le faire via functions.php de votre thème.

Ajoutez ce code pour chaque nouvelle taille :

add_image_size( 'my-thumbnail', 400, 200, true );

Paramètres : nom, largeur, hauteur, recadrage (true/false). Privilégiez le recadrage pour les layouts fixes.

Attention : chaque taille génère une copie par image uploadée. Limitez-les pour éviter l'explosion de fichiers (ex. : 10 tailles = 100 fichiers par article avec 10 images).

Impossible de limiter une taille aux seules images mises en avant. Les anciennes tailles persistent même après suppression du code.

Pour nettoyer : Media Cleaner (sauvegardez d'abord !).

Tailles personnalisées dans le contenu des articles

Par défaut, seules les tailles standards apparaissent dans l'éditeur. Pour inclure les vôtres :

function image_sizes_to_mediapicker( $default_sizes ) { 
  return array_merge( $default_sizes, array( 
    'my-thumbnail' => __( 'Ma vignette personnalisée' ), 
  ) ); 
} 
add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

Adaptez 'my-thumbnail' et le libellé convivial.

Gérer les images mises en avant WordPress

Les images mises en avant (featured images) sont traitées comme les autres : toutes les tailles sont générées.

Si absentes de l'éditeur, ajoutez à functions.php :

add_theme_support( 'post-thumbnails' );

Afficher dans un thème : the_post_thumbnail( 'my-thumbnail', array( 'class' => 'my_post_thumbnail_css_class' ) );

Ou récupérer l'URL :

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' ); 
echo $thumbnail[0];

Régénérer les miniatures WordPress

Les changements s'appliquent aux nouveaux uploads seulement. Pour les anciens : plugin AJAX Thumbnail Rebuild.

Limitations : ne modifie pas les images déjà insérées dans le contenu (réinsérez manuellement).

Sélectionnez les tailles cibles pour optimiser.

Apprenez aussi la différence JPG vs PNG pour des choix optimaux.

Booster votre site WordPress

Perfectionnez votre thème avec nos tutoriels CSS et HTML. Découvrez des thèmes photo pros.

Site lent ou cher ? Optez pour InMotion Hosting ou Bluehost (liens affiliés MakeUseOf).