Préparer ses images pour un site web rapide : la checklist

Quand un site web charge lentement, le réflexe habituel est de soupçonner l'hébergement, le code ou une extension trop lourde — et parfois, le problème est effectivement là. Mais dans l'immense majorité des cas réels, le principal coupable, ce sont les images : quelques photos non optimisées peuvent peser plus lourd que tout le reste de la page réuni. Avant de changer de serveur ou de toucher au code, cela vaut la peine de passer en revue cette checklist.

Pourquoi les images sont presque toujours le goulot d'étranglement

Le HTML, le CSS et le JavaScript d'une page normale pèsent, ensemble, quelques centaines de kilo-octets sur la plupart des sites. Les images, en revanche, dépassent facilement plusieurs méga-octets si elles n'ont pas été optimisées — une seule photo d'en-tête non compressée peut peser plus lourd que tout le reste de la page. C'est pourquoi optimiser les images offre généralement le plus grand gain de vitesse pour le moindre effort, comparé à des optimisations de code qui demandent bien plus de travail pour une économie moindre.

La checklist, par ordre d'impact

1) Le bon format. WebP ou AVIF plutôt que JPG ou PNG par défaut — à qualité visuelle équivalente, ils pèsent généralement bien moins lourd. Nous le couvrons en détail dans leguide des formats.

2) Une taille en pixels ajustée à l'espace réel. Si l'image s'affiche sur 800 pixels de large, il ne sert à rien de servir un fichier de 4000 pixels — le navigateur doit télécharger et traiter tout cet excédent de données juste pour le réduire visuellement ensuite.

3) Une compression au bon niveau. Ni sans compression (poids inutile) ni surcompressée (artefacts visibles) — la plage de qualité qui offre le meilleur équilibre, que nous abordons dans l'article sur comment réduire le poids d'un JPG sans perdre en qualité.

4) Le chargement différé (lazy loading). L'attribut natif loading="lazy"du HTML lui-même évite que le navigateur charge des images que l'utilisateur ne verra jamais — sans avoir besoin d'aucune bibliothèque externe, il suffit d'ajouter cet attribut aux images situées en dehors de l'écran initial.

5) Les dimensions déclarées dans le HTML. Indiquer width etheight dans la balise de l'image permet au navigateur de réserver l'espace exact avant que l'image ne finisse de charger, évitant que le reste du contenu ne « saute » — un facteur que Google mesure spécifiquement sous le nom de CLS (Cumulative Layout Shift), une autre des métriques des Core Web Vitals.

Comment appliquer tout cela en une seule fois

Les points 1, 2 et 3 se résolvent en une seule étape avecle compresseur de SMALLIMG : vous importez le lot d'images du site, choisissez le format de sortie, la largeur maximale et la qualité, puis vous téléchargez le tout prêt à être mis en ligne. Les points 4 et 5 sont des modifications qui se font directement dans le HTML ou le gabarit de votre site — la plupart des gestionnaires de contenu modernes (WordPress inclus, depuis la version 5.5) activent déjà le chargement différé par défaut, il suffit donc parfois simplement de vérifier qu'il n'est pas désactivé.