WordPress – Gérer la génération des images

I. Présentation

Lorsque vous envoyez une image sur votre site WordPress par l'intermédiaire du formulaire d'envoi intégré, WordPress ne se contente pas d'uploader uniquement l'image. En effet, il génère des images de tailles différentes selon ce que vous avez configuré dans WordPress, ce que votre thème et ce que vos plug-ins requiert.

Ainsi, pour une image envoyée vous pouvez vous retrouver avec 10 fichiers supplémentaires sur votre serveur en obtenant ce genre de chose :

Vous voyez qu'il y a de nombreux fichiers, un fichier correspondant à l'image originale et d'autres fichiers avec d'autres dimensions. Les dimensions étant précisées à la fin du fichier : -250x300, -160x160, -200x150, etc.

Pour rappel, les images sont stockées par défaut dans le répertoire suivant : /wp-content/uploads

Dans ce tutoriel, intéressons-nous à la gestion de la génération des images afin de créer de nouvelles tailles d'images mais aussi d'empêcher la création sous certaines tailles. Cela évitera de surcharger votre serveur de fichiers inutilisés.

L'intérêt de générer des images de tailles différentes à partir de l'image d'origine est de charger un fichier de taille adapter selon où il est placé sur le site. Par exemple, votre thème pourra appeler les images en dimension type "vignette" plutôt qu'une image de taille originale qui serait bien plus lourde à charger lors de la connexion cliente.

II. La configuration des médias

Pour gérer la taille des images générées par WordPress, depuis l'interface d'administration accédez à "Réglages" puis "Médias. Sur cette page, vous pourrez configurer 3 tailles d'images que WordPress doit générer lorsque vous uploader un fichier.

Si vous utilisez ces 3 tailles proposées par WordPress, cela vous fait déjà potentiellement 4 fichiers pour chaque image.

III. Le thème et les plug-ins

Quant au thème et aux plug-ins ce n'est pas aussi simple à gérer. En fait, chaque thème et chaque plug-in peut demander à WordPress de lui générer une image de taille personnalisée.

A. Création d'image avec add_image_size

Pour créer une image à des dimensions personnalisées, il faudra utiliser la commande :

add_image_size();

D'après les informations fournies dans le Codex de WordPress, cette fonction peut être utilisée comme ceci :

add_image_size( "nom", largeur, hauteur, proportion );

L'attribut nommé "proportion" dans l'exemple ci-dessus est nommé "crop" dans le Codex WordPress, il est correspond à un paramètre booléen (true/false) permettant d'indiquer si les images générées doivent être proportionnées (false) ou recadrées pour être créées aux dimensions exactes (true).

Par exemple, si l'on veut créer une vignette nommée "slider" de largeur "300 px" et de hauteur "200 px" devant être recadrée, il faudra déclarer :

add_image_size( "slider", 300, 200, true );

B. Comment empêcher la génération de certaines images ?

Si certaines images redimensionnées vous sont inutiles et que vous souhaitez empêcher qu'elles soient générées, il faudra supprimer la déclaration add_image_size() correspondante dans un fichier PHP.

Deux questions se posent :

- Quelles tailles d'images sont générées ? Par qui ?

- Dans quel fichier PHP trouver les déclarations ?

Pour répondre à ces deux questions, une commande s'impose :

grep "add_image_size" * -ri

Cette commande cherchera la présence de l'expression "add_image_size" dans tous les fichiers situés dans le dossier courant et dans ses sous-dossiers, donc avec récursivité, et sans prendre en compte la casse.

Je vous conseil d'exécuter la commande en se positionnant au préalable dans le dossier correspondant à votre thème ou dans le répertoire de plug-in, cela évitera que la commande parcoure trop de fichiers d'un coup et que l'exécution prenne trop de temps à parcourir des répertoires inutiles.

Vous obtiendrez un résultat de ce type :

montheme1/lib/images.gen.php:     add_image_size( 'home', 300, 300, true );
montheme1/lib/images.gen.php:     add_image_size( 'relatedpost', 290, 190, true );
montheme1/lib/images.gen.php:     add_image_size( 'min', 50, 50, true );

Ensuite, vous n'avez plus qu'à éditer les fichiers concernés afin de commenter ou de supprimer l'appel de la fonction dans le but qu'elle ne soit plus généré.

Florian BURNEL Co-founder of IT-Connect

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

See Full Bio