Compresser ses images pour WordPress

Combien pèse une photo et quelle taille pour une image web ?

Une photo tout juste sortie d’un smartphone récent pèse en général entre 3 et 5 Mo. Elle mesure souvent 4000 pixels de large, parfois davantage, parce que le capteur est pensé pour recadrer ou tirer sur papier, pas pour s’afficher dans une colonne de blog. Sur une page web, cette même image n’a pas besoin du dixième de ce poids : quelques centaines de Ko suffisent largement, et souvent bien moins.

La raison est simple : la largeur réellement affichée. Dans la plupart des thèmes WordPress, la zone de contenu fait entre 700 et 1200 pixels de large. Une image pleine largeur, en en-tête ou dans un bloc « Couverture », dépasse rarement 1600 à 1920 pixels. Si l’on prévoit les écrans haute densité, une largeur comprise entre 800 et 1600 pixels couvre l’immense majorité des usages. Tout ce qui dépasse est téléchargé par le navigateur, puis réduit à l’affichage : des octets transférés pour rien.

Ce surpoids se paie de trois façons. D’abord en temps de chargement, surtout sur mobile et en 4G faible, où une galerie de dix photos brutes représente plusieurs dizaines de Mo. Ensuite en référencement : l’élément le plus lourd en haut de page est très souvent une image, et c’est lui que Google mesure pour juger si la page s’affiche vite. Enfin en espace disque et en sauvegardes : WordPress conserve l’original et en génère plusieurs déclinaisons (miniature, moyenne, grande), donc une photo trop lourde au départ se retrouve multipliée.

Bon à savoir : depuis la version 5.3, WordPress réduit automatiquement à 2560 pixels les images envoyées plus grandes, mais il garde l’original à côté et ne touche ni au format ni aux métadonnées. Ce garde-fou évite le pire, pas l’essentiel. La règle reste la même : préparer l’image avant de la téléverser dans la médiathèque.

Quel poids viser concrètement ? Il n’existe pas de chiffre officiel, mais des ordres de grandeur pratiques : une image de contenu de 1200 pixels de large tient le plus souvent sous 200 Ko, une grande image d’en-tête sous 300 à 400 Ko, une vignette sous 50 Ko. Si une image dépasse nettement ces repères, c’est que l’un des trois réglages décrits ci-dessous a été oublié.

Optimiser des images pour le web : les trois leviers, dans l’ordre

Pour optimiser des images pour le web, on dispose de trois leviers. Ils ne se valent pas : voici leur ordre d’efficacité, du plus puissant au plus fin.

1. Réduire le côté maximal. C’est de loin le levier le plus efficace, et celui qui se voit le moins. Le poids d’une image dépend du nombre de pixels, qui varie avec le carré des dimensions. Passer de 4000 à 1600 pixels de large divise le nombre de pixels par plus de six. À l’écran, si la colonne fait 1200 pixels, personne ne fera la différence : le navigateur aurait de toute façon réduit l’image.
2. Choisir le format. À dimensions égales, une photo enregistrée en PNG peut peser plusieurs fois plus lourd que la même en JPEG, et les formats récents comme WebP ou AVIF descendent encore plus bas. Changer de format ne coûte presque rien en qualité perçue si le format est adapté au contenu (photo ou graphisme).
3. Baisser la qualité. Le curseur de qualité vient en dernier, pour affiner. Entre une qualité très élevée et une qualité moyenne, le gain de poids est réel, mais au-delà d’un certain point les défauts deviennent visibles : blocs dans les dégradés de ciel, halos autour des contours, textures qui bavent.

L’erreur la plus courante consiste à faire l’inverse : garder une photo de 4000 pixels et pousser la qualité très bas pour atteindre un poids raisonnable. Le résultat est une image à la fois trop grande et abîmée. Réduire d’abord les dimensions permet ensuite de garder une qualité confortable, autour de 75 à 85 pour une photo, tout en restant léger.

Une méthode simple pour vos images trop lourdes sur votre site : partez de la largeur réellement affichée, multipliez-la par deux au maximum pour les écrans Retina, fixez le côté maximal à cette valeur, choisissez le format, puis ajustez la qualité en regardant le résultat à 100 %. Si vous avez besoin d’un poids précis, par exemple pour une boutique qui limite la taille des fichiers, un réglage de poids cible en Ko fait le calcul à votre place.

Un mot sur le cas inverse : si votre image est trop petite pour la place qu’elle occupe (un logo récupéré en 300 pixels, une vieille photo de produit), la compression n’y changera rien. Il faut d’abord agrandir une image avec un modèle d’IA qui reconstruit le détail, puis la compresser.

Quel format choisir pour des images trop lourdes sur un site ?

Le format est le deuxième levier, et le plus mal compris. Voici comment choisir selon l’usage.

• JPEG : le choix de la compatibilité totale. Tous les navigateurs, toutes les messageries, tous les logiciels l’ouvrent. Pour une photo destinée à être partagée, envoyée par e-mail ou utilisée hors du site, c’est la valeur sûre. Il ne gère pas la transparence.
• WebP : le bon équilibre pour le web. À qualité visuelle comparable, il est nettement plus léger que le JPEG, gère la transparence et est accepté par WordPress depuis la version 5.8 ainsi que par tous les navigateurs actuels. Pour la plupart des sites, c’est le format par défaut à privilégier.
• AVIF : quand le poids prime sur tout le reste. C’est le plus compact des trois pour les photos, particulièrement sur les dégradés et les ciels. WordPress l’accepte depuis la version 6.5, à condition que le serveur sache le traiter. L’encodage est plus lent et quelques vieux logiciels ne l’ouvrent pas encore.
• PNG : uniquement quand il faut de la transparence avec un rendu sans perte, ou pour des captures d’écran avec beaucoup de texte fin. Pour une photo, le PNG est presque toujours le mauvais choix : il conserve chaque pixel à l’identique et pèse en conséquence.

