Optimisation des images

Déposez une image en pleine taille dans src/ ou public/, pointez une balise <img> dessus, et sitelo la redimensionne, la convertit dans un format moderne et réécrit la balise avec un srcset. Rien à importer, aucun composant à apprendre.

Activation

export default {
  images: true,
}

L’encodage est assuré par sharp, une dépendance peer optionnelle — installez-la aux côtés de sitelo quand vous activez les images :

npm install -D sharp

Les sites qui n’optimisent pas les images n’ont jamais besoin de l’installer.

Écrivez un <img> ordinaire

export default () => `
  <html lang="fr">
    <body>
      <img src="/images/hero.png" alt="Lever de soleil sur le port">
    </body>
  </html>
`

import { html, body, img } from 'javascript-to-html'

export default () =>
  html({ lang: 'fr' },
    body(
      img({ src: '/images/hero.png', alt: 'Lever de soleil sur le port' }),
    ),
  )

export default function Home() {
  return (
    <html lang="fr">
      <body>
        <img src="/images/hero.png" alt="Lever de soleil sur le port" />
      </body>
    </html>
  )
}

Une source de 3000×2000 ressort ainsi :

<img src="/assets/img/hero.a1b2c3d4-1200.webp"
     alt="Lever de soleil sur le port"
     sizes="(max-width: 1200px) 100vw, 1200px"
     width="1200" height="800"
     loading="lazy" decoding="async"
     srcset="/assets/img/hero.9f8e7d6c-400.webp 400w,
             /assets/img/hero.5b4a3c2d-800.webp 800w,
             /assets/img/hero.a1b2c3d4-1200.webp 1200w">

Ce que vous obtenez

Un redimensionnement qui n’agrandit jamais — une source de 600px avec widths: [400, 800, 1200] produit 400 et 600, et s’arrête là.
Des formats modernes — un seul format donne un <img srcset> ordinaire ; deux ou plus l’enveloppent dans un <picture> avec un repli dans le format d’origine.
Aucun décalage de mise en page — width et height sont renseignés depuis l’image réelle, avec loading="lazy" et decoding="async".
Le même balisage en développement — sitelo (dev) réécrit les pages et sert les variantes à la demande : vous prévisualisez ce que vous livrez.
Un cache partagé — les variantes sont indexées par hachage de contenu dans node_modules/.sitelo/images, si bien que le développement et les rebuilds n’encodent jamais deux fois la même image.

La réécriture s’applique au HTML construit : elle couvre donc aussi bien les images de src/ que celles de public/.

Options

export default {
  images: {
    widths: [400, 800, 1200],
    formats: ['avif', 'webp'],
    quality: { avif: 55, webp: 78, jpeg: 82 },
    exclude: ['**/og/**'],
  },
}

widths — par défaut [400, 800, 1200] ; la plus grande sert aussi de plafond
formats — par défaut ['webp'] ; avif, webp, jpeg, png
quality — par défaut { avif: 55, webp: 78, jpeg: 82 } ; qualité d’encodage par format (png utilise la compression, pas la qualité)
sizes — l’attribut sizes ; un sizes présent sur la balise l’emporte toujours
dimensions — par défaut true ; ajoute width / height
lazy — par défaut true ; ajoute loading et decoding
exclude — glob(s) ou RegExp d’URL d’images à laisser intactes
assetsDir — par défaut 'assets/img'
cacheDir — par défaut 'node_modules/.sitelo/images'
remote — par défaut false ; optimise les images https:// au build
prune — par défaut false ; supprime les originaux que plus rien ne référence
dev — par défaut true ; mettez false pour servir les originaux intacts en développement
concurrency — encodages en parallèle, par défaut CPU − 1 (max 8) ; 1 quand remote est actif

Deux formats vous donnent

AVIF est plus léger mais plus récent que WebP : lister les deux laisse le navigateur choisir tout en gardant un repli pour les anciens.

<picture>
  <source type="image/avif" srcset="/assets/img/hero.*-400.avif 400w, ..." sizes="...">
  <source type="image/webp" srcset="/assets/img/hero.*-400.webp 400w, ..." sizes="...">
  <img src="/assets/img/hero.*-1200.png" alt="..." srcset="..." width="1200" height="800">
</picture>

Exclure des images

Les balises qui ont déjà un srcset, qui se trouvent dans un <picture>, ou qui pointent vers un SVG, un GIF animé ou une URL distante sont laissées intactes. Pour les autres, dites-le explicitement :

<img src="/images/exact.png" alt="Pixel art" data-no-optimize>

Les images de cartes sociales et les favicons vivent dans des <meta> et des <link>, que cela ne réécrit jamais — elles conservent leur URL fixe.

Images distantes

Le contenu importé d’un CMS pointe souvent vers le serveur de quelqu’un d’autre. Activez remote et ces images sont téléchargées, optimisées et servies depuis votre propre domaine :

export default {
  images: {
    remote: true,
    prune: true,
  },
}

Un téléchargement qui échoue laisse la balise exactement telle quelle, avec un avertissement — une origine instable ne fait jamais échouer votre build. Ensuite, prune supprime les originaux locaux que plus rien ne référence.