Files
flimmer/scripts/optimize-screenshots.mjs
Florian Wilde 8d6f1d044a docs: bebilderte Anleitung, API-Dokumentation und Screenshots
docs/ANLEITUNG.md führt einmal durch die ganze Anwendung — von der ersten
Anmeldung über das tägliche Abhaken bis zu Universen, Statistik und
Verwaltung, mit 18 Aufnahmen aus der laufenden Instanz.

Die Bilder entstehen mit npm run screenshots: aufgenommen mit doppelter
Pixeldichte für scharfe Schrift, abgelegt als WebP in halber Kantenlänge —
13 MB werden so zu 0,6 MB.
2026-09-01 20:25:13 +02:00

35 lines
1.0 KiB
JavaScript

import sharp from "sharp";
import { readdir, unlink, stat } from "node:fs/promises";
import { join } from "node:path";
/**
* Verkleinert die aufgenommenen Screenshots für das Repository.
* Die Aufnahme läuft mit doppelter Pixeldichte (scharfe Schrift), abgelegt
* wird die halbe Kantenlänge als WebP — das spart rund 90 Prozent.
*/
const DIR = "docs/screenshots";
const files = (await readdir(DIR)).filter((name) => name.endsWith(".png"));
let before = 0;
let after = 0;
for (const name of files) {
const source = join(DIR, name);
before += (await stat(source)).size;
const image = sharp(source);
const meta = await image.metadata();
const target = join(DIR, name.replace(/\.png$/, ".webp"));
await image
.resize({ width: Math.round((meta.width ?? 1400) / 2) })
.webp({ quality: 82, effort: 5 })
.toFile(target);
after += (await stat(target)).size;
await unlink(source);
}
const mb = (bytes) => (bytes / 1024 / 1024).toFixed(1);
console.log(`${files.length} Bilder: ${mb(before)} MB -> ${mb(after)} MB`);