feat: rework images management

[barmic]

Tâche : Gestion des images du site (Astro + pipeline sponsors)

Objectif

Mettre en place une gestion des images en deux volets :

1. Images éditoriales et UI
   → gérées par le système natif d’Astro (astro:assets) avec optimisation automatique au build.

2. Images de sponsors
   → gérées hors Astro via une étape de build supplémentaire en JavaScript, afin de supporter :

   • des chemins dynamiques,
   • des variations par langue,
   • des sources externes (CMS / dépôt tiers).

Le site est 100 % statique, avec une structure i18n (/ et /en).

---

Périmètre

Inclus

• Configuration Astro pour l’optimisation d’images standard
• Utilisation des images dans des composants Astro et MDX
• Script Node.js d’optimisation des logos sponsors (WebP / AVIF)
• Intégration de l’étape sponsors dans la chaîne de build

Exclu

• Optimisation à la volée (runtime)
• CDN d’images tiers

---

1. Gestion des images standard via Astro

1.1 Configuration Astro

Fichier : astro.config.mjs

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  output: 'static',

  integrations: [mdx()],

  image: {
    formats: ['avif', 'webp'],
  },

  vite: {
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  },
});

---

1.2 Organisation des fichiers

src/
  assets/
    images/
      hero-home.jpg
      hero-about.jpg
  components/
  pages/

Toutes les images devant être optimisées par Astro doivent se trouver dans src/assets.

---

1.3 Utilisation dans un composant Astro

---
import { Image } from 'astro:assets';
import heroHome from '@/assets/images/hero-home.jpg';
---

<Image
  src={heroHome}
  alt="Image de présentation"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="eager"
/>

Astro :

• génère AVIF + WebP au build,
• produit un <picture> optimisé,
• garantit la compatibilité i18n (indépendant des URLs).

---

1.4 Utilisation dans MDX

---
title: Page à propos
---

import { Image } from 'astro:assets';
import hero from '@/assets/images/hero-about.jpg';

<Image
  src={hero}
  alt="À propos"
  width={1200}
/>

---

2. Gestion des images de sponsors (pipeline dédié)

2.1 Contrainte fonctionnelle

Les images de sponsors :

• ne peuvent pas être importées statiquement (noms dynamiques),
• peuvent varier selon la langue,
• doivent rester compatibles avec un site statique.

👉 Elles ne peuvent donc pas utiliser astro:assets.

---

2.2 Organisation des fichiers sponsors

images-sponsors-src/
  acme.fr.png
  acme.en.png
  globex.png

Sortie attendue :

public/
  sponsors/
    acme.fr.avif
    acme.fr.webp
    acme.en.avif
    acme.en.webp
    globex.avif
    globex.webp

---

2.3 Script d’optimisation sponsors

Fichier : scripts/optimize-sponsors.mjs

import fg from 'fast-glob';
import fs from 'node:fs/promises';
import path from 'node:path';
import sharp from 'sharp';

const SRC_DIR = 'images-sponsors-src';
const OUT_DIR = 'public/sponsors';

const files = await fg('**/*.{png,jpg,jpeg}', { cwd: SRC_DIR });

for (const file of files) {
  const input = path.join(SRC_DIR, file);
  const base = path.join(
    OUT_DIR,
    file.replace(/\.(png|jpe?g)$/, '')
  );

  await fs.mkdir(path.dirname(base), { recursive: true });

  const img = sharp(input);

  await img.avif({ quality: 45 }).toFile(`${base}.avif`);
  await img.webp({ quality: 75 }).toFile(`${base}.webp`);
}

---

2.4 Intégration dans la chaîne de build

Fichier : package.json

{
  "scripts": {
    "build:sponsors": "node scripts/optimize-sponsors.mjs",
    "build": "npm run build:sponsors && astro build"
  }
}

---

3. Utilisation des images sponsors côté Astro

Composant Astro

---
const lang = Astro.url.pathname.startsWith('/en') ? 'en' : 'fr';
const sponsor = 'acme';
---

<picture>
  <source
    srcset={`/sponsors/${sponsor}.${lang}.avif`}
    type="image/avif"
  />
  <source
    srcset={`/sponsors/${sponsor}.${lang}.webp`}
    type="image/webp"
  />
  <img
    src={`/sponsors/${sponsor}.${lang}.webp`}
    alt="Logo sponsor Acme"
    width="300"
    height="150"
    loading="lazy"
  />
</picture>