Comment optimiser les images pour WordPress et accélérer son site

Pour optimiser les images pour WordPress, choisissez un format adapté, redimensionnez vos fichiers avant leur téléversement et compressez-les. Vérifiez ensuite leur qualité et leur chargement sur ordinateur et sur mobile. Ces gestes réduisent le poids des pages et peuvent améliorer leur vitesse d’affichage.

Pourquoi optimiser les images de votre site WordPress

Une photographie directement issue d’un appareil peut être bien plus grande et plus lourde que nécessaire pour une page web. Si plusieurs images de ce type figurent sur la même page, les visiteurs doivent télécharger davantage de données avant de voir le contenu.

Des images adaptées contribuent à une navigation plus fluide, notamment sur mobile. La vitesse de chargement peut aussi avoir une incidence sur le référencement, même si elle ne suffit pas à garantir un meilleur classement.

L’optimisation des images fait partie d’un travail plus large sur la vitesse. Pour examiner les autres causes possibles d’un site lent, consultez notre guide pour optimiser les performances WordPress.

Choisir le bon format pour chaque image

Le format détermine notamment la manière dont l’image est compressée et les usages auxquels elle convient. Choisissez-le selon le contenu de l’image plutôt que d’appliquer systématiquement le même format à tous les fichiers.

• JPEG : adapté aux photographies et aux images riches en couleurs et en détails. Il permet généralement d’obtenir des fichiers plus légers que le PNG pour une photo.
• PNG : pratique pour les logos, les icônes, les contours nets et les images nécessitant de la transparence.
• GIF : utilisé principalement pour les animations.
• WebP : adapté aux photographies comme à d’autres images web, il peut produire des fichiers plus légers que JPEG ou PNG à qualité visuelle comparable.

Le WebP est pris en charge par les navigateurs modernes. Si votre site doit fonctionner sur des navigateurs anciens, vérifiez leur compatibilité et prévoyez, si nécessaire, une image de secours dans un autre format.

Pour choisir entre deux formats, exportez la même image dans chacun d’eux, puis comparez leur poids et leur qualité à la taille où elle sera affichée. Une image plus légère n’est pas utile si elle devient floue ou si des défauts sont visibles.

Redimensionner et compresser les images avant leur ajout

Adapter les dimensions à l’emplacement

Les dimensions en pixels doivent correspondre à l’usage prévu. Une grande image de fond ou de bannière peut nécessiter une largeur supérieure à celle d’une illustration insérée dans un article. Une largeur de 1 200 pixels peut convenir à de nombreuses images, mais elle n’est pas une règle universelle.

Avant le téléversement, repérez la largeur maximale à laquelle l’image sera affichée. Redimensionnez ensuite votre fichier dans un logiciel d’image, sans l’agrandir artificiellement. Vérifiez le résultat sur les différents écrans : une image trop petite peut paraître floue, tandis qu’une image beaucoup trop grande alourdit inutilement la page.

WordPress crée plusieurs tailles d’image lors du téléversement. Partir d’un fichier aux dimensions adaptées reste néanmoins utile pour éviter de conserver et de transmettre une image originale excessivement lourde.

Choisir le type de compression

La compression réduit le poids du fichier, exprimé en octets. Il en existe deux grandes catégories :

• Avec perte : certaines informations sont supprimées pour réduire le poids. Une compression trop forte peut rendre l’image floue ou faire apparaître des défauts.
• Sans perte : le fichier est réduit sans supprimer d’informations de l’image. La qualité est préservée, mais le gain de poids peut être plus limité.

Conservez une copie de l’image d’origine avant de l’optimiser. Comparez ensuite le fichier compressé à cette copie, en particulier sur les zones détaillées, les textes et les contours.

Pour les boutiques en ligne, le poids des photos doit être mis en balance avec la visibilité des détails du produit. Notre guide sur l’optimisation des images de produits WordPress détaille cette approche.

Automatiser l’optimisation et le chargement des images

Utiliser une extension d’optimisation

Des extensions comme Smush, EWWW Image Optimizer ou ShortPixel Image Optimizer peuvent automatiser la compression des images ajoutées à WordPress. Selon l’outil et sa configuration, elles peuvent aussi proposer d’autres fonctions, comme l’optimisation d’images déjà présentes ou la conversion dans un format plus récent.

Pour commencer :

