Les images sont souvent les éléments les plus lourds d’une landing page, et peuvent coûter plus cher en performance que le code JavaScript ou le reste du contenu.
Compresser, redimensionner les images pour gérer toutes les situations possibles dans un contexte responsive est cependant fastidieux.
Les développeurs de frameworks web modernes en sont conscients, et Astro propose un puissant composant pour automatiser l’optimisation des images.
Servir des images non optimisées directement depuis le dossier public d’un projet Astro pose plusieurs problèmes :
Si vous disposez d’une équipe frontend/web design dédiée, elle gère peut-être déjà cette problématique. Mais pour beaucoup de projet, la gestion des images est un casse-tête : une solution clé-en-main est vraiment bienvenue !
ImageLe composant Image fourni par Astro gère automatiquement plusieurs tâches d’optimisation :
La documentation officielle donne un bon exemple du résultat obtenu en utilisant ce composant :
---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="" class="my-class" />
// => devient au rendu :
<img
// Fichier généré par Astro
src="/_astro/my_image.hash.webp"
width="1600"
height="900"
decoding="async"
loading="lazy"
class="my-class"
alt=""
/>
Sous le capot, Astro va recourir à la librairie sharp pour traiter l’image, côté serveur.
Le principe du composant Image se comprend rapidement : il optimise les images pour nous. Mais son utilisation peut être déroutante, car ses paramètres sont relativement complexes.
Pour mieux le comprendre, il faut d’abord explorer les fonctionnalités avancées du composant <img> fourni par HTML. Le composant Image d’Astro n’est en fait qu’une surcouche qui utilise ces fonctionnalités.
Par exemple pour gérer le responsive design, vous pouvez spécifier les attributs widths et sizes appropriés pour servir différentes tailles d’images en fonction de la taille du viewport.
<Image
src={headerImage}
// "widths" est un attribut propre à Astro
// => 3 tailles différentes d'images seront générées
widths={[400, 800, 1200]}
// "sizes" vient de l'élément HTML img
// => l'image s'affichera en 100% de la largeur de l'écran
// si celui-ci fait moins de 800px
// sinon elle mesurera 800px
sizes="(max-width: 800px) 100vw, 800px"
alt="Image d'en-tête responsive"
/>
La page de documentation Mozilla pour l’élément img est longue, mais je vous conseille vraiment de la lire en détails pour devenir un vrai expert des images HTML.
Pour observer le comportement des images, vous pouvez utiliser l’onglet Réseau des outils de développement pour observer par vous-même l’effet des optimisations d’Astro.
En tirant parti du composant Image intégré dans Astro, vous pouvez améliorer significativement les performances de votre site tout en conservant des visuels de haute qualité.
Vous avez apprécié cette ressource ?
Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel