Optimiser les images de produits sur WordPress : le guide

Pour optimiser les images de produits sur WordPress, choisissez des photos nettes, redimensionnez-les et compressez-les avant ou après leur ajout au site. Utilisez un format adapté, renseignez un texte alternatif descriptif et vérifiez leur affichage sur mobile. Ces actions réduisent le poids des pages tout en conservant des visuels utiles aux visiteurs.

Choisir des images de produits claires et cohérentes

Les photos aident les visiteurs à comprendre ce qu’ils achètent. Une image floue, trop petite ou mal éclairée peut rendre un produit difficile à évaluer. À l’inverse, un fichier de très grande taille n’apporte pas nécessairement de bénéfice visible sur une fiche produit et peut ralentir son chargement.

Sélectionnez des images qui montrent clairement le produit, sous plusieurs angles et, si cela apporte une information utile, dans son contexte d’utilisation. Pour un vêtement, vous pouvez par exemple associer une vue portée à un gros plan du tissu ou des finitions.

Gardez aussi une présentation cohérente d’une fiche à l’autre : cadrage, éclairage et style doivent s’accorder avec votre boutique. Cette cohérence facilite la comparaison entre produits sans imposer des photos identiques.

Redimensionner et compresser les images de produits

La dimension d’une image, exprimée en pixels, et le poids de son fichier sont deux choses différentes. Une photo peut avoir de grandes dimensions et être compressée, mais rester inutilement lourde si elle dépasse largement la taille nécessaire à son affichage.

Avant de l’importer dans WordPress, adaptez ses dimensions à la plus grande taille à laquelle elle sera réellement affichée, notamment si votre boutique propose un zoom. Conservez une copie de l’original pour pouvoir créer d’autres formats si nécessaire.

Choisir le bon format

Le format dépend du contenu de l’image et de son usage :

• JPEG convient généralement aux photographies de produits et offre un bon compromis entre poids et qualité.
• PNG est utile lorsqu’une image nécessite de la transparence ou contient des éléments graphiques nets.
• GIF peut servir aux images animées.

Comparez le rendu et le poids du fichier : un changement de format n’est utile que s’il conserve une qualité adaptée à votre fiche produit.

Réduire le poids sans dégrader le rendu

Des outils comme TinyPNG ou Compress JPEG permettent de compresser les images avant leur importation. Après compression, vérifiez les détails importants : texture d’un tissu, contours, texte éventuel et couleurs. Si l’image devient floue ou présente des défauts visibles, réduisez le niveau de compression.

Pour compléter cette méthode, consultez notre guide d’optimisation des images sur WordPress.

Automatiser l’optimisation avec une extension WordPress

Une extension peut être pratique si vous ajoutez régulièrement des produits ou si votre médiathèque contient déjà de nombreuses images. Smush, cité parmi les outils d’optimisation, peut notamment compresser les images importées et proposer une optimisation des fichiers déjà présents. Ses réglages permettent aussi de gérer le redimensionnement et certaines données EXIF.

Pour démarrer :

1. Dans l’administration WordPress, ouvrez Extensions > Ajouter une extension.
2. Recherchez Smush, puis installez et activez l’extension.
3. Ouvrez ses réglages et examinez les options de compression et de redimensionnement proposées.
4. Testez d’abord les réglages sur quelques images, puis comparez leur qualité avant et après optimisation.
5. Si le résultat convient, lancez l’optimisation des images existantes selon les options disponibles.

Effectuez une sauvegarde avant une opération en masse et vérifiez les fonctionnalités disponibles dans la version installée. Une extension ne remplace pas le choix d’une image source nette ni le contrôle visuel du résultat.

Renseigner les noms de fichiers et les textes alternatifs

Un nom de fichier descriptif aide à identifier l’image et donne du contexte aux moteurs de recherche. Avant l’importation, préférez un nom tel que chaussure-course-rose.jpg à un nom automatique peu parlant. Utilisez des mots qui décrivent réellement le produit, sans accumuler de mots-clés.

Le texte alternatif, ou texte alt, décrit quant à lui le contenu ou la fonction d’une image. Il est notamment utilisé par les lecteurs d’écran et peut s’afficher lorsque l’image ne se charge pas. Il aide aussi les moteurs de recherche à comprendre le visuel, sans garantir un meilleur classement.

Dans WordPress, vous pouvez le renseigner ainsi :

1. Ouvrez Médias > Médiathèque et sélectionnez l’image.
2. Dans les détails du fichier, repérez le champ Texte alternatif.
3. Décrivez le produit et les détails visibles utiles, puis vérifiez le résultat dans la page.

Par exemple, « chaussure de course Nike Air Zoom Pegasus pour femmes en rose » est plus informatif que « chaussure », si la photo montre bien ce modèle et cette couleur. Adaptez la description au contexte plutôt que de répéter systématiquement le titre du produit. Pour les autres aspects de la visibilité de votre boutique, consultez le guide du référencement WordPress.

Adapter les images aux écrans et au chargement

Une image de produit doit rester lisible sur ordinateur comme sur mobile, sans déborder de son conteneur. WordPress crée plusieurs tailles d’image et peut fournir au navigateur des sources adaptées. Le thème et la façon dont l’image est intégrée influencent toutefois le résultat.

Ouvrez vos fiches produits sur plusieurs tailles d’écran et contrôlez les images principales, les miniatures et les vues agrandies. Si une photo paraît floue ou déborde, vérifiez ses dimensions et les réglages de votre thème. Notre guide pour optimiser WordPress pour le mobile détaille d’autres points à contrôler.

Le chargement différé, ou lazy loading, permet de reporter le chargement de certaines images situées plus bas dans la page. WordPress le prend en charge pour de nombreuses images, mais le comportement dépend aussi du thème et des extensions. Vérifiez notamment que l’image principale reste visible rapidement et que les autres images apparaissent correctement au défilement.

Tester la vitesse et l’indexation des images

Après vos modifications, testez une ou plusieurs fiches avec Google PageSpeed Insights. Examinez les recommandations concernant les images, puis comparez-les avec le rendu réel : une image plus légère ne doit pas empêcher de voir les détails du produit.

Testez également la navigation sur mobile et sur ordinateur. Si les pages restent lentes malgré l’optimisation des images, d’autres éléments peuvent être en cause, comme le cache, les extensions ou l’hébergement. Vous pouvez poursuivre avec le guide d’optimisation de la vitesse WordPress ou examiner les possibilités d’accélération d’un site WordPress lent.

Pour une boutique contenant beaucoup d’images, un sitemap d’images peut aider Google à les découvrir. Vérifiez les fonctionnalités de votre outil de référencement avant d’en créer un : sa présence facilite la découverte, mais ne garantit pas l’indexation.

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.