Der Moment, in dem mein Kaffee kalt wurde
Erinnerst du dich an meinen Nano-Banana-Praxistest? Über zwei Dutzend KI-generierte Bilder von mir — im Café, am Strand, im Studio, einmal mit Alice‘ White Rabbit. Die sind seitdem ganz selbstverständlich auf meiner Website eingebunden.
KI-Bilder kennzeichnen? Oh yes: Da sitze ich mit meinem Kaffee und erinnere mich dank eines Instagram-Posts: Ab dem 2. August 2026 gelten die Transparenzpflichten aus Artikel 50 des EU AI Act. Realistisch wirkende KI-Bilder — besonders solche, die echte Personen zeigen — müssen als künstlich erzeugt erkennbar sein.
Ein Blick in meine WordPress-Mediathek zeigt mir sogleich, dass das auf mindestens 30 KI-Bilder zutrifft. Alle sind sie nicht gekennzeichnet.
Naaaaja.
Die gute Nachricht vorweg: Keine zwei Stunden später war jedes einzelne dieser Bilder gekennzeichnet — mit einem klaren „KI-generiert“-Badge auf dem Bild, sauberem Alt-Text und Bildunterschrift. Was mich aber echt feiern ließ, war die Tatsache, dass ich dazu keine CSS-Kenntnisse brauchte, weil ich die Arbeit an genau die Technologie delegiert habe, die mir die Bilder erstellt hat: an eine KI.
In diesem Beitrag zeige ich dir die Schritt-für-Schritt-Anleitung zum Nachmachen und einen Blick in meine Irrungen und Wirrungen auf dem Weg dahin, inklusive des Moments, in dem kurz mal ein Bild von meiner Website verschwand.
Was der EU AI Act ab August 2026 verlangt (Kurzfassung)
Bitte beachte: Ich bin keine Anwältin, das hier ist keine Rechtsberatung.
Artikel 50 des EU AI Act verlangt Transparenz bei KI-generierten Inhalten. Für uns Solo-Selbstständige heißt das praktisch: Wer realistisch wirkende KI-Bilder öffentlich zeigt — und dabei vor allem solche, die echte Menschen (also in meinem Fall MICH) darstellen — muss offenlegen, dass sie künstlich erzeugt sind. Comic-Illustrationen und offensichtliche Grafiken sind weniger kritisch. Ein fotorealistisches „Ich auf den Streets of New York“, das nie stattgefunden hat: sehr wohl.
Fachlich fallen solche Bilder unter den Begriff Deepfake — im AI Act weit gefasst als jedes KI-erzeugte oder -bearbeitete Material, das echten Personen, Orten oder Ereignissen ähnelt und für authentisch gehalten werden könnte. Und der Anreiz, das ernst zu nehmen, ist real: Bei Verstößen drohen laut Verordnung Bußgelder von bis zu 15 Millionen Euro oder 3 % des weltweiten Jahresumsatzes. Den rechtlichen Rahmen erklären zum Beispiel die IT-Recht-Kanzlei und Haufe ausführlich (keine Sorge, für den praktischen Teil bleiben wir hier).
Die Kennzeichnung sollte dabei sichtbar am Bild passieren, nicht nur irgendwo im Kleingedruckten oder zum Beispiel im Impressum. Ich habe mich für drei Ebenen entschieden:
- Ein optisch passendes Badge direkt auf dem Bild („KI-generiert“, unten rechts)
- Die Bildunterschrift (Caption) mit KI-Hinweis
- Alt-Text und Beschreibung in der Mediathek — für Screenreader, Suchmaschinen und AI-Crawler
Mein Plan: Die KI, die mir die Bilder erstellt hat, darf sie jetzt bitte auch kennzeichnen
Mein erster Impuls war natürlich: Ach krass, das muss auch noch auf die „unbedingt jetzt zu erledigen“-To-do-Liste. Du kennst diese Liste bestimmt auch, mit lauter Dingen, die sofort Druck machen — bis mir eingefallen ist, dass ich die Aufgabe vielleicht gar nicht selbst lösen muss.
Mein zweiter Impuls war damit auch deutlich besser: Moment mal. Wenn ich KI-Bilder mit KI erstellt habe, warum sollte ich die Kennzeichnung dann nicht auch mit KI lösen?
Ich arbeite jetzt seit einiger Zeit mit Claude, dem KI-Assistenten von Anthropic — im sogenannten Cowork-Modus, in dem Claude über eine Browser-Erweiterung direkt in meinem WordPress-Admin mitarbeiten kann. Wichtig dabei: Ich musste dazu kein Passwort herausgeben. Ich war einfach in Chrome mit der aktiven Claude-Erweiterung eingeloggt. Claude hat dann in meiner laufenden Sitzung (also im Screen) gearbeitet und ich konnte jeden Schritt live mitverfolgen.
Als Prompt habe ich die Aufgabe einfach direkt formuliert:
Ich habe KI-generierte Bilder auf meiner Website und möchte diese nach dem EU Transparenz Act ab August auszeichnen. Die Umsetzung soll bestenfalls auf der Website (z.B. im CSS) stattfinden, da ich nicht alle Bilder manuell ersetzen möchte. Wie kannst du mich dabei unterstützen?
Was dann passierte, war genau diese Mischung, die KI-Arbeit für mich so spannend macht: Es ging unfassbar schnell — und trotzdem musste ich hinschauen. Sehr genau sogar und, während ich diesen Beitrag schreibe, habe ich noch einen Fehler gefunden, den Claude mir später noch anpassen muss (findest du die falsche Platzierung?). So ist das eben mit der KI 😄
Schritt für Schritt: So kennzeichnest du KI-Bilder in WordPress
Das folgende Vorgehen funktioniert in WordPress mit Gutenberg und Elementor und zwar ohne zusätzliches Plugin, ohne Page-Builder-Upgrade und zum Glück auch ohne „ich lerne jetzt mal eben CSS“.
Du brauchst dafür gerade mal:
- Zugang zu deinem WordPress-Admin, also deinem Backend
- die KI-Bilder, die du kennzeichnen möchtest
- vielleicht ein bisschen Mut, Claude da jetzt ran zu lassen
Naaaaja. Und im Idealfall ein privates Browserfenster zum Kontrollieren. Aber dazu gleich mehr.
Zwei Wege, ein Ziel
An der Stelle ein wichtiger Hinweis: Den folgenden Code habe ich nicht selbst geschrieben. Ich habe Claude die Aufgabe gegeben und zugeschaut (bzw. was anderes erledigt). Ich zeige dir hier trotzdem jeden einzelnen Schritt — aus zwei Gründen. Erstens, damit du verstehst, was eigentlich passiert. Und zweitens, weil du jetzt die Wahl hast: Du kannst die Schritte selbst nachbauen (alles zum Kopieren ist dabei) — oder du gibst genau diese Aufgabe an deine eigene KI und lässt sie für dich umsetzen, so wie ich. Beide Wege führen ans Ziel.
Schritt 1: Das Badge-CSS einfügen
Claude legt den Code unter Design → Customizer → Zusätzliches CSS ab. Falls du selbst Hand anlegst, fügst du ihn genau dort ein:
/* Badge für KI-generierte Bilder */
.ki-bild {
position: relative;
align-self: start;
}
.ki-bild::after {
content: "KI-generiert";
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.9);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
line-height: 1;
padding: 5px 9px;
border-radius: 4px;
letter-spacing: 0.02em;
pointer-events: none;
z-index: 2;
}
/* Mit Bildunterschrift: Badge nach oben rechts */
.ki-bild:has(figcaption)::after {
bottom: auto;
top: 10px;
}Dann klickst du auf Veröffentlichen.
Ab jetzt bekommt jedes Bild, dem du die CSS-Klasse ki-bild gibst, automatisch ein Badge. Den Text kannst du natürlich anpassen — bei mir steht schlicht „KI-generiert“.
Kurzer Technik-Hinweis: Der Code hängt sich an Klassen, die bei WordPress, Gutenberg und Elementor überall gleich sind — er ist also übertragbar und nicht auf meine Website zugeschnitten. Je nach Theme oder Layout kann die genaue Position des Badges minimal abweichen; dann braucht es eine kleine Anpassung. Und der Selektor
:has()funktioniert in allen aktuellen Browsern — in sehr alten fehlt nur das Badge, Alt-Text und Bildunterschrift greifen trotzdem.
Schritt 2: Die Klasse pro Bild setzen
Jetzt musst du dem jeweiligen Bild nur noch sagen: Du bist eins von den KI-Bildern.
In Gutenberg: Bild-Block anklicken → rechte Seitenleiste → Erweitert → Feld „Zusätzliche CSS-Klasse(n)“ → ki-bild eintragen.
In Elementor: Bild-Widget anklicken → Tab Erweitert → Feld „CSS-Klassen“ → ki-bild eintragen.
Für mich war das der Moment, in dem ich mich wieder einmal super freue, weil es eben nicht bedeutet: Ich muss jetzt meine Website umbauen, ein neues Plugin installieren oder mich durch irgendeine Spezialfunktion klicken, die ich danach nie wiederfinde. Ich gebe dem Bild einfach diese Klasse mit und die sorgt dann dafür, dass WordPress das Badge anzeigt.
Also im Grunde wie ein kleines Etikett oder ein Tag im Hintergrund: Dieses Bild gehört zu den KI-Bildern und soll sichtbar als solches markiert werden.
Schritt 3: Caption, Alt-Text und Beschreibung ergänzen
Das Badge ist der im Frontend, also für die Website-Besucher:innen sichtbare Teil. Ich wollte aber nicht nur optisch sauber sein, sondern auch in der Mediathek Ordnung schaffen.
Öffne dafür in WordPress die Mediathek, klicke das jeweilige Bild an und ergänze diese Felder:
- Alt-Text: Erst den Bildinhalt beschreiben, dann den KI-Hinweis. Zum Beispiel: „Frau mit Laptop im Café (KI-generiertes Bild)“
- Beschriftung/Caption: Ein klarer Hinweis wie „KI-generiertes Bild“ oder „KI generated image“
- Beschreibung: Zum Beispiel: „KI-generiertes Bild, erstellt mit [Tool]. Keine reale Fotografie.“
Der Alt-Text ist relevant für Screenreader, Suchmaschinen und zunehmend auch dafür, wie KI-Systeme deine Bilder einordnen.
Schritt 4: Cache leeren
Das ist der Schritt, bei dem ich kurz dachte, ich hätte alles kaputt gemacht, oder die KI ihre Arbeit eben doch nicht sauber erledigt.
Wenn du ein Caching-Plugin nutzt — bei mir ist es WP Fastest Cache — dann lösche nach der Änderung unbedingt den Cache. Sonst kann es passieren, dass du im Backend (und der Vorschau in dem Browser, in dem du gerade arbeitest) alles korrekt siehst, deine Website nach außen aber weiter die alte Version ausliefert.
Und dann sitzt du da, klickst hektisch zwischen WordPress, Frontend und Claude hin und her und denkst: Warum sieht das immer noch falsch aus?
Spoiler: Es war der Cache. Zweimal.
Die Abkürzung, wenn du mehr als drei Bilder hast: Kennzeichnung per Dateiname
Bei einem einzelnen Bild hätte ich die Klasse einfach von Hand gesetzt und wäre fertig gewesen. Bei mindestens 30 Bildern war mein Gedanke aber: Och nö, das machen wir jetzt bitte nicht 30-mal einzeln.
Also haben Claude und ich das System erweitert: Statt jedes Bild einzeln mit der Klasse ki-bild zu versehen, erkennt eine zusätzliche CSS-Regel KI-Bilder direkt am Dateinamen. Und dieser Trick löst gleich zwei Probleme auf einmal.
Der Bestand: Meine 24 KI-Porträts hießen ja schon alle nach demselben Muster (Shireen-Predehl-Ergebnis-…). Claude hat die Regel genau auf diese vorhandenen Namensmuster angesetzt — und schon trugen alle 24 auf einen Schlag ihr Badge, ganz ohne die Klasse 24-mal von Hand zu setzen. Für die Café-, Shooting- und Produktbilder kamen einfach die passenden weiteren Muster dazu. So war der komplette Altbestand in Minuten erledigt.
Die Zukunft: Damit ich nicht bei jeder neuen Bildserie ein neues Muster ergänzen muss, gibt es zusätzlich eine allgemeine Regel, die auf -KI- im Dateinamen reagiert. Mein Workflow ist seitdem denkbar simpel: Neue KI-Bilder bekommen vor dem Upload einfach -KI- in den Namen — zum Beispiel shireen-cafe-KI-2026.png — und die sichtbare Kennzeichnung ist automatisch da. Kein CSS mehr, kein Klassen-Setzen.
Hier die allgemeine Regel für alle künftigen -KI--Bilder:
/* Automatisch: jede Datei mit "-KI-" im Namen bekommt das Badge */
figure:has(> img[src*="-ki-" i]),
.elementor-widget-container:has(> img[src*="-ki-" i]),
.elementor-post__thumbnail:has(> img[src*="-ki-" i]) {
position: relative;
align-self: start;
}
figure:has(> img[src*="-ki-" i])::after,
.elementor-widget-container:has(> img[src*="-ki-" i])::after,
.elementor-post__thumbnail:has(> img[src*="-ki-" i])::after {
content: "KI-generiert";
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.9);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
line-height: 1;
padding: 5px 9px;
border-radius: 4px;
letter-spacing: 0.02em;
pointer-events: none;
z-index: 2;
}Ein Punkt noch, damit kein falscher Eindruck entsteht: Der Dateiname erledigt nur das sichtbare Badge. Alt-Text, Caption und Beschreibung sind eine getrennte Sache — und auch die habe nicht ich für alle 30 Bestandsbilder einzeln getippt. Claude hat sie über die WordPress-Schnittstelle in wenigen Minuten befüllt.
Und genau das war für mich der eigentliche Aha-Moment: Diese Aufgabe wäre ohne KI sehr wahrscheinlich auf der Irgendwann-Liste verschimmelt. Mit KI war sie plötzlich machbar. Nicht irgendwann. Sondern direkt.
Was schiefging
Damit du jetzt nicht denkst, ich hätte einen Prompt geschrieben, Claude hätte einmal gezuckt und danach war alles perfekt: Nein. Es gab ein paar sehr überraschende „Was ist denn jetzt schon wieder los?“-Momente.
1. Das Badge saß neben dem Bild.
In Elementor war ein Bild auf 55 % Widget-Breite eingestellt. Das Badge klebte dadurch nicht auf dem Foto, sondern an der Container-Ecke. Sah nicht schlimm aus, aber eben auch nicht richtig. Die Lösung war eine eigene Versatz-Regel für genau dieses Widget.
2. Ein Bild verschwand komplett.
Ein etwas aufregenderer Fall war ein Bild, das zwischendurch einfach komplett verschwunden ist. Nicht „das Badge sitzt noch nicht ganz richtig“. Nicht „die Position ist etwas verrutscht“. Sondern: Auf der Live-Seite war an der Stelle plötzlich kein Bild mehr zu sehen.
Claude hatte gerade versucht, die Badge-Position für ein Elementor-Bild zu korrigieren. Im ersten Moment klang die Lösung logisch — ein bisschen CSS nachjustieren, damit das Badge wirklich auf dem Bild sitzt und nicht irgendwo am Rand des Containers. Nur hat sich diese Änderung dann offenbar mit Elementors Lazy Loading verhakt.
Das war auch so ein typischer KI-Cowork-Moment: Die KI setzt schnell um, aber ich muss trotzdem hinschauen und entscheiden, ob das Ergebnis wirklich stimmt. In dem Fall hieß das: Änderung zurücknehmen, einmal kurz durchatmen, nicht wild weiter am CSS herumdoktern und dann sauberer neu ansetzen. Danach wieder im Frontend prüfen — und zwar nicht nur in meiner eingeloggten Ansicht, sondern auch so, wie Besucher:innen die Seite sehen.
3. Der Cache hat uns zweimal veräppelt.
Alles war längst korrekt — nur zeigte mir die ausgeloggte Website noch die alte Version. Seitdem ist „Cache leeren und im privaten Fenster prüfen“ bei mir kein optionaler Schritt mehr, sondern Pflicht.
4. Ein Badge hing plötzlich im Nirgendwo.
Das hier ist mir sogar erst zwei Tage später aufgefallen: Auf ein paar Übersichtsseiten schwebte unten rechts ein einsames „KI-generiert“ — meilenweit von jedem KI-Bild entfernt. Schuld war ein zu weit gefasster Teil der Regel, der sich nicht nur ans Bild, sondern auch an große Eltern-Container drumherum gehängt hat. Der gute Teil: In dem Code, den ich dir hier zur Verfügung stelle, ist das bereits korrigiert — er setzt das Badge nur noch direkt aufs Bild.
Mein Learning daraus: Mit KI zu arbeiten fühlt sich für mich an wie die Zusammenarbeit mit einer richtig guten Kollegin. Sie setzt schnell und kompetent um — aber das Ergebnis wird nur so gut wie mein Briefing und mein Feedback. Ich bin dabei in genau der Rolle, die ich aus der Agenturzeit kenne: die der Creative Directorin, die die Richtung vorgibt, draufschaut und nachjustiert.
„Das Badge sitzt schief“ plus Screenshot war für Claude verwertbar und auch innerhalb kurzer Zeit gefixt.
Meine Checkliste, wenn du es nachmachen willst
- Inventur machen: Öffne deine Mediathek und zähl doch einmal (grob) durch: Welche Bilder sind KI-generiert?
- Badge-Code einfügen: CSS in den Customizer kopieren und veröffentlichen.
- Bestandsbilder kennzeichnen: Entweder die Klasse
ki-bildsetzen oder die Dateinamen-Regel nutzen. - Mediathek pflegen: Alt-Text, Caption und Beschreibung ergänzen.
- Neuen Workflow festlegen: Neue KI-Bilder direkt mit
-KI-im Dateinamen hochladen. - Cache leeren: Danach prüfen, ob die Änderung auf der Website sichtbar ist.
- Ausgeloggt prüfen: Am besten im privaten (Inkognito) Fenster und auf den wichtigsten Seiten.
- Optional prüfen: Falls du ein Bildoptimierungs-Plugin nutzt, schau nach, ob Metadaten wie C2PA/IPTC erhalten bleiben. Stichwort: „EXIF behalten“.
Was ich damit sagen will
Der 2. August 2026 ist für mich kein Anlass, hektisch zu werden. Aber er war der Punkt, an dem aus einem vagen „müsste ich irgendwann mal prüfen“ eine konkrete Aufgabe wurde. Ich würde dabei zwei Dinge trennen. Das Erste ist die Aufgabe an sich: überhaupt einmal durchzugehen, welche KI-generierten Bilder auf der Website sichtbar sind, wo sie eingebunden sind und welche davon nachträglich bearbeitet werden müssen. Das ist der Teil, der auf die To-do-Liste gehört — inklusive einer sauberen Übersicht, damit das Thema nicht irgendwo zwischen Mediathek, Blogbeiträgen und alten Landingpages verloren geht.
Das Zweite ist die Frage der Umsetzung: Wie sollen diese Bilder gekennzeichnet werden? Bei mir bedeutet das: ein sichtbarer Hinweis direkt am Bild und zusätzlich Informationen in Caption, Alt-Text und Beschreibung.
Für mich war die Umsetzung deshalb weniger ein Technikprojekt als ein praktischer Test: Kann ich eine wichtige, aber ehrlich gesagt ziemlich lästige Aufgabe so an KI delegieren, dass am Ende wirklich etwas Fertiges auf der Website passiert?
Die Antwort ist ganz klar ja, und der entscheidende Teil bleibt die Kontrolle. Ich musste entscheiden, welche Art von Kennzeichnung zu meiner Website passt, die Ergebnisse kontrollieren, Fehler erkennen und Claude gezielt nachsteuern.
Genau darin liegt für mich der Wert. KI hat mir nicht die Verantwortung abgenommen, sondern den handwerklichen Teil deutlich schneller gemacht. Ich musste nicht selbst herausfinden, welche CSS-Regeln nötig sind, wo WordPress die Klassen speichert oder wie ich 30 Bilder sinnvoll beschrifte. Ich konnte die Richtung vorgeben und das Ergebnis prüfen, statt mich stundenlang in technischen Details zu verlieren.
Das Badge ist für mich kein störender Pflicht-Hinweis, sondern ein bewusst gesetztes Signal. Es macht sichtbar, dass auf meiner Website KI-generierte Bilder verwendet werden, ohne den Beitrag optisch zu sprengen. Und genau darum geht es mir bei Transparenz: nicht dramatisieren, nicht verstecken, sondern klar zeigen, was Sache ist.
Häufige Fragen zur KI-Kennzeichnung
Muss ich wirklich jedes KI-Bild auf meiner Website kennzeichnen?
Nein. Kennzeichnungspflichtig sind vor allem realistisch wirkende Bilder, die für echt gehalten werden könnten — sogenannte Deepfakes, etwa fotorealistische Personen- oder Produktbilder. Klar erkennbare Illustrationen, Comics oder abstrakte Grafiken sind unkritischer. Im Zweifel gilt: lieber kennzeichnen.
Ab wann gilt die Kennzeichnungspflicht?
Die Transparenzpflichten aus Artikel 50 des EU AI Act gelten ab dem 2. August 2026. Wer KI-Bilder auf der Website hat, sollte also bis dahin einmal durch die Mediathek gehen und kennzeichnen.
Reicht ein Hinweis im Impressum oder in den AGB?
Nein. Der Hinweis sollte dort erkennbar sein, wo das Bild gezeigt wird — also sichtbar am Bild selbst, zum Beispiel als Badge oder Bildunterschrift. Ein Satz versteckt im Impressum erfüllt die Transparenzidee nicht.
Was droht bei einem Verstoß?
Der EU AI Act sieht empfindliche Bußgelder vor — je nach Verstoß bis zu 15 Millionen Euro oder 3 % des weltweiten Jahresumsatzes. Für Solo-Selbstständige ist das Risiko in der Praxis kleiner, aber der Aufwand fürs Kennzeichnen ist so gering, dass sich das Aufschieben schlicht nicht lohnt.
Gilt das auch für Bilder, die ich nur leicht mit KI bearbeitet habe?
Es kommt darauf an. Kleine Retuschen sind meist unkritisch. Sobald eine KI-Bearbeitung aber den Eindruck deutlich verändert und das Ergebnis für eine echte, unbearbeitete Aufnahme gehalten werden könnte, spricht viel für eine Kennzeichnung.
Und jetzt du
Hast du schon KI-Bilder von dir oder für dein Business erstellt — oder steht das noch auf deiner „will ich mal ausprobieren“-Liste?
Falls du noch am Anfang bist: Ich habe dafür ein kostenloses Prompt-Tool gebaut: KI-Businessfotos, die nach dir aussehen (statt nach KI). Damit bekommst du einen Prompt, der zu dir, deinem Stil und dem Bild passt, das du erstellen möchtest.
Und wenn du bereits KI-Bilder nutzt: Sind sie schon irgendwo auf deiner Website eingebunden — im Blog, auf einer Landingpage, in einem Freebie oder auf deiner Über-mich-Seite?
Mich würde interessieren, wie du bisher damit umgehst: Hast du deine KI-Bilder schon gekennzeichnet, steht das noch auf deiner Liste oder löst du es ganz anders? Schreib mir gern in die Kommentare, wie du es machst.
Wenn du solche Praxisberichte — inklusive der Pannen — direkt in dein Postfach bekommen willst, melde dich zu meinen Newsletter an! 👇🏻
