Sur la plupart des sites, les images sont l'élément le plus lourd de la page, souvent plus volumineux que le HTML, le CSS et le JavaScript réunis. Si une page semble lente, les images sont le premier endroit où regarder, et les corrections sont généralement rapides.
Trois techniques font presque tout le travail : redimensionner l'image à la taille à laquelle elle est réellement affichée, la compresser et la servir dans un format moderne. Appliquées ensemble, elles réduisent couramment le poids des images de 70 % ou plus.
Redimensionnez à la taille réellement affichée
C'est l'erreur la plus courante et la plus coûteuse. Une photo sortie tout droit d'un appareil peut faire 6000 pixels de large, mais votre article l'affiche dans une colonne de 800 pixels. Le navigateur télécharge les six mille pixels, puis en jette la plupart lorsqu'il réduit l'image pour l'adapter.
Servir une image de 6000 pixels dans un emplacement de 800 pixels peut revenir à télécharger cinq à dix fois plus de données que nécessaire. La solution est simple : redimensionnez le fichier à peu près à la largeur qu'il occupera, avec une petite marge pour les écrans haute densité.
Une règle pratique :
- Image bandeau pleine largeur : 1600 à 2000 px de large suffisent largement.
- Image dans l'article : 1000 à 1400 px.
- Miniature : 300 à 500 px.
Utilisez le Redimensionneur d'images pour réduire chaque image avant même qu'elle n'atteigne votre page. Il verrouille le ratio pour que rien ne se déforme.
Compressez pour éliminer le superflu
Une fois les dimensions correctes, la compression supprime les détails que l'œil ne peut pas voir. Pour les photographies, une qualité autour de 75 à 85 % est le point idéal : le fichier chute nettement tandis que l'image paraît identique. Pour les graphiques plats et les captures d'écran enregistrés en PNG, la réduction du nombre de couleurs (quantification à 256 couleurs) peut ramener le fichier à une fraction de sa taille d'origine.
Le Compresseur d'images gère les deux. Il ré-encode le JPEG et le WebP par qualité, quantifie les PNG et garantit qu'il ne produira jamais un fichier plus gros que celui de départ. Si vous avez toute une galerie, traitez-les par lot et téléchargez un ZIP.
Passez à un format moderne
Le choix du format à lui seul peut diviser un fichier par deux. Voici comment se comparent les options courantes pour les photographies.
| Format | Taille typique vs JPEG | Idéal pour |
|---|---|---|
| JPEG | Référence | Repli universel ; photos |
| WebP | ~25 à 35 % plus petit | Photos et graphiques ; large prise en charge |
| AVIF | ~50 % plus petit | Photos où la taille minimale compte |
| PNG | Bien plus gros pour les photos | Logos, icônes, graphiques plats, transparence |
Le WebP est le choix par défaut sûr en 2026 : tous les navigateurs actuels le lisent et il bat confortablement le JPEG. L'AVIF descend encore plus bas mais prend plus de temps à encoder et bénéficie d'une prise en charge un peu plus étroite. Le Convertisseur d'images permet de viser l'AVIF et bascule discrètement vers le WebP quand l'AVIF n'est pas le bon choix, pour obtenir le meilleur résultat disponible sans deviner.
Une mise en garde : n'utilisez pas le PNG pour les photographies. Le PNG brille pour les logos, les icônes et tout ce qui nécessite de la transparence, mais pour une photo il peut être plusieurs fois plus gros qu'un WebP de même qualité.
Mettez le tout ensemble
Un pipeline fiable pour toute image destinée au web :
- Redimensionnez à la largeur d'affichage (plus une marge pour les écrans retina).
- Convertissez en WebP, ou en AVIF si vous voulez le fichier le plus petit possible.
- Compressez à 75 à 85 % de qualité pour éliminer le dernier superflu.
Faites cela et une photo d'appareil de 5 Mo peut devenir un WebP de 120 Ko d'aspect identique dans une colonne d'article. Multipliez à l'échelle d'une page et la différence de temps de chargement est spectaculaire.
Tout tourne dans votre navigateur avec Canvas et WebAssembly : rien n'est téléversé et les outils continuent de fonctionner hors ligne après votre première visite. Vous pouvez donc préparer un dossier d'images pour votre site sans les confier à aucun serveur.
Au-delà des fichiers
Deux autres habitudes aident, et ne coûtent rien :
- Chargez en différé les images sous la ligne de flottaison avec
loading="lazy"pour que le navigateur ne les récupère qu'à l'approche du lecteur. - Définissez les attributs width et height pour que la mise en page ne saute pas pendant le chargement, ce qui améliore aussi votre score Core Web Vitals.
Vous voulez savoir exactement quelles images plombent une page ? Notre guide SEO des images traite de l'audit, et une analyse de vitesse de page listera les ressources les plus lourdes pour savoir où viser en premier.