Handbuch · Kapitel 4.1

KI-Kennzeichnung in Webflow: drei Wege nach dem EU AI Act

Was Webflow ist: Ein Baukasten, in dem Websites visuell gestaltet und direkt veröffentlicht werden – mit eigenem CMS für wiederkehrende Inhalte und einer Mediathek, in der alle Bilder und Videos liegen. Seit dem 2. August 2026 gelten die Transparenzpflichten aus Artikel 50 der EU-KI-Verordnung. Wer in Webflow eine Website betreut, auf der KI-generierte Bilder oder Videos liegen, muss diese unter bestimmten Voraussetzungen kennzeichnen.

Webflow bringt dafür nach unserem Kenntnisstand keine eigene Funktion mit. Es gibt kein Feld „KI-generiert” an Assets und keine Filterung in der Mediathek. Das heißt aber nicht, dass es umständlich wäre. Diese Seite zeigt drei Wege, vom reinen Handbetrieb bis zur automatisierten Lösung.

Was bei Webflow besonders ist

Designer und CMS sind zwei Welten. Ein Bild kann aus einer Collection kommen – dann hängt ein Datensatz daran, an dem sich etwas festmachen lässt – oder es liegt direkt im Designer auf der Seite, ohne Datensatz. Die meisten Projekte haben beides, und davon hängt ab, welcher der Wege unten bei welchem Bild überhaupt greift.

Ein Rich-Text-Feld ist ein Block, kein Baukasten. Was jemand dort hineinschreibt, gibt Webflow als ein zusammenhängendes Stück HTML aus. Einzelne Bilder darin lassen sich im Designer nicht ansprechen – was Sie für Rich-Text-Bilder gestalten, gilt für alle Bilder in allen Beiträgen. Das ist der unangenehmste Fall, und er hat unten einen eigenen Abschnitt.

Eigener Code hängt am Bezahlplan. Auf einem kostenlosen Projekt kommen Sie weder an Embed-Elemente noch an den Bereich für Custom Code heran. Ob Weg C für Sie überhaupt zur Verfügung steht, entscheidet sich also am Plan, nicht an der Technik.

Was vorher geklärt sein muss

Bevor Sie irgendetwas einbauen, klären Sie den Umfang. Die Pflicht greift nicht bei allen KI-Inhalten.

Kennzeichnungspflichtig sind nach Artikel 50 Absatz 4 im Wesentlichen Deepfakes: Bild-, Ton- oder Videoinhalte, die wirklichen Personen, Gegenständen, Orten, Einrichtungen oder Ereignissen merklich ähneln und einer Person fälschlicherweise echt erscheinen würden.

Ein fotorealistisches Bild von Menschen, die es nicht gibt, fällt darunter. Ein generiertes Hintergrundmuster, ein Icon-Set oder eine erkennbare Illustration in aller Regel nicht.

Wer in Webflow pauschal jedes Bild markiert, produziert Arbeit ohne Nutzen und entwertet die Kennzeichnung dort, wo sie zählt. Die ausführliche Abgrenzung steht in Was gekennzeichnet werden muss und Deepfake, KI-generiert, KI-bearbeitet.

Was die Kennzeichnung leisten muss

Unabhängig vom gewählten Weg gelten dieselben Anforderungen.

Artikel 50 Absatz 5 verlangt, dass die Information spätestens zum Zeitpunkt der ersten Interaktion oder Aussetzung in klarer und eindeutiger Weise bereitgestellt wird und den geltenden Barrierefreiheitsanforderungen entspricht.

Der Verhaltenskodex der EU-Kommission ergänzt Platzierungsvorgaben. Nach der Zusammenfassung der Kommission soll das Symbol deutlich wahrnehmbar sein, dort platziert werden, wo keine Overlay-Elemente darüberliegen, direkt in den Inhalt eingebettet werden und auch sichtbar bleiben, wenn Inhalte erneut geteilt oder heruntergeladen werden. Der Kodex ist freiwillig, die Pflicht aus Artikel 50 nicht.

Für Webflow folgt daraus:

