La gestion des images sous WordPress : le guide complet

Le guide complet pour tout comprendre sur le fonctionnement des images sous WordPress.

Comment fonctionne le système de tailles d’images sous WordPress ?

Lorsque vous téléversez une image dans votre bibliothèque de médias, WordPress génère des tailles supplémentaires à partir du fichier source.

Par défaut, 4 tailles sont générées :

  • Miniature (150 x 150 pixels avec rognage activé par défaut) ;
  • Moyenne (300 x 300 pixels sans rognage par défaut) ;
  • Moyenne large (768 pixels de large sans limite de hauteur et sans rognage par défaut, invisible pour l’utilisateur mais utile pour l’affichage responsive) ;
  • Large (1024 x 1024 pixels sans rognage par défaut) ;

Vous pouvez modifier ces tailles dans Réglages puis Médias.

Les thèmes et les extensions présents sur votre installation sont également ammenés à créer leurs propres tailles d’images via la fonction add_image_size. C’est souvent utile pour des questions de web-design comme lors de la création d’un thème WordPress sur-mesure par exemple.

Il n’est pas donc pas rare d’atteindre rapidement la dizaine de tailles additionnelles générées à partir de votre image source.

Bien que cette approche soit nécessaire pour répondre aux usages, il n’en demeure pas moins que cela augmente la consommation d’espace disque sur les serveurs d’hébergements et donc l’empreinte carbonne.

Comment régénérer les tailles d’images sous WordPress ?

La modification d’un réglage sur les tailles d’images ou bien l’installation d’un nouveau thème ou d’une nouvelle extension au sein de votre installation WordPress requiert de régénérer les différentes tailles. Omettre cette régénération entraîne bien souvent des problèmes d’affichage sur les images et / ou des performances dégradées.

Ce processus consomme énormément de ressources serveur et s’opère de 2 façons :

  • Par une extension spécialisée comme Regenerate Thumbnails pour ne citer que celle-ci. Ce projet qui avait été abandonné par le passé est à nouveau la solution que je recommande car elle autorise la suppression des anciennes ce qui vous fera économiser de l’espace disque ;
    Regenerate Thumbnails

    Extension WordPress permettant de redimensionner des images déjà importés dans la bibliothèque de médias.

    Taille : 77 o  • Hits : 2 397
  • Par le recours à la commande wp media regenerate via WP-CLI pour les utilisateurs avertis ;

La première méthode est la plus simple mais présente des risques que toutes les images ne soient pas régénérées notamment sur des installations à plusieurs milliers d’images.

La seconde méthode est clairement la plus fiable et la plus rapide mais également la plus technique. Il faut également que votre hébergeur vous autorise un accès SSH et que WP-CLI soit installé.

Notez également que votre serveur d’hébergement doit disposer des librairies PHP ImageMagick ou GD sans quoi les images envoyées ne disposeront pas des tailles additionnelles. Vous pouvez facilement vérifier cela dans Outils puis Santé du site introduit dans WordPress 5.1.

Sachez enfin que WooCommerce dispose d’un outil natif pour procéder à la régénération des tailles d’images. Cette fonctionnalité garantit un affichage optimal de vos produits et s’exécute en tâche de fond.

Comment supprimer les images inutilisées en masse sous WordPress ?

Après des années d’utilisation, il y a de fortes chances pour que votre bibliothèque ne ressemble plus à rien et que nombre de vos fichiers images ne soient même plus utilisées dans vos pages Web.

Pour remédier à cela, j’ai testé l’extension Media Cleaner de Jordy Meow un français expatrié au Japon. Elle permet de scanner intégralement votre bibliothèque et de supprimer les entrées inutiles et les fichiers inutilisés. La corbeille des médias sera activée afin d’éviter des suppressions malencontreuses mais bien évidemment une sauvegarde préalable est plus que nécessaire.

Media Cleaner

L'extension pour nettoyer en masse les images inutilisées de votre bibliothèque de médias.

Taille : 375,0 Ko  • Hits : 8

Pour aller plus loin, la version Pro offre la possibilité de scanner directement les répertoires présents sur votre serveur et apporte la compatibilité avec des extensions populaires comme ACF, Divi Builder, Fusion Builder, WPBakery Page Builder, Elementor… et bien d’autres constructeurs de pages.

Je l’ai personnellement essayé sur le site d’un client doté d’une lourde problématique d’images dupliquées à cause de l’extension multilingue WPML. Le résultat est sans appel.

Comment optimiser les images en masse sous WordPress ?

Le temps de chargement de vos pages est principalement lié au poids de vos images.

Généralement, il est conseillé d’optimiser vos images en les compressant à 70-80% pour les formats JPEG (photographies). Il est également possible d’optimiser vos éléments d’iconographie généralement via des outils dédiés pour les formats PNG ou SVG.

Par expérience, nous pouvons distinguer 2 cas de figure :

  1. Les images sont optimisées en amont via un logiciel de retouche photo (Adobe Photoshop, Affinity Designer ou encore Aperçu sous MacOS) ou des outils en ligne (Compressor.io a clairement ma préférence) ;
  2. Les images sont optimisées en aval via une extension sous WordPress comme Smush, EWWW Image Optimizer ou encore Imagify ;

Tous ces outils disposent de leurs propres algorithmes d’optimisation qu’il conviendra d’ajuster afin d’établir le bon compromis entre performances et qualité d’image. Plus vous compressez, plus vous gagnez en performances au détriment de la qualité et vice versa.

Comment optimiser les images pour le SEO sous WordPress ?

