Images et fichiers statiques

Deux emplacements possibles

src/assets/ : images optimisées

C’est là que se trouve houston.webp, la mascotte d’Astro affichée sur la page d’accueil. Une image placée dans src/ est traitée par Astro au build :

• elle est compressée et convertie au format WebP si nécessaire ;
• ses dimensions (largeur, hauteur) sont ajoutées au HTML, ce qui évite que la page « saute » pendant le chargement ;
• son nom reçoit une empreinte (hash) : houston.webp devient houston.CZZyCf7p_Z1lAhR9.webp. Si l’image change, son nom change, ce qui permet aux navigateurs de la garder en cache indéfiniment ;
• si le fichier référencé n’existe pas, le build échoue : pas de lien d’image cassé en production.

Lors de la compilation de ce site, le journal indique d’ailleurs :

generating optimized images
  ▶ /_astro/houston.CZZyCf7p_Z1lAhR9.webp (before: 96kB, after: 26kB)

Soit une image près de 4 fois plus légère, sans intervention.

On l’insère avec un chemin relatif depuis le fichier Markdown :

src/content/docs/concepts/images.mdx

![Houston, la mascotte d'Astro](../../../assets/houston.webp)

Résultat :

Astuce

Une bonne pratique consiste à placer les images à côté des pages qui les utilisent, ou dans src/assets/ organisé en sous-dossiers. Les deux fonctionnent dès lors que le chemin relatif est correct.

public/ : fichiers copiés tels quels

Un fichier de public/ est copié sans aucune transformation à la racine de dist/, et garde son nom. On y fait référence par un chemin absolu :

![Favicon](/favicon.svg)

À réserver aux fichiers qui doivent avoir une URL fixe et connue : favicon, robots.txt, fichiers à télécharger, et l’interface _cms/ de Decap CMS.

Le format WebP

WebP est un format d’image moderne, supporté par tous les navigateurs actuels, nettement plus léger que JPEG ou PNG à qualité égale. C’est le format de sortie par défaut d’Astro. On peut toutefois déposer des images JPEG, PNG, GIF, SVG… : Astro se charge de la conversion.

Et avec Decap CMS ?

Le CMS permet de téléverser des images. Il est configuré pour les enregistrer dans src/assets/images/ et les insérer avec un chemin relatif depuis la page :

![](../../../assets/images/photo.webp)

Les images téléversées depuis le CMS bénéficient donc de l’optimisation d’Astro, comme celles ajoutées à la main. L’alternative, public/images/, aurait donné des chemins plus simples (/images/photo.webp) mais sans aucune optimisation. Détails dans Éditer avec Decap CMS.