Ouvrez l’onglet réseau sur presque n’importe quel site lent : les images sont le poste le plus lourd, souvent plus que tous les scripts et feuilles de style réunis. La solution est rarement compliquée : la plupart des images sont envoyées en résolution d’appareil photo et affichées à une fraction de cette taille, sans autre compression que celle du téléphone. Bien traiter ses images est le changement au meilleur rapport effort/résultat que la plupart des sites puissent faire — et il ne demande aucun développeur. Compresser des images est le changement au meilleur rapport effort/résultat que la plupart des sites puissent faire.
Ce guide parcourt les décisions dans l’ordre où vous devriez les prendre : d’abord les dimensions, puis le format, puis le niveau de compression, enfin la diffusion.
1. Les dimensions : la plus grosse fuite
Une photo de téléphone fait 4 000 × 3 000 pixels. L’emplacement le plus large où elle s’affichera sur un site fait peut-être 1 200 pixels. Le navigateur télécharge pourtant les 12 millions de pixels et en jette 90 %. Règles pratiques :
- Images hero pleine largeur : 1 600–2 000 px.
- Images dans les articles : 1 200 px.
- Miniatures et cartes : 600–800 px.
- Pour les écrans Retina, le double de la taille affichée mais plus compressé : des images plus nettes pour presque le même poids.
Cette seule étape réduit la plupart des photos de 70 à 85 %.
2. Le format : JPG, PNG, WebP ou AVIF
| Format | Usage | Poids par rapport au JPG |
|---|---|---|
| JPG | Photos, compatible partout | Référence |
| PNG | Logos, captures, transparence | souvent 3 à 5× plus lourd sur des photos |
| WebP | Standard web, photos et graphiques, transparence | −25 à −35 % |
| AVIF | Fichiers les plus légers, plus lent à produire | −40 à −50 % |
L’erreur la plus fréquente : des photos en PNG. Le PNG est sans perte et, pour des photos, tout simplement le mauvais outil. La deuxième : des captures avec du texte en JPG, dont les bords deviennent baveux. Pour 2026 : WebP par défaut, AVIF quand votre chaîne le permet, JPG/PNG en repli pour les vieux clients mail.
3. Compresser des images : la règle 75–85
L’échelle de qualité n’est pas linéaire. De 100 à 85, vous perdez à peine du détail visible mais la moitié du poids. De 85 à 60, vous gagnez encore un tiers et les artefacts apparaissent sur les bords et les dégradés. Le bon compromis pour les photos est 75–85 ; pour des fonds recouverts de texte, 60–70 suffisent ; pour des photos produit zoomables, 85–90.
Ne vérifiez pas le résultat à la loupe. Ouvrez l’original et la version compressée côte à côte en taille normale : si vous ne voyez pas la différence immédiatement, vos visiteurs non plus.
4. La diffusion : chargement différé et srcset
Les images sous la ligne de flottaison n’ont pas besoin de se charger avant que l’utilisateur ne défile : loading="lazy" sur toutes sauf la première. L’image hero reçoit plutôt fetchpriority="high". Avec srcset, vous servez aux mobiles la version 600 px et aux ordinateurs la version 1 200 px ; WordPress le fait automatiquement si les tailles sont configurées. Indiquez toujours width et height pour que la mise en page ne saute pas au chargement.
Le flux de travail en pratique
- Redimensionner avant l’envoi : le redimensionneur (ou le redimensionneur par lot pour des dossiers) à 1 200–2 000 px.
- Compresser et convertir en une étape : compresseur d’images à qualité 80, sortie WebP.
- Contrôle : moins de 200 Ko pour les images de contenu, moins de 400 Ko pour les hero.
- Sur la page : chargement différé, dimensions, texte alternatif.
Résultats typiques
Une photo de téléphone non optimisée (4 000 px, 3,8 Mo) → redimensionnée à 1 200 px (620 Ko) → WebP à qualité 80 (95 Ko). Soit 97 % de données en moins pour une image identique à l’écran. Sur une page de dix images, c’est la différence entre six secondes de chargement en 4G et moins d’une seconde.
Questions fréquentes
Le WebP fait-il perdre en qualité ?
À qualité visuelle égale, non : le WebP l’obtient avec moins d’octets.
Faut-il convertir les logos PNG en WebP ?
Oui, en WebP sans perte ; la transparence est conservée et le fichier rétrécit.
Et les images déjà en ligne ?
Les extensions WordPress compressent après coup, mais ne réduisent pas utilement la résolution d’origine. Pour une bibliothèque existante, un passage par le compresseur par lot et un nouvel envoi des pages principales valent le coup.
Gratuit, fonctionne dans votre navigateur, rien n’est envoyé, sans inscription.
Continuer la lecture
Plus de Outils image et photo.
