LE PIPELINE D'IMAGES

Les images constituent l'élément LCP sur environ 70 % des pages marketing. La gestion rigoureuse des images est, à ma connaissance, le levier de performance le plus efficace qui soit. Les équipes qui maîtrisent cet aspect atteignent sans peine les objectifs des Core Web Vitals ; celles qui échouent dans ce domaine se heurtent sans cesse à ces mêmes objectifs.

La méthode est structurée : choisir le format, redimensionner lors du téléchargement, optimiser l'encodage, définir des dimensions précises, précharger l'image LCP. Chacune de ces étapes représente un investissement technique ponctuel qui porte ses fruits sur toutes les pages de tous les sites.

Je génère des images « hero » à l'aide de FAL flux-pro/v1.1-ultra et de Recraft v3. Ces deux outils produisent des fichiers JPEG de 1 200 × 675 pixels avec une qualité d'encodage maximale, dont la taille varie généralement entre 600 Ko et 1,5 Mo par image. Le fait de télécharger ces fichiers bruts sur Supabase Storage signifie que chaque page contient environ 1 Mo rien que pour l'image « hero ».

FAL coûte environ 4 centimes par image principale, ce qui est négligeable par rapport à la photographie manuelle ou à l'achat de droits d'utilisation d'images de banque d'images.

Avant tout téléchargement, l'image passe par la fonction sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer(). Cela permet d'obtenir un fichier WebP 90 % plus petit que le JPEG d'origine, sans perte perceptible. Une image « hero » de 900 Ko devient ainsi une image « hero » de 80 Ko.

Sur 53 images héros sur gautamkhorana.com, l'économie totale était d'environ 50 Mo à l'échelle du site. Le même pipeline appliqué aux sites clients chez Seahawk a régulièrement livré des gains similaires. Le code fait dix lignes ; l'impact est durable.

Définissez cacheControl: 31536000 lors du téléchargement vers le stockage afin que le CDN mette le fichier en cache pendant un an. Le format WebP répond aux besoins des navigateurs modernes ; les navigateurs plus anciens utilisent le format JPEG par défaut via l'élément `picture`.

Utilisez un modèle d'URL stable (slug-hero.webp) afin que la gestion de l'invalidation du cache se déroule sans problème. Lorsqu'un hero est mis à jour, le slug doit changer (slug-hero-v2.webp) et la base de données met à jour l'URL de manière atomique.

Chaque image « hero » doit comporter des attributs de largeur et de hauteur explicites dans le code HTML. Sans ces attributs, la mise en page se déplace lors du chargement de l'image et l'indice CLS augmente. Les composants « Image » d'Astro et de Next.js gèrent cela automatiquement ; les balises `img` brutes nécessitent une configuration manuelle.

L'image principale située au-dessus de la ligne de flottaison doit être préchargée à l'aide de la balise `link rel="preload" as="image"` dans l'en-tête du document. Cela permet généralement de gagner entre 100 et 400 millisecondes sur l'indicateur LCP. Il s'agit de la modification d'une seule ligne ayant le plus grand impact, applicable à la plupart des sites marketing.

Appliquez le chargement différé (« lazy-load ») à toutes les images situées sous le pli à l'aide de l'attribut `loading="lazy"`. Les navigateurs prennent désormais en charge cette fonctionnalité de manière native ; aucune bibliothèque JavaScript n'est nécessaire.

J'ai extrait ce pipeline dans le fichier scripts/lib/optimize-image.mjs, qui prend un tampon en entrée, effectue le redimensionnement et l'encodage WebP, puis renvoie le tampon optimisé. Il est utilisé dans le pipeline « hero » du blog automatique, dans les scripts de réencodage en masse et dans l'utilitaire de téléchargement manuel.

Le fait de n'utiliser qu'un seul helper permet de centraliser le processus. Les nouveaux scripts qui doivent mettre en ligne des images font appel au même helper, appliquent la même compression et génèrent des fichiers de taille identique. Le processus ne dépend pas de la mémoire d'un seul ingénieur qui devrait se souvenir d'exécuter « sharp ».