Tes images sont probablement trop lourdes (Voici comment y remédier)
La plupart des sites web se chargent lentement à cause d'images non optimisées. Quelques minutes de compression peuvent réduire ton temps de chargement de moitié.
J'ai fait un audit de site web la semaine dernière pour le portfolio photo d'un ami. De belles images. Un travail magnifique.
La page d'accueil mettait 12 secondes à charger.
Le coupable ? Une seule image hero de 8MB. Sur une connexion téléphonique, les visiteurs étaient partis avant de voir quoi que ce soit.
Ça arrive plus souvent qu'on ne le pense. Alors parlons de comment y remédier.
Le problème que personne ne remarque
Quand tu exportes une image depuis Photoshop ou ton téléphone, elle est généralement bien plus grande que nécessaire. Une photo de 4000x3000 directement depuis un appareil peut faire 15MB.
Pour un site web, tu as rarement besoin de plus de 200KB—parfois moins.
La différence compte :
| Taille image | Temps de chargement (3G) | Temps de chargement (4G) | |--------------|--------------------------|--------------------------| | 5MB | 40+ secondes | 8 secondes | | 500KB | 4 secondes | moins d'1 seconde | | 100KB | moins d'1 seconde | instantané |
Cette image de 5MB n'est pas juste lente—elle bouffe aussi les forfaits data de tes visiteurs.
Étape 1 : Redimensionne d'abord
Avant de compresser quoi que ce soit, vérifie les dimensions.
Si ton site web affiche une image à 800 pixels de large, ça ne sert à rien de télécharger un original de 4000 pixels. Tu envoies 5x plus de données que nécessaire.
Détermine la taille la plus grande à laquelle ton image sera affichée (vérifie sur ordinateur—généralement la plus grande), puis redimensionne à cette largeur. Ajoute peut-être 20% de marge pour les écrans retina si tu veux.
Étape 2 : Compresse-la
Maintenant que ton image a la bonne taille, compresse-la.
Les algorithmes de compression modernes sont étonnamment bons. Tu peux souvent réduire la taille du fichier de 60-80% sans perte de qualité visible. Sérieusement—mets l'avant et l'après côte à côte et essaie de repérer la différence.
Quelques choses à savoir :
Qualité JPEG 80-85 est généralement le sweet spot. En dessous de 70, tu commences à voir des artefacts. Au-dessus de 90, tu gaspilles des octets pour des améliorations invisibles.
PNG est sans perte, donc ça compresse moins. Mais ça vaut quand même le coup de le passer dans un compresseur pour retirer les métadonnées et optimiser l'encodage.
WebP te donne le meilleur des deux mondes—des fichiers plus petits que JPEG avec support de la transparence comme PNG. La plupart des navigateurs le supportent maintenant.
Étape 3 : Choisis le bon format
Ça compte plus que les gens ne le pensent.
Utilise JPEG pour :
- Les photos
- Les images avec beaucoup de couleurs et de dégradés
- Les arrière-plans
Utilise PNG pour :
- Les logos
- Les icônes
- Les captures d'écran
- Tout ce qui nécessite de la transparence
Utilise WebP pour :
- Tout, si ton audience utilise des navigateurs modernes
- Fallback vers JPEG/PNG pour les anciens navigateurs
Utilise SVG pour :
- Les graphiques simples
- Les icônes
- Les logos (si tu as le fichier vectoriel)
- Tout ce qui doit s'adapter infiniment
Chiffres réels
Voici ce qui s'est passé quand j'ai optimisé le portfolio de mon ami :
| Avant | Après | |-------|-------| | Image hero : 8MB | Image hero : 180KB | | Grille miniatures : 12MB total | Grille miniatures : 400KB total | | Chargement page : 12 secondes | Chargement page : 1,8 secondes |
Mêmes images. Même qualité visuelle. Juste correctement optimisées.
La méthode paresseuse
Si tu télécharges sur WordPress, Squarespace ou des plateformes similaires, elles compressent souvent les images automatiquement. Mais "souvent" n'est pas "toujours," et leur compression n'est pas toujours assez agressive.
Meilleure approche : optimise avant de télécharger. Tu contrôles la qualité, et tu ne dépends pas de ce que la plateforme décide de faire.
Ça prend 2 minutes par image. Tes visiteurs te remercieront—même s'ils ne savent jamais pourquoi ton site semble rapide.
Checklist rapide
Avant de télécharger une image :
- Est-ce la bonne taille ? Ne télécharge pas 4000px quand tu as besoin de 800px
- Est-ce compressé ? Passe-la dans un compresseur
- Est-ce le bon format ? JPEG pour les photos, PNG pour les graphiques, WebP si possible
- L'as-tu testée ? Regarde la version finale. Si elle a l'air mauvaise, réduis la compression
La vitesse des sites web, c'est surtout une question d'images. Règle tes images, et tu as réglé la moitié de tes problèmes de performance. Tout le reste, c'est de l'optimisation à la marge.
Commence par tes plus grosses images en premier. Généralement, ce sont les bannières hero et les photos pleine largeur. Celles-là te donnent les plus gros gains pour le moins d'effort.