Bilder: von Notion bis WebP

Wer ein Bild in Notion hochlädt, bekommt von der API einen Link, der genau eine Stunde gültig ist. Eine statische Site darf so einen Link nie ins HTML schreiben. Deshalb holt der Build jedes Bild sofort ab.

Was der Build macht

1. Bild herunterladen, direkt nachdem der Block gelesen wurde.
2. Mit Sharp drehen (EXIF), dann Varianten in 400, 800 und 1600 Pixel Breite als WebP erzeugen.
3. Breite, Höhe und Prüfsumme in einer kleinen JSON-Datei daneben ablegen.
4. Im HTML ein <picture>-Element mit srcset, sizes, width und height ausgeben.

Stabile Dateinamen

Der Dateiname leitet sich aus der Block-ID ab, bei Covern aus der Seiten-ID. Ändert sich der Text eines Beitrags, bleibt das Bild unter demselben Namen. Ein Cache zwischen zwei Builds spart so den erneuten Download.

public/img/notion/
  2f1c…-cover-400.webp
  2f1c…-cover-800.webp
  2f1c…-cover-1600.webp
  2f1c…-cover.json

Empfohlene Maße