Un cas fréquent sur les boutiques en ligne : le produit détouré sur fond transparent. Si vous venez de supprimer le fond d’une photo, vous avez obtenu un PNG avec canal alpha, souvent lourd. Deux options pour l’alléger : le passer en WebP, qui garde la transparence pour beaucoup moins de poids, ou, si le thème affiche le produit sur fond blanc, remplacer directement le fond par du blanc et exporter en JPEG. C’est ce que demandent de toute façon la plupart des places de marché comme Amazon.

Et les photos HEIC de l’iPhone ? La plupart des navigateurs ne les affichent pas, et selon la configuration de votre hébergement, WordPress ne saura pas toujours les traiter. Mieux vaut les convertir avant l’envoi : notre article pour convertir un HEIC en JPG détaille la démarche, et la même opération peut produire du WebP ou de l’AVIF.

Faut-il proposer plusieurs formats à la fois ? Certains sites servent l’AVIF aux navigateurs qui le gèrent et le JPEG aux autres. C’est utile pour un site à très fort trafic, beaucoup moins pour un blog ou une petite boutique : un WebP bien réglé couvre déjà tous les navigateurs actuels avec un poids très raisonnable.

Métadonnées : alléger et protéger sans changer les couleurs

Une photo de smartphone ne contient pas que des pixels. Elle embarque un bloc de métadonnées, appelé EXIF, qui décrit la prise de vue : date et heure exactes, marque et modèle de l’appareil, réglages (ouverture, vitesse, sensibilité), orientation, parfois une miniature intégrée et, si la localisation était activée, les coordonnées GPS du lieu de la photo.

Les supprimer a deux avantages. Le premier est le poids : sur une photo déjà réduite et compressée à 150 Ko, les métadonnées et la miniature intégrée peuvent représenter une part qui n’est plus négligeable. Le second est la vie privée. Une photo prise dans votre jardin, publiée telle quelle sur un blog, peut révéler l’adresse de votre domicile à quiconque télécharge le fichier et lit ses EXIF. Pour une boutique, ces données n’apportent rien au client ; pour un particulier, elles peuvent exposer bien plus que prévu.

Il y a cependant une information qu’il faut absolument conserver : le profil de couleur ICC. Il indique au navigateur comment interpréter les couleurs du fichier. Les smartphones récents enregistrent souvent en Display P3, un espace plus large que le sRGB classique. Si l’on supprime le profil en même temps que le reste, le navigateur suppose du sRGB et les couleurs changent : rouges ternes, peaux grisâtres, bleus moins profonds. C’est le défaut typique des outils qui « nettoient tout » sans distinction.

La bonne pratique est donc de retirer les métadonnées personnelles et techniques tout en gardant le profil ICC. Autre détail qui compte : l’orientation. Beaucoup de photos de téléphone sont enregistrées « couchées » avec une simple indication de rotation dans les EXIF. Si l’on efface cette indication sans avoir d’abord tourné les pixels, la photo s’affiche de travers. Un bon outil applique la rotation avant de retirer les métadonnées.

Si la colorimétrie vous intéresse au-delà de l’écran, notre article sur RVB en CMJN explique ce qui change quand on passe à l’impression.

Compresser des images pour WordPress avec Airpic, étape par étape

Voici comment préparer une image pour WordPress avec Airpic, du fichier brut au fichier prêt à téléverser.

1. Ouvrez l’outil pour compresser des images et déposez votre photo, ou collez-la avec Ctrl+V. Sont acceptés le JPG, le PNG (avec transparence et en 16 bits), le WebP, le TIFF, le HEIC et l’AVIF. L’orientation EXIF est appliquée automatiquement.
2. Fixez le côté maximal. Indiquez la largeur réellement affichée par votre thème, multipliée au besoin pour les écrans haute densité : 1200 à 1600 pixels pour une image de contenu, 1920 pour un grand en-tête. C’est le réglage qui fait le plus gagner.
3. Choisissez le format de sortie : WebP pour un site WordPress récent, AVIF si le poids est la priorité, JPEG si l’image doit aussi circuler hors du site, PNG seulement pour une transparence sans perte.
4. Réglez la qualité ou un poids cible. Le curseur de qualité convient quand vous voulez juger à l’œil ; le champ de poids cible en Ko est plus pratique si vous visez une limite précise, par exemple 150 Ko par image.
5. Cochez la suppression des métadonnées. Date, modèle de l’appareil et position GPS disparaissent, le profil ICC est conservé pour que les couleurs restent identiques.
6. Lancez le traitement : la compression tourne sur processeur et prend quelques secondes. Comparez avant et après avec le curseur, puis téléchargez.

Compresser est entièrement gratuit, traitement et téléchargement compris, sans compte et sans abonnement. Les fichiers sont supprimés une heure après le téléchargement, un jour au maximum, et ne servent jamais à entraîner un modèle. Pour aller plus loin sur les réglages, le guide pour compresser des images pour le web sans perdre en qualité détaille chaque paramètre.

Si certaines photos posent un autre problème avant la compression (grain d’une photo prise de nuit, produit à détourer), traitez-le d’abord : réduire le bruit d’une photo aide aussi la compression, car le grain se compresse mal. Ensuite, revenez ici pour compresser vos images pour WordPress en quelques secondes.

FAQ

À lire ensuite