Devenez votre propre Webmaster

Redimensionner une image automatiquement avec WordPress

Redimensionner les images automatiquement avec WordPressRedimensionner une image automatiquement avec WordPress est une chose que même un enfant serait faire 😉

Si sur la page d'accueil de votre blog, vous avez placé une miniature à côté de chaque résumé d'article, comme sur C' ça le net, il est préférable de créer une miniature plutôt que d'afficher une grande image et de la compresser. Déjà le résultat est moins bon, mais surtout le fait d'afficher des images miniatures plutôt que de grandes images redimensionnées, allège les pages et diminue le temps de chargement.

Une page dont le poids est important est handicapant. Les moteurs de recherche pénalisent les sites trop lents et à l'époque ou le nombre de personnes, qui naviguent depuis des smartphones et des tablettes, augmente de façon importante, les pages avec de grandes images, même compressées pour être affiché en petit, est un handicape.

Vous allez voir qu'il suffit de quelques lignes de code pour créer automatiquement des images à la bonne dimension avec WordPress.

Pourquoi redimensionner automatiquement les image avec WordPress ?

Lorsque vous créez un nouveau type de format d'image, WordPress créé une copie de chaque image que vous importez dans les médias. Il garde l'image dans sa taille originale et créé autant de format d'image que défini dans le fichier functions.php.

Par défaut WordPress propose déjà nativement une miniature appelée "thumbnail", qui fait 150*150pixels.

Il y a des tas d'exemples pour démontrer l'utilité du redimensionnement automatiquement des images que vous importez dans les médias de WordPress.

  • Vous utilisez des miniatures pour la présentation de vos articles WordPress
  • Vous êtes photographe et/ou vous avez des galeries de photo sur votre site et si les photos ont toutes la même hauteur cela fait plus professionnel
  • Vous ne savez pas redimensionner les images, alors pourquoi ne pas laisser WordPress le faire Automatiquement ?
  • Pour vous simplifier la vie en automatisant le traitement
  • Pour avoir un site professionnel avec des présentations de pages identiques
  • Pour présenter des vignettes de vos articles sur des pages de votre catalogue en ligne
  • ...

Redimensionner automatiquement avec WordPress et les utiliser

Redimensionner les images automatiquement avec WordPress

Rien de plus simple. Cependant, une limite. Le redimensionnement sur WordPress diminue les images que vous importez dans les médias, il ne les agrandi pas. Donc si vous importez des images ou photos trop petites elles ne seront pas redimensionnées.

Supposons que vous ayez besoin de miniatures pour la présentation des articles dans votre catalogue en ligne. Ces miniatures feront 200*200pixels. Nous appellerons ces miniatures "mini-pres-article".

Il suffit d'ajouter dans les lignes suivantes dans le fichier functions.php :

if ( function_exists( 'add_image_size' ) ) 
    add_image_size( 'mini-pres-article', 200, 200, false );

On vérifie que la fonction de redimensionnement des images existe, puis on créé une nouvelle version de l'image au dimensions définies pour chaque image que l'on intègre aux médias de WordPress.  La fonction add_image_zise possède 4 paramètres :

  • $name : le nom du format de l'image que l'on utilisera pour afficher ce format d'image (obligatoire)
  • $width : La largeur maximale de l'image (option)
  • $height : La hauteur Maximale de l'image (option)
  • $crop : Par défaut "false" pour ne pas tronquer l'image, ou initialisé à "true" si on veut retaillé l'image (option)

Si le 4ème paramètre est initialisé  à "false", WordPress redimensionne l'image avec le bord le plus large correspondant à la largeur ou hauteur initialisé par les paramètres de la fonction "add_image_size" mais garde les proportions de l'image.

Si le 4ème paramètre est initialisé à "true", l'image n'est pas redimensionné, mais recadré aux dimensions passés dans lors de l'appel de la fonction "add_image_size" et le reste de l'image est tronqué.

Utiliser les photos redimensionner automatiquement avec WordPress

Rien de plus simple. Il suffit d'ajouter les lignes suivantes à l'endroit où l'on veut récupérer l"image dans notre nouveau format (par exemple dans le fichier index.php) :

<?php 
$attachment_id = 8; // attachment ID
$image_attributes = wp_get_attachment_image_src( $attachment_id, 'mini-pres-article' ); // retourne un tableau avec le path de l'image et les dimensions de celle-ci.
?> 
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">

Voilà cela reste assez simple

Pour aller plus loin

Je vous propose de voir dans de prochains articles comment gérer les thumbnail.

Nous verrons aussi dans de prochains articles comment modifier et ajouter un avatar par défaut. Les avatars par défaut de WordPress n'étant pas terrible, comme vous pouvez le voir sur ce blog, il est possible d'en mettre d'autres, plus beaux.

Posts Similaires
Ajoutez la miniature de vos articles dans vos flux RSS WordPress

Le flux RSS est un canal qui peut vous apporter des centaines de visiteurs sur votre site. Ajoutez une miniature devant chaque résumé d'article dans vos flux RSS pour accrocher plus facilement l'attention de vos visiteurs.

Personnalisez les Avatars des commentaires WordPress

Wordpress propose des avatars par défaut disgracieux et peu professionnels. Il est possible de créer un avatar par défaut personnalisé. Il est possible aussi de créer un avatar qui s'affichera sur tous vos commentaires laissé sur d'autres sites ou blogs ou populariser votre image de marque.

Ajouter des shortcodes à votre site WordPress

Créez vos propre shortcodes si vous souhaitez pouvoir ajouter des éléments graphiques comme des div ou des boutons ou encore des formulaires de saisie dans vos pages Wordpress.

A propos de

Consultant en informatique et concepteur de sites Internet.

Il a travaillé pendant plus de quinze ans pour une multinationale dans le secteur de l'ingénierie Informatique.

Durant ces années, il a participé à des projets sur les systêmes de facturation et la conception des sites Internet de différentes Banques et opérateurs téléphonique à travers le monde

Senior Analyst Programmer/Team Leader, il a participé et dirigé des projets sur les plus gros clusters d'Europe.

Il habite à Paris, en ile de France .

Le Site :

Le Blog :

4 commentaires pour "Redimensionner une image automatiquement avec WordPress"
  • C' ça le Net
    Commentaire 4203

    Excellent article. je vous remercie pour l’effort :)

  • C' ça le Net
    Commentaire 4224

    Bonjour ,
    merci pour ces informations bonne continuation !!!

  • C' ça le Net
    Commentaire 4830

    Excellent article!
    Merci pour le partage

  • C' ça le Net
    Commentaire 4863

    Excellent article!
    Merci pour le partage