1. Dans l’administration WordPress, ouvrez Extensions > Ajouter une extension.
2. Recherchez l’extension choisie, puis installez-la et activez-la.
3. Consultez ses réglages et choisissez le niveau de compression adapté.
4. Téléversez une image de test et comparez son poids et son apparence avec l’original.
5. Vérifiez l’affichage sur votre site avant d’optimiser une bibliothèque entière.

Une compression automatique peut modifier la qualité visuelle si elle est trop forte. Évitez également d’activer plusieurs outils réalisant la même opération sans vérifier leur fonctionnement : cela rend les réglages et le diagnostic plus difficiles.

Activer le chargement différé avec discernement

Le chargement différé, ou lazy loading, consiste à attendre que les images approchent de la zone visible avant de les charger. Il peut réduire les ressources nécessaires à l’affichage initial d’une page contenant de nombreuses images.

WordPress prend en charge le chargement différé pour de nombreuses images. Des extensions comme a3 Lazy Load ou BJ Lazy Load proposent également cette fonction. Avant d’en installer une, vérifiez ce que font déjà votre site et vos extensions.

Après activation, parcourez la page sur ordinateur et sur mobile pour vous assurer que les images apparaissent correctement. Une image importante visible dès l’ouverture de la page ne devrait généralement pas être retardée inutilement.

Précharger les images prioritaires

Le préchargement indique au navigateur qu’une ressource importante doit être récupérée tôt. Il peut être utile pour une image principale affichée dès l’ouverture de la page.

Réservez cette technique aux ressources réellement prioritaires : précharger toutes les images peut concurrencer le chargement d’autres éléments utiles. Vérifiez le résultat après toute modification, notamment sur la page d’accueil.

Améliorer le référencement et la diffusion des images

Renseigner le texte alternatif et le titre

Dans la médiathèque WordPress, ouvrez une image pour modifier ses informations. Renseignez un texte alternatif qui décrit son contenu ou sa fonction dans le contexte de la page. Ce texte aide notamment les personnes qui utilisent un lecteur d’écran et peut aider les moteurs de recherche à comprendre l’image.

Pour une image purement décorative, un texte alternatif vide peut être approprié. Le titre du média peut aussi être renseigné de manière descriptive pour faciliter son identification, mais il ne remplace pas le texte alternatif. Évitez d’y accumuler des mots-clés sans rapport avec l’image.

Utiliser un CDN si nécessaire

Un CDN, ou réseau de distribution de contenu, conserve des copies des fichiers sur plusieurs serveurs. Il peut fournir les images depuis un serveur adapté à la localisation du visiteur et ainsi réduire le temps nécessaire à leur livraison.

Certains services CDN s’intègrent à WordPress, et certaines extensions d’optimisation d’images proposent une intégration. Leur intérêt dépend notamment de votre hébergement et de la localisation de votre public. Après configuration, vérifiez que les images restent accessibles et s’affichent correctement sur vos pages.

Vérifier les images et résoudre les problèmes de chargement

Après chaque changement de format, de compression ou de chargement, ouvrez les pages concernées et contrôlez les images. Comparez leur netteté, leur poids et leur affichage sur mobile. Si vous utilisez un cache, videz-le avant de vérifier que la nouvelle version est bien visible.

Si une image ne se charge plus, procédez par étapes :

1. Vérifiez que le fichier est toujours présent dans Médias > Médiathèque et que son format est pris en charge.
2. Essayez d’ouvrir l’image directement depuis la médiathèque pour distinguer un problème de fichier d’un problème de page.
3. Si l’erreur est apparue après une modification, vérifiez les réglages de l’extension concernée ou du CDN.
4. Examinez les éventuelles erreurs du serveur et, si vous l’avez modifié, le fichier .htaccess.

Un conflit entre extensions ou une configuration serveur incorrecte peut empêcher le chargement. Lorsque le problème concerne une page de portfolio, consultez aussi le guide de résolution des erreurs de chargement de portfolio.

Si les images sont correctes mais que les pages restent lentes, d’autres éléments peuvent être en cause. Une démarche d’accélération de site WordPress permet d’examiner l’ensemble du chargement.

Questions fréquentes

Article rédigé avec l’aide d’une IA à partir des sources citées et de notre pratique de la maintenance WordPress. Notre méthode éditoriale.