• Sichtbar, nicht nur in Metadaten. Eine Kennzeichnung, die nur in der Datei steckt, erfüllt die Anforderung „wahrnehmbar bei der ersten Aussetzung” nicht.
• Nicht überlagert. Lightbox-Steuerung, Play-Buttons, Verläufe und Consent-Banner dürfen nicht über dem Hinweis liegen.
• Zugänglich ausgezeichnet. Ein Symbol als CSS-Hintergrundbild trägt keinen Alt-Text. Nutzen Sie ein Image-Element mit sinnvollem Alt-Text oder setzen Sie ein aria-label.

Weg A: von Hand

Sinnvoll bis etwa 200 Assets oder wenn nur wenige Seiten betroffen sind.

1. Bestand sichten

Hier kommt die erste Enttäuschung: Das Assets-Panel lässt sich nicht nach Datum sortieren. Die Suche greift nur auf Dateinamen zu, filtern können Sie nach Dateityp und Ordner – mehr nicht. Ein „zeig mir alles, was seit 2023 hochgeladen wurde” gibt es nicht, obwohl genau das die naheliegende Frage wäre.

Bleiben die Dateinamen als erster Filter. Exporte tragen oft Muster wie DALL·E, Midjourney_, ChatGPT Image oder lange Hashes; danach können Sie gezielt suchen. Verlassen Sie sich nicht darauf: Wer eine Datei einmal umbenennt, hat kein Muster mehr.

Bei Stockmaterial ist die Herkunft oft gar nicht ersichtlich. Mehrere Anbieter haben KI-generiertes Material im Katalog, ohne es durchgängig auszuweisen.

2. Bildunterschrift setzen

Der einfachste Weg und zugleich der barrierefreundlichste. Ein Text-Element unter dem Bild, Inhalt zum Beispiel: Mit KI erstellt. Dazu ein Symbol als Image-Element daneben, mit Alt-Text.

Für das Symbol müssen Sie nichts entwerfen: Die EU-Kommission hat im Juni 2026 drei Zeichen veröffentlicht, die frei genutzt werden dürfen. Welches davon passt, hängt davon ab, wie stark KI beteiligt war:

Basissymbol

KI war an der Erstellung beteiligt.

Vollständig KI-generiert

Komplett von einer KI erzeugt, ohne von Menschen geschaffene Elemente.

Teilweise KI-verändert

Bestehender Inhalt wurde mit KI verändert, etwa ein ausgetauschtes Gesicht.

Es gibt sie in Schwarz, Weiß und je einer halbtransparenten Fassung – laden Sie die passende in die Webflow-Mediathek und verwenden Sie sie überall gleich. Alle zwölf Dateien und die Platzierungsregeln stehen in Die offiziellen EU-Icons.

Ein Hinweis, der oft untergeht: Die Verwendung dieser Symbole ist freiwillig, die Kennzeichnungspflicht ist es nicht. Und die Kommission hat getestet, dass die Zeichen deutlich besser verstanden werden, wenn ein kurzer Text danebensteht – das Symbol allein sagt vielen Menschen noch nichts.

Nachteil der Bildunterschrift: gestalterisch nicht überall möglich, etwa bei randlosen Hero-Bildern.

Und sie greift nur bei Bildern, die als Image-Element im Designer stehen. Für Bilder, die jemand in ein Rich-Text-Feld eingefügt hat, gibt es kein Element, unter das sich etwas setzen ließe – dazu Schritt 4.

3. Alternativ: Overlay im Bildcontainer

Wenn die Bildunterschrift nicht ins Layout passt:

1. Bild in einen Div-Block legen
2. Am Div-Block position: relative setzen
3. Darin ein Element mit position: absolute platzieren, etwa unten links
4. Innenabstand und Hintergrund mit leichter Transparenz, damit der Hinweis auf jedem Bild lesbar bleibt

Achten Sie darauf, dass an dieser Stelle nichts anderes liegt. Nach den Vorgaben des Kodex soll das Symbol dort sitzen, wo keine Overlay-Elemente dazwischenkommen.

4. Sonderfall: Bilder in Rich-Text-Feldern

