Comment optimiser les images d’un site pour le SEO, la vitesse et l’accessibilité ?

Choisir le bon fichier avant la compression

Une photographie nécessite un format efficace comme WebP ou AVIF avec un repli si nécessaire. Un logo ou une icône simple peut rester vectoriel. Une capture contenant du texte doit rester lisible après compression.

Le meilleur gain consiste souvent à ne pas envoyer une image de 3000 pixels dans une zone de 600 pixels. Exportez des dimensions cohérentes avec le composant.

Servir une taille adaptée à l’écran

srcset et sizes permettent au navigateur de choisir une ressource selon la largeur et la densité de pixels. Sur mobile, cela évite de télécharger la version destinée à un grand écran.

Définissez toujours width et height ou un ratio stable pour éviter les déplacements de contenu qui dégradent le CLS.

Écrire un texte alternatif utile

L’attribut alt décrit la fonction ou l’information importante dans le contexte de la page. Évitez de répéter image de ou d’empiler des mots-clés. Une photo de chantier peut indiquer le type d’intervention et la ville si ces éléments sont réellement visibles et utiles.

Une décoration pure doit avoir alt vide afin de ne pas encombrer la lecture avec un lecteur d’écran.

Prioriser l’image principale

L’image susceptible d’être le LCP ne doit pas être chargée paresseusement. Préchargez-la seulement si elle est réellement critique et évitez de donner une priorité élevée à de nombreuses ressources.

Les images sous la ligne de flottaison peuvent utiliser loading lazy. Vérifiez ensuite le réseau et le rendu sur un téléphone réel.

Créer un budget image par emplacement

Inventoriez chaque emplacement plutôt que chaque fichier : héros, carte, galerie, logo et illustration éditoriale. Pour chacun, fixez le ratio, la largeur maximale réellement affichée, les variantes nécessaires, la priorité de chargement et le rôle du texte alternatif.

Contrôlez ensuite la ressource effectivement téléchargée dans le navigateur. Une image source légère peut encore être trop grande sur mobile si le navigateur ne reçoit aucune variante adaptée.

• Dimensions réservées pour éviter le décalage
• srcset et sizes cohérents avec la mise en page
• LCP prioritaire, médias hors écran différés
• Alt informatif ou vide si décoratif
• Poids observé sur le réseau mobile

Exemple chiffré : dimensionner avant de compresser

Une image de 2 400 pixels affichée dans une carte de 420 pixels reste surdimensionnée même si son taux de compression est élevé. Préparez plusieurs largeurs, décrivez-les avec srcset et laissez le navigateur choisir selon la largeur d’affichage et la densité de pixels. Réservez le chargement prioritaire à l’image réellement susceptible d’être le LCP.

Le contrôle doit être fait dans le HTML rendu et dans l’onglet réseau : largeur téléchargée, poids transféré, dimensions réservées et moment de chargement. Pour une image informative, vérifiez aussi que le texte alternatif transmet sa fonction. Pour un décor, un alt vide évite de répéter inutilement l’ambiance au lecteur d’écran.

• Fichier adapté à la zone d’affichage
• Dimensions HTML réservant l’espace
• Priorité limitée à l’image critique
• Alternative textuelle fondée sur la fonction