> For the complete documentation index, see [llms.txt](https://nanoxi.gitbook.io/starterkitv4/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nanoxi.gitbook.io/starterkitv4/referencement/images-et-medias.md).

# Images et médias

Les images jouent un double rôle dans le référencement. Elles peuvent ramener du trafic depuis Google Images, mais elles peuvent aussi ralentir votre site si elles ne sont pas optimisées, ce qui pénalise le positionnement.

### Texte alternatif (alt text)

Le texte alternatif est une description courte de ce que représente l'image. Il sert principalement à deux choses :

* aux lecteurs d'écran utilisés par les personnes malvoyantes, qui lisent ce texte à voix haute ;
* aux moteurs de recherche, qui ne « voient » pas l'image et s'appuient sur ce texte pour la comprendre.

Le titre et la légende d'un média se renseignent dans la section Média. Voyez la page [Titre et légendes](/starterkitv4/media/titre-et-legendes.md) pour le détail.

Quelques règles à suivre :

* Décrivez l'image, ne la commentez pas. « Boulangerie place du marché » est mieux que « Belle photo de notre boutique ».
* Restez concis. Une phrase courte suffit la plupart du temps.
* N'écrivez pas « image de » ou « photo de » : les lecteurs d'écran ajoutent déjà cette information.
* Si l'image est purement décorative (un séparateur, un motif), laissez l'alt vide. Le lecteur d'écran l'ignorera.

### Formats d'image

Le format WEBP est le standard recommandé. Il offre une qualité équivalente au JPEG ou au PNG pour un poids divisé par deux ou trois.

Sur le StarterKit, seuls les formats WEBP, JPEG et PNG sont autorisés pour les widgets Image. Privilégiez WEBP dès que possible. Convertissez vos JPEG/PNG existants avec un outil comme [Squoosh](https://squoosh.app) avant de les téléverser.

Évitez les formats lourds comme BMP ou TIFF, ainsi que les PNG transparents très volumineux. Pour les illustrations vectorielles (logos, icônes), utilisez du SVG : c'est léger et net à toutes les tailles.

### Poids et dimensions

Une image téléversée en 4000 pixels de large alors qu'elle est affichée en 800 pixels gaspille de la bande passante. Avant de l'ajouter au site, redimensionnez-la à la taille à laquelle elle sera réellement affichée (ou environ deux fois cette taille pour les écrans haute résolution type Retina).

Visez moins de 200 Ko par image pour une photo standard, et moins de 100 Ko pour une image dans un widget secondaire. Une page entière ne devrait idéalement pas dépasser un à deux mégaoctets de médias, sinon le temps de chargement devient pénalisant.

### Noms de fichiers

Le nom du fichier compte aussi. `IMG_4523.jpg` ne dit rien à Google. `tarte-aux-pommes-recette.jpg` est explicite.

Utilisez des tirets pour séparer les mots, pas des underscores ni des espaces. Évitez les accents et les caractères spéciaux dans les noms de fichiers, certains serveurs les gèrent mal.

### Légendes

Activer la légende sur un widget Image affiche le titre du média sous l'image. C'est une bonne pratique pour les photos qui méritent une explication contextuelle : photo de produit, illustration d'un article, etc. Les légendes apportent du contenu textuel à la page et améliorent la compréhension par les moteurs de recherche.

### Vidéos et autres médias

Pour les vidéos, préférez l'intégration depuis YouTube ou Vimeo plutôt que l'hébergement direct sur votre site. Les plateformes vidéo gèrent la compression, le streaming adaptatif et la lecture sur tous les appareils sans alourdir vos pages.

Ajoutez toujours un titre et une description aux vidéos hébergées sur ces plateformes, ces informations apparaissent aussi dans les résultats de recherche.