Bildoptimierung

Leg ein Bild in voller Größe in src/ oder public/ ab, richte ein <img> darauf, und sitelo skaliert es, wandelt es in ein modernes Format um und schreibt das Tag mit einem srcset neu. Nichts zu importieren, keine Komponente zu lernen.

Aktivieren

export default {
  images: true,
}

Die Kodierung übernimmt sharp, eine optionale Peer-Dependency — installiere sie zusammen mit sitelo, wenn du Bilder aktivierst:

npm install -D sharp

Websites, die auf Bildoptimierung verzichten, brauchen sie nie zu installieren.

Schreib ein ganz normales <img>

export default () => `
  <html lang="de">
    <body>
      <img src="/images/hero.png" alt="Sonnenaufgang über dem Hafen">
    </body>
  </html>
`

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

export default () =>
  html({ lang: 'de' },
    body(
      img({ src: '/images/hero.png', alt: 'Sonnenaufgang über dem Hafen' }),
    ),
  )

export default function Home() {
  return (
    <html lang="de">
      <body>
        <img src="/images/hero.png" alt="Sonnenaufgang über dem Hafen" />
      </body>
    </html>
  )
}

Aus einer Quelle mit 3000×2000 wird auf der anderen Seite das hier:

<img src="/assets/img/hero.a1b2c3d4-1200.webp"
     alt="Sonnenaufgang über dem Hafen"
     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">

Was du bekommst

Skalieren, das nie hochrechnet — eine 600px-Quelle mit widths: [400, 800, 1200] liefert 400 und 600 und hört dort auf.
Moderne Formate — ein Format ergibt ein schlichtes <img srcset>; zwei oder mehr verpacken es in ein <picture> mit einem Rückfall im Ursprungsformat.
Kein Layout-Sprung — width und height werden aus dem echten Bild ergänzt, dazu loading="lazy" und decoding="async".
Dasselbe Markup in der Entwicklung — sitelo (dev) schreibt Seiten um und liefert Varianten auf Anfrage, du siehst also in der Vorschau, was du ausliefern wirst.
Ein gemeinsamer Cache — Varianten werden per Inhalts-Hash in node_modules/.sitelo/images abgelegt, sodass Entwicklung und erneute Builds dasselbe Bild nie zweimal kodieren.

Das Umschreiben läuft über das gebaute HTML und erfasst damit Bilder aus src/ und public/ gleichermaßen.

Optionen

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

widths — Standard [400, 800, 1200]; der größte Wert ist zugleich die Obergrenze
formats — Standard ['webp']; avif, webp, jpeg, png
quality — Standard { avif: 55, webp: 78, jpeg: 82 }; Encoder-Qualität je Format (png nutzt Kompression statt Qualität)
sizes — das sizes-Attribut; ein sizes am Tag gewinnt immer
dimensions — Standard true; ergänzt width / height
lazy — Standard true; ergänzt loading und decoding
exclude — Glob(s) oder RegExp(s) von Bild-URLs, die unangetastet bleiben
assetsDir — Standard 'assets/img'
cacheDir — Standard 'node_modules/.sitelo/images'
remote — Standard false; optimiert https://-Bilder zur Build-Zeit
prune — Standard false; löscht Originale, die nichts mehr referenziert
dev — Standard true; setze false, um in der Entwicklung die unveränderten Originale auszuliefern
concurrency — parallele Kodierungen, Standard CPUs − 1 (max. 8); 1, wenn remote aktiv ist

Zwei Formate ergeben

AVIF ist kleiner, aber jünger als WebP — beide anzugeben lässt den Browser wählen und behält einen Rückfall für ältere Browser.

<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>

Ausnahmen

Tags, die bereits ein srcset haben, in einem <picture> stecken oder auf ein SVG, ein animiertes GIF oder eine entfernte URL zeigen, bleiben unangetastet. Für alles andere sag es ausdrücklich:

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

Bilder für Social Cards und Favicons stehen in <meta> und <link>, die hiervon nie umgeschrieben werden — sie behalten ihre feste URL.

Entfernte Bilder

Aus einem CMS importierte Inhalte zeigen oft auf den Server von jemand anderem. Aktiviere remote, und diese Bilder werden heruntergeladen, optimiert und von deiner eigenen Domain ausgeliefert:

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

Ein fehlgeschlagener Abruf lässt das Tag exakt so, wie es war, samt Warnung — eine wackelige Quelle bringt deinen Build nie zu Fall. prune entfernt anschließend lokale Originale, die nichts mehr referenziert.