Vos pages WordPress chargent des photos trop lourdes, mais les compresser davantage rend les détails illisibles. Le bon réglage ne consiste pas à appliquer le même pourcentage à toute la médiathèque. Il faut servir les dimensions adaptées, choisir le format selon l’image et traiter différemment le visuel principal et ceux qui apparaissent plus bas dans la page.
Vérifier le fichier réellement téléchargé
Une image affichée sur 420 pixels de large n’a pas toujours besoin d’un fichier de 2 400 pixels. Sur un écran de densité 2, une largeur de 840 pixels constitue un ordre de grandeur utile pour cette zone précise. Ce n’est pas une règle pour tous les écrans ou tous les niveaux de zoom.
Dans les outils du navigateur, examinez l’URL de l’image choisie, ses dimensions et son poids transféré. WordPress peut générer plusieurs tailles, mais un thème ou un constructeur peut toujours appeler l’original. La présence de miniatures dans la médiathèque ne prouve pas qu’elles sont utilisées.
La documentation web.dev sur les images responsives explique le rôle de srcset et sizes. Le premier expose des candidats, le second décrit la taille d’affichage attendue. Le navigateur choisit en tenant compte de ces informations et de l’écran. Une valeur sizes trop large peut lui faire télécharger un fichier inutilement grand.
Choisir le format après comparaison visuelle
Pour une photographie, comparez plusieurs encodages, dont WebP ou AVIF lorsque votre chaîne de traitement les prend en charge. Pour une capture contenant du texte fin, contrôlez les contours et les petits caractères. Le fichier le plus léger n’est pas acceptable si le lecteur ne peut plus lire une interface.
Conservez un original de travail pour les futures déclinaisons, sans le servir systématiquement sur le site. Préparez les recadrages nécessaires plutôt que de compter sur le navigateur pour masquer une grande partie d’un fichier lourd. Une image de fond purement décorative et une capture explicative n’ont pas les mêmes besoins d’accessibilité ni de définition.
Donner la priorité au visuel qui conditionne l’affichage
Si l’image principale est l’élément LCP, elle doit être découverte et chargée rapidement. Évitez de lui appliquer un chargement différé. Vérifiez aussi qu’un script ou un carrousel ne retarde pas son apparition. Le poids du fichier n’explique pas à lui seul tout le délai.
Les images situées plus bas peuvent bénéficier d’un chargement différé. Renseignez les dimensions intrinsèques ou réservez leur ratio pour éviter que le texte se déplace pendant leur arrivée. Ces décisions se vérifient avec les mesures de chargement et de stabilité.
Valider sur un échantillon représentatif
Choisissez une page d’accueil, un article avec captures et une page riche en photos. Pour chacune, relevez le fichier téléchargé, le poids, la netteté et le comportement au chargement sur mobile et ordinateur. Gardez les mêmes conditions pour comparer les versions.
Après une modification des tailles ou du thème, contrôlez les anciennes images autant que les nouveaux téléversements. Si vous régénérez des formats, vérifiez l’espace disque et le comportement des pages avant de généraliser. Le travail de performance WordPress doit ensuite confirmer que les fichiers optimisés sont bien servis après renouvellement des caches.