Au delà du temps de chargement de vos pages Web qui est directement lié aux poids de vos images, vous pouvez agir sur la balise alternative. Cette balise est en premier lieu utilisée à des fins d’accessibilité mais son usage en a été détourné à des fins d’optimisation de votre référencement. La réponse à celà est simple : un robot ne peut pas décoder une image et ce, malgré les améliorations significatives en matière d’Intelligence Artificielle.

Ainsi, lorsque vous envoyez une image, WordPress vous propose 4 champs :

  1. Texte alternatif : c’est cette fameuse balise que les moteurs vont analyser, placez-y des mots-clés de manière intelligente. Ne faites pas dans la suroptimisation en répétant systématiquement les mêmes expressions ou en alignant les mots-clés en les séparant par des virgules… c’est contre-productif ! Au contraire, cette balise doit permettre aux utilisateurs de comprendre le sens de l’image. Enfin, pour les images purement décoratives, cet élément peut rester vide ;
  2. Titre : cette balise n’est pas interprêtée par les moteurs de recherche et ne devrait pas utilisée dans le code source de vos pages. Elle est plutôt utile pour nommer vos médias en back-office ;
  3. Légende : ce texte s’affichera sous vos images dans le contenu de vos pages tout simplement ;
  4. Description : ce champ est quasi-inutile, il sert uniquement à afficher des informations sur vos pages de fichiers joints. En effet, WordPress génère une URL dédiée par média et c’est dans cette page que le thème peut afficher le contenu de ce champ. La quasi-totalité des sites bien conçus désactivent ces URLs à l’aide d’une extension SEO comme SEOPress ;

Si vous recherchez une extension pour automatiser efficacement ce travail d’optimisation de vos balises ALT, je vous conseille de tester Image SEO développé par une startup lyonnaise :

Image SEO

Automatiser la génération de vos balises ALT afin d'optimiser votre SEO.

Taille : 157,0 Ko  • Hits : 7

Quelles nouveautés sous WordPress 5.3 ?

Pour les utilisateurs

La version 5.3 de WordPress introduit un changement majeur quant à la gestion des images originales.

Si votre image dépasse 2560 pixels de large, une taille additionnelle dite big_image sera générée et considérée comme étant la taille originale. Concrètement, si vous insérez une image en taille originale dépassant cette largeur prédéfinie dans un contenu, WordPress affichera la taille big_image. Les tailles originales ne sont dès lors plus jamais affichées sur votre site sauf en deçà de 2560 pixels de large.

Ce changement a été introduit afin d’optimiser les performances tout en proposant une largeur d’image suffisament élevée pour couvrir les écrans HDPI. Elle répond également à de nouveaux usages plus mobile qui consiste à créer du contenu depuis son smartphone. Ces derniers génèrent des photos de plusieurs Mo qu’il est donc impensable d’afficher directement sur une page sans optimisation préalable.

Pour les développeurs

Un nouveau filtre big_image_size_threshold a été introduit afin de modifier la valeur des 2560 pixels de large.

Une nouvelle fonction wp_get_original_image_path a été introduit afin de récupérer facilement la taille d’origine dans vos thèmes et extensions. En effet, les fonctions PHP habituelles que vous pouviez utiliser avec l’argument de taille full se baseront désormais sur le nouveau système et donc la taille géante.

Pour désactiver cette nouvelle mise à l’échelle, vous pouvez coller cette ligne de code dans le fichier functions.php de votre thème ou dans un mu-plugin :

add_filter('big_image_size_threshold', '__return_false');

On appréciera également la possibilité de pivoter automatiquement une image en se basant sur ses données EXIF et l’ajout de 2 tailles supplémentaires pour un meilleur support de srcset.

Le traitement à l’envoi d’une image dans la bibliothèque diffère également afin d’éviter d’éventuels problèmes de génération très gourmand sur les serveurs. À la différence des versions antérieures à la 5.3, des métadonnées seront stockées en base de données après chaque création de tailles supplémentaires et non à la fin comme précédemment. Cette nouvelle approche devrait aider à la résolution d’erreurs HTTP sur des serveurs mutualisés notamment.

Le côté négatif de ces changements restent l’occupation supplémentaire d’espace disque pour les fichiers et, dans une moindre mesure, l’augmentation des requêtes en écriture sur la base de données.

Ce guide dédié à la gestion des images sous WordPress sera mis à jour régulièrement afin d’intégrer les évolutions futures.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Des tutoriels et des bons plans en exclusivité !
  • Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
4 commentaires
  1. Woubi

    Bonjour,
    Est ce à dire qu’il n’y a plus besoin de redimensionner les images avec la nouvelle version de WP ?
    Et comment définir nous même une taille inférieur à 2560px ?
    Merci 😉

    1. Aurélien Denis auteur de l’article

      On peut considérer cela en effet bien que je préconise de ne pas stocker inutilement des fichiers de plusieurs Mo sur son serveur. La valeur de 2560 pixels peut être redéfinie à l’aide du filtre big_image_size_threshold.

  2. Cyrille Sanson

    Bonjour
    Merci pour cet excellent article Aurélien. J’ai appris des choses sur les images sous WordPress, alors que j’avais écris un article intitulé « Comment optimiser les images pour le web ».
    Je me suis permis d’ajouter le tiens en référence.
    Bonne journée,

    1. Aurélien Denis auteur de l’article

      Merci bien ! Je compte le peaufiner pour intégrer de nouvelles informations prochainement. 😉

Laisser un commentaire