Der unangenehmste Fall, und der, an dem die meisten Konzepte scheitern.

Das Problem ist strukturell: Ein Rich-Text-Feld gibt ein zusammenhängendes Stück HTML aus. Einzelne Bilder darin lassen sich nicht anfassen, nicht umwickeln und nicht an eine Bedingung binden. Was Sie über „Alle Rich-Text-Bilder” gestalten, gilt für alle Bilder in allen Beiträgen – auch für die echten Fotos. Eine pauschale Markierung ist dort schlimmer als keine.

Drei Behelfe ohne Code, in absteigender Güte:

5. Als Komponente speichern

Sobald Sie das Muster einmal gebaut haben, speichern Sie es als Komponente. Dann können Sie es überall einsetzen und später zentral ändern, ohne jede Stelle anzufassen. Das ist der Unterschied zwischen einer Lösung, die sechs Wochen hält, und einer, die bleibt.

6. Dokumentieren

Halten Sie fest, was Sie geprüft und wie Sie entschieden haben, mit Datum. Eine Tabelle ist besser als nichts. Was sie leistet und was nicht, steht in Dokumentation und Nachweis.

Weg B: über ein CMS-Feld

Der beste Weg, wenn die Bilder aus einer Collection kommen, also bei Blogs, Projektlisten, Produktseiten, Teamseiten.

1. Feld anlegen

In der Collection ein Feld vom Typ Schalter anlegen, zum Beispiel KI-generiert. Optional ein zweites Textfeld für den Hinweistext, falls er variieren soll.

2. Im Template binden

Im Collection-Template das Hinweis-Element einfügen und über die bedingte Sichtbarkeit an das Schalter-Feld binden. Dann erscheint es nur bei Einträgen, bei denen der Schalter gesetzt ist.

3. Bestand nachpflegen

Bestehende Einträge über den CSV-Export und -Import in einem Durchgang aktualisieren, statt jeden Eintrag einzeln zu öffnen.

Was dieser Weg leistet: Er wächst mit. Jeder neue Eintrag bringt das Feld mit, und wer Inhalte pflegt, trifft die Entscheidung beim Anlegen statt Monate später bei einer Nachprüfung.

Was er nicht leistet: Bilder, die direkt auf statischen Seiten liegen, erreicht er nicht. Die meisten Websites haben beides, also brauchen Sie in der Regel Weg A zusätzlich.

Weg C: automatisiert mit wirklich.ai

Ab ein paar hundert Assets wird Handarbeit unwirtschaftlich, spätestens beim zweiten Durchgang in drei Monaten.

Anbindung einrichten

Beim Anlegen des Projekts Webflow wählen und verbinden. Der Medienbestand wird eingelesen, inklusive der tatsächlich ausgespielten Varianten.

Dabei werden Metadaten, Herkunftsangaben nach C2PA und Dateimuster ausgewertet; Unklares landet auf einem Stapel zum Durchgehen. In die Dateien wird nichts zurückgeschrieben, und die Einstufung trifft immer ein Mensch.

Regeln statt Einzelentscheidungen

Hundert Bilder aus derselben Kampagne markieren Sie in einem Rutsch. Als Bezugsgrößen stehen der Ordner in der Mediathek und die Collection zur Verfügung. Wiederkehrende Entscheidungen werden zu Regeln, die auch für neue Uploads greifen.

Einbau des Scripts

In den <head> unter Site Settings → Custom Code:

<!-- wirklich.ai · KI-Kennzeichnung -->
<script src="https://cdn.wirklich.ai/label.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Unter 10 kB, lädt asynchron, setzt keine Cookies. Zusätzlich zur sichtbaren Markierung wird die Einstufung maschinenlesbar nach dem IPTC-Vokabular digitalSourceType ausgegeben, siehe C2PA und Content Credentials.

Jeder Prüfschritt wird dabei protokolliert; Einträge sind nachträglich nicht änderbar.

Die Nutzung der wirklich.ai App ist dauerhaft kostenlos – kostenloses Konto erstellen.

Webflow-spezifische Fallstricke

Custom Code kostet. Sie brauchen entweder einen aktiven Site-Plan oder ein bezahltes Workspace-Paket (Core, Growth, Agency oder Freelancer). Auf einem kostenlosen Projekt kommen Sie an Weg C und an Embed-Elemente nicht heran. Auf der webflow.io-Staging-Adresse läuft Custom Code dagegen mit – dort können Sie also testen, bevor es auf die eigene Domain geht.

Bildvarianten. Webflow erzeugt automatisch mehrere Größen und liefert sie über ein CDN aus. Was in der Mediathek liegt, ist nicht identisch mit dem, was der Browser lädt – je nach Bildschirmbreite kommt eine andere Datei an. Wer von Hand kennzeichnet, prüft deshalb am fertigen Bild auf der Seite, nicht in der Mediathek.

Verlassen Sie sich nicht auf Metadaten. In den von uns geprüften Webflow-Beständen – gut dreitausend über das Webflow-CDN ausgelieferte Bilder – enthielt keine einzige Datei noch einen Herkunftsnachweis nach C2PA oder eine XMP-Angabe zur KI-Herkunft. Ob die Angaben schon vor dem Upload fehlten oder bei der Verarbeitung verloren gehen, können wir nicht sagen; wir haben es nicht mit einem präparierten Bild gegengetestet. Praktisch bleibt es gleich: Eine Kennzeichnung, die nur in den Metadaten steckt, trägt in Webflow nicht – und sie würde die Sichtbarkeitsanforderung ohnehin nicht erfüllen.

Der Designer ist nicht die Website. Prüfen Sie am Ende auf der veröffentlichten Seite, nicht in der Vorschau.

Assets werden wiederverwendet. Dasselbe Bild kann auf mehreren Seiten liegen. Wenn Sie es an einer Stelle kennzeichnen, ist es an den anderen noch nicht gekennzeichnet.

Was davon bei Weg C entfällt

Haltung zeigen: der wirklich.ai Transparenz-Pledge

Wer Aufwand in Transparenz steckt, muss das nicht im Hintergrund verstecken. Mit dem wirklich.ai Transparenz-Pledge setzen Sie ein Zeichen für ehrliche Kommunikation im Netz – unabhängig davon, ob Sie KI-Medien einsetzen und offen ausweisen oder vollständig auf echte Fotografie setzen.

Das Signet für Ihren Footer verlinkt direkt auf Ihr öffentliches Transparenz-Protokoll. Es zeigt Kundschaft, Partnern und Behörden auf einen Blick, dass auf Ihrer Website nicht nur behauptet, sondern geprüft wird:

Es behauptet bewusst wenig: keine Zertifizierung, keine Rechtskonformität, sondern nur, dass hier gekennzeichnet und darüber Buch geführt wird – nachprüfbar über das verlinkte Protokoll. Was es genau aussagt und was nicht, steht in Das wirklich.ai Signet.

Andere Systeme

Die Anforderungen sind überall dieselben, die Umsetzung nicht. Betreuen Sie weitere Websites, finden Sie hier die passende Anleitung:

WordPress Live Sanity Live Astro Live Statische Sites Live Framer Live Lovable Live Shopify Bald Wix Bald Strapi Bald

Dieser Beitrag gibt den Verordnungstext und benannte Quellen wieder. Er ist keine Rechtsberatung und ersetzt im Einzelfall keine anwaltliche Prüfung.

Angaben zur Rechtslage, zu deren Auslegung sowie zu Funktionen, Oberflächen und Schnittstellen fremder Systeme geben den Stand zum oben genannten Datum wieder. Beides kann sich jederzeit und ohne Ankündigung ändern. Für Aktualität, Richtigkeit und Vollständigkeit übernehmen wir keine Gewähr; eine Haftung für Schäden aus der Nutzung dieser Inhalte, der beschriebenen Anleitungen oder der Code-Beispiele ist ausgeschlossen, soweit gesetzlich zulässig. Genannte Produkt- und Firmennamen gehören ihren jeweiligen Inhabern; eine Verbindung zu ihnen besteht nicht.

Dieser Text wurde mit Unterstützung von KI erstellt und redaktionell geprüft.

Link kopieren