Les images : poids, format, texte alternatif

Une photo de chantier, une vitrine, une réalisation : pour un professionnel de proximité, l'image est souvent le meilleur argument. Mal préparée, elle devient le pire ennemi du site : elle le ralentit, elle reste muette pour les moteurs, et elle s'affiche déformée sur un téléphone. Quatre gestes simples, à la portée de n'importe qui, changent tout.

Le poids : la première cause de lenteur

Un téléphone récent produit des photos de plusieurs mégaoctets, en 4 000 pixels de large. Sur le site, la même photo s'affiche sur 800 pixels, parfois 400 sur un mobile. Servir l'original, c'est faire télécharger vingt fois plus que nécessaire, pour chaque image, à chaque visiteur. C'est la première chose que signale l'outil de mesure de Google, et la première que nous corrigeons sur les sites que nous reprenons.

• Redimensionner à la taille d'affichage réelle, et pas plus. Quand une image est affichée à plusieurs tailles selon l'écran, produire plusieurs variantes et laisser le navigateur choisir (l'attribut « srcset »).
• Servir un format moderne : le WebP pèse 35 à 45 % de moins qu'un JPEG à qualité égale, et tous les navigateurs actuels le lisent. Prévoir un repli JPEG pour les rares exceptions.
• Choisir la compression en regardant, pas au jugé : produire deux ou trois niveaux, ouvrir le plus léger, vérifier les textes et les aplats, garder le plus léger qui tient.
• Différer les images sous la ligne de flottaison (chargement paresseux), et surtout ne pas différer celle du haut de page, qui porte le temps d'affichage principal.

Le texte alternatif : ce que le moteur lit

Un moteur ne voit pas une image. Il lit son nom de fichier et son attribut « alt », le texte alternatif, prévu au départ pour les personnes qui ne voient pas l'écran. Un bon texte alternatif décrit ce que montre l'image, en une phrase, avec le sujet et le lieu quand ils comptent : « Terrasse en bois composite posée à Biot, vue après travaux » plutôt que « IMG_2041.jpg » ou « photo ». Il sert trois choses : l'accessibilité, que Google mesure ; la recherche d'images, qui amène des visiteurs ; et la compréhension du contexte de la page.

• Un texte alternatif par image de contenu, descriptif, sans liste de mots-clés.
• Un attribut vide pour les images purement décoratives, pour ne pas encombrer la lecture.
• Un nom de fichier descriptif, en minuscules avec des tirets : « terrasse-composite-biot.webp ». Un nom d'export d'outil est une trace à ne jamais publier.

Le texte alternatif n'est pas un endroit pour placer des mots-clés : c'est la légende qu'un ami lirait au téléphone à quelqu'un qui ne voit pas l'image.

Les dimensions et la stabilité

Une image sans largeur ni hauteur déclarées fait sauter la page au moment où elle arrive : le texte descend, le bouton se déplace sous le doigt. C'est l'une des trois mesures de vitesse de Google (la stabilité visuelle). Déclarer les dimensions réserve la place. Attention au piège inverse : déclarer une largeur alors que la feuille de style ne fixe que la hauteur déforme l'image. Après toute passe sur les images, il faut regarder le résultat, à plusieurs largeurs d'écran.

Ce qu'il faut faire

• Passer toutes les images existantes à la taille réelle et en WebP, avec repli, en gardant les originaux hors du site.
• Renommer les fichiers, écrire les textes alternatifs, déclarer les dimensions.
• Différer tout ce qui est sous la ligne de flottaison, prioriser l'image d'en-tête.
• Adopter la règle pour la suite : aucune image ne part en ligne au poids où elle arrive.

Comment le vérifier

PageSpeed Insights liste les images trop lourdes, mal dimensionnées ou à différer, avec le gain estimé pour chacune. L'outil du navigateur (F12, onglet « Réseau ») montre le poids réel de chaque fichier chargé : au-delà de 200 Ko pour une photo de contenu, il y a presque toujours à gagner. Les rapports d'accessibilité signalent les textes alternatifs manquants. Et sur un téléphone, vérifiez que rien ne saute pendant le chargement et que les proportions sont respectées.

Ce travail est systématique sur nos réalisations, au point d'être une règle écrite : redimensionner, convertir, compresser en regardant, différer, renommer. C'est aussi l'un des éléments les plus rentables à reprendre sur un site existant, parce qu'il améliore la vitesse, l'accessibilité et le référencement d'un seul geste.

Le faire vous-même, ou nous le confier

Cet élément fait partie des vingt-cinq du guide du référencement. Deux façons de passer à l'action, au choix.

Prix nets, TVA non applicable (article 293 B du CGI). Le premier échange est gratuit et sans engagement, le devis ferme est remis sous 48 heures. Toutes les formules : SEO INTERACT.