KI-Bilder in Astro automatisch kennzeichnen

KI-Bilder in Astro automatisch kennzeichnen

Für WordPress gibt es fertige Plugins, um KI-Bilder zu markieren. Für Astro und andere Static-Site-Generatoren findet man kaum etwas. Dabei reicht eine kleine Komponente, die das Badge automatisch anhand des Ordners setzt. Genau die läuft hier auf der Seite, und in diesem Artikel gebe ich sie zum Kopieren weiter.

DarkWolfCave.de

Dass ich meine KI-Bilder kennzeichne, habe ich im Artikel Muss ich KI-Bilder kennzeichnen? begründet - dort steht auch, wann das rechtlich überhaupt eine Pflicht ist und wann nicht. Hier geht es um die technische Umsetzung in Astro.

Warum eine eigene Komponente

Die WordPress-Welt ist versorgt: Für den Block-Editor gibt es fertige Lösungen, etwa mein eigenes DWC AI Image Marker Plugin. Wer eine Seite mit Astro oder einem anderen Static-Site-Generator baut, steht dagegen ohne Standardlösung da und bastelt sich meist etwas Manuelles zusammen.

Manuell heißt: bei jedem Bild daran denken, ein Badge oder eine Bildunterschrift zu setzen. Bei einer Handvoll Bildern geht das. Bei einem wachsenden Blog wird es schnell lückenhaft, und genau eine vergessene Kennzeichnung ist die, die auffällt.

Der bessere Weg ist eine Komponente, die selbst entscheidet, wann ein Badge nötig ist. Die Entscheidung hängt an einer einfachen Regel: dem Speicherort des Bildes.

Die Idee: die Erkennung an den Speicherort koppeln

Der Kern der Astro-Lösung ist eine Konvention statt einer Einstellung. Alle KI-generierten Bilder liegen in einem Ordner, dessen Pfad /ki/ enthält, zum Beispiel public/images/ki/. Die Komponente prüft den Bildpfad auf dieses Muster und setzt das Badge automatisch.

Für einen dateibasierten Blog hat das zwei Vorteile gegenüber einem Flag, das du pro Bild setzt:

• Du kannst es nicht vergessen. Ein aiGenerated: true im Frontmatter muss bei jedem einzelnen Bild gesetzt werden. Vergisst du es einmal, fehlt das Badge. Die Ordner-Regel greift für alles im KI-Ordner, ohne dass du daran denken musst.
• Es wirkt rückwirkend. Legst du die Regel heute an, sind sofort alle bereits eingebundenen Bilder aus dem KI-Ordner markiert, nicht nur die neuen.

Die Sortierung passiert einmal beim Ablegen des Bildes: KI-Bild in den KI-Ordner, fertiges Bild woanders hin. Ab da läuft die Kennzeichnung von allein.

Das setzt aber voraus, dass du KI-Bilder sauber in eigene Ordner trennen kannst. Sobald die Bilder aus einem CMS oder einer Datenbank kommen und gemischt im selben Ordner liegen, greift die Pfad-Regel nicht mehr. Dann ist ein explizites Flag der richtige Weg, und die aiGenerated-Prop der Komponente ist genau dafür da. Wie das aussieht, zeige ich weiter unten.

Die Komponente zum Kopieren

Hier ist die vollständige Komponente. Sie kommt ohne externe Pakete aus und funktioniert in jedem Astro-Projekt. Leg sie als src/components/AiImage.astro ab.

---
// AiImage.astro
// Bild mit automatischem KI-Badge.
// Das Badge erscheint, wenn der Bildpfad "/ki/" enthält.

interface Props {
  src: string;
  alt: string;
  aiGenerated?: boolean;   // Badge manuell erzwingen
  width?: number;
  height?: number;
  loading?: 'lazy' | 'eager';
}

const {
  src,
  alt,
  aiGenerated = false,
  width,
  height,
  loading = 'lazy',
} = Astro.props;

// Auto-Erkennung: Bilder im /ki/-Ordner gelten als KI-generiert
const isAiImage = src.includes('/ki/') || aiGenerated;
---

<figure class="ai-image">
  <img
    src={src}
    alt={alt}
    width={width}
    height={height}
    loading={loading}
    decoding="async"
  />

  {isAiImage && (
    <span class="ai-badge" aria-label="Dieses Bild wurde mit KI erstellt">
      KI-generiert
    </span>
  )}
</figure>

<style>
  .ai-image {
    position: relative;
    display: inline-block;
    margin: 0;
  }

  .ai-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  .ai-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.35rem;
    backdrop-filter: blur(4px);
  }
</style>

Der ganze Mechanismus steckt in einer Zeile: src.includes('/ki/'). Enthält der Pfad das Muster, wird isAiImage wahr und das Badge gerendert. Die aiGenerated-Prop bleibt als manueller Notausgang, falls ein KI-Bild einmal außerhalb des Ordners liegt.

Verwendung im Artikel

Eingebunden wird die Komponente wie jede andere Astro-Komponente. In einer .astro-Seite oder einer .mdx-Datei:

---
import AiImage from '../components/AiImage.astro';
---

<!-- Badge erscheint automatisch, weil der Pfad /ki/ enthält -->
<AiImage src="/images/ki/mein-diagramm.webp" alt="Von KI erzeugtes Diagramm" />

<!-- Kein Badge, normales Foto -->
<AiImage src="/images/fotos/wanderung.webp" alt="Foto von der Wanderung" />

<!-- Badge manuell erzwingen, obwohl der Pfad kein /ki/ hat -->
<AiImage src="/images/header.webp" alt="Header" aiGenerated />

Das erste Bild bekommt das Badge, das zweite nicht, das dritte über die Prop. Mehr Konfiguration braucht es im Alltag nicht.

💡 Tipp: Passe das Muster an deine Ordnerstruktur an. Nutzt du statt /ki/ lieber /ai/ oder /generated/, änderst du einfach die Zeichenkette in der includes-Prüfung. Die Konvention ist deine Entscheidung, wichtig ist nur, dass du sie konsequent einhältst.

Wann du die Pfade absichern solltest

Vielleicht ist dir aufgefallen, dass die Komponente den src-Wert direkt ausgibt, ohne ihn zu prüfen. Für einen Blog, dessen Inhalte du selbst in Markdown oder MDX pflegst, ist das in Ordnung. Du kontrollierst die Pfade, es gibt keinen fremden Input.

Anders sieht es aus, wenn die Bildpfade aus einer Quelle kommen, die du nicht kontrollierst, etwa aus einem CMS mit mehreren Autoren oder aus Benutzereingaben. Dann gehört an genau diese Stelle eine Prüfung, die nur erwartete Protokolle zulässt:

---
// Nur relative Pfade oder https zulassen, kein javascript: oder data:
function safeSrc(url: string): string | null {
  if (!/^(https:\/\/|\/)/.test(url)) return null;
  if (url.toLowerCase().includes('javascript:')) return null;
  return url;
}

const src = safeSrc(Astro.props.src);
---
{src && <img src={src} alt={alt} />}

Das ist die gleiche Logik, die in der produktiven Variante hier auf der Seite steckt. Für den Anfang brauchst du sie nicht, aber es ist gut zu wissen, wo sie hingehört, falls dein Projekt wächst.

Der gleiche Baustein in Nuxt und Vue

Das Prinzip ist nicht an Astro gebunden, und die Erkennung muss nicht über den Pfad laufen. In einem anderen Projekt von mir läuft die Seite auf Nuxt. Die Inhalte kommen dort aus dem CMS und aus einer Datenbank, KI- und normale Bilder liegen im selben Ordner. Eine Pfad-Regel würde da nicht greifen, also entscheidet ein Flag:

<!-- Badge über ein Flag steuern -->
<figure class="ai-image">
  <img :src="src" :alt="alt" loading="lazy" />
  <KiImageBadge v-if="aiGeneratedImage" />
</figure>

Das Flag aiGeneratedImage steht im Frontmatter des Artikels oder als Feld in der Datenbank, und die Badge-Komponente erscheint nur, wenn es gesetzt ist. Der Nachteil ist der, den die Ordner-Regel vermeidet: Du musst das Flag pro Bild pflegen. Der Vorteil ist, dass gemischte Ordner kein Problem sind.

Welcher Weg besser passt, hängt also nicht von der Technik ab, sondern davon, woher deine Bilder kommen:

• Getrennte Ordner in einem dateibasierten Projekt (Blog, statische Seite): Pfad-Regel.
• Gemischte Bilder aus CMS oder Datenbank: Flag oder ein Feld im Datensatz.

Das Badge selbst, also das Icon mit dem Text, bleibt in beiden Fällen dasselbe. Bei mir ist es über alle Projekte hinweg identisch, damit die Kennzeichnung überall gleich aussieht.

So setze ich es hier ein

Auf dieser Seite läuft die gleiche Idee, nur etwas ausgebaut. Die Bilder in den Artikeln und die Wolf-Avatare liegen alle unter /images/ki/ und tragen das Badge automatisch. Für mich ist das der angenehme Teil: Ich muss beim Schreiben nicht daran denken. Ich lege das Bild in den richtigen Ordner, und die Kennzeichnung passiert von selbst.

Wenn du KI-generierte Bilder auf deiner Seite nutzt, ist das ein kleiner Baustein, der dir Arbeit abnimmt. Er kostet dich einmal fünf Minuten Einrichtung und erledigt die Kennzeichnung danach von allein. Warum es sich lohnt, überhaupt zu kennzeichnen, und wann es Pflicht ist, habe ich im Artikel zum AI Act zusammengefasst. Wer tiefer verstehen will, wie die Modelle hinter den Bildern funktionieren, findet in Was ist ein LLM? den Einstieg.

Wenn du einen anderen Stack nutzt oder beim Einbauen hängst, meld dich einfach. Das lässt sich fast immer mit ein paar Zeilen lösen, und ich helfe gern beim Einrichten.