KI-Bilder in Webflow kennzeichnen

Script-Tag einbinden

<script src="https://www.ai-label.app/widget.js" defer></script>

Webflow bietet Custom Code für die ganze Website und für einzelne Seiten. Für das Widget nehmen Sie die ganze Website:

1. Öffnen Sie die Site Settings und dort den Bereich Custom code.
2. Fügen Sie das Script-Tag in das Feld für den Head ein.
3. Speichern Sie und veröffentlichen Sie die Website.

Eigener Code läuft auf der veröffentlichten Website, nicht auf der Arbeitsfläche des Designers. Prüfen Sie, ob Ihr Webflow-Tarif Custom Code enthält.

Bilder markieren

Das Widget kennzeichnet nur Bilder, die Sie markiert haben. Ob ein Bild ein Label braucht, entscheiden Sie, zum Beispiel mit dem Pflicht-Check. Drei Wege, die sich kombinieren lassen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für Fotos, die mit KI verändert wurden.
• Dateiname mit Kennung vor der Endung: vase--ai.jpg oder vase--ai-mod.jpg.
• Alt-Text, der mit „(KI-generiert)“ oder „(Mit KI verändert)“ endet. Der Zusatz hilft zugleich Screenreadern.

Am einfachsten in Webflow ist das Custom Attribute, weil Webflow beliebige Attribute an Elementen erlaubt. Wählen Sie das Bild aus, öffnen Sie die Element-Einstellungen und fügen Sie unter Custom attributes ein Attribut hinzu: Name data-ai-label, Wert generated für vollständig mit KI erzeugte Bilder oder modified für veränderte Fotos. Für die zweite Ebene geht genauso data-ai-parts, etwa mit dem Wert background.

Bei Bildern aus einer CMS-Sammlung ist der Alt-Text oft praktischer: Pflegen Sie ihn im CMS-Eintrag oder in den Bildeinstellungen und ergänzen Sie „(KI-generiert)“ oder „(Mit KI verändert)“. Auch der Dateiname mit --ai ist möglich; prüfen Sie im Seitenquelltext, ob er in der Bildadresse ankommt.

Stolpersteine

• Nicht veröffentlicht: Änderungen am Custom Code wirken erst nach dem Veröffentlichen.
• Komponenten: Ein Attribut an einem Bild in einer Komponente gilt überall, wo die Komponente steht. Markieren Sie dort nur Bilder, die überall KI-Bilder sind.
• Responsive Bilder: Webflow liefert Bilder in mehreren Größen aus. Das Widget prüft auch srcset; das Attribut und der Alt-Text hängen ohnehin am Element.
• Interaktionen: Bilder, die erst eingeblendet werden, bekommen ihr Label, sobald sie sichtbar und groß genug sind. Prüfen Sie Slider und Tabs.

Grenzen des Widgets

• Das Widget erreicht nur Bilder als <img> auf Seiten, auf denen das Skript läuft. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bekommen kein Label.
• Webflow-Shop: Prüfen Sie Warenkorb und Kasse selbst. Bestellmails erreicht das Widget nicht.
• Bestellbestätigungen per E-Mail erreicht es nicht. Wo Sie ein Bild außerhalb der Website zeigen, hilft eine Kopie mit eingebranntem Label aus KI-Bild kennzeichnen.
• Datenschutz: Das Skript wird von ai-label.app geladen. Dabei sieht unser Hoster die IP-Adresse wie bei jedem Abruf. Es setzt keine Cookies. Erwähnen Sie die Einbindung in Ihrer Datenschutzerklärung.

Native App

Eine eigene App für Webflow ist geplant. Einen Termin gibt es noch nicht. Bis dahin funktioniert das Widget ohne Installation im System. Wenn Sie möchten, schreiben wir Ihnen einmal zum Start.

Keine Rechtsberatung. Die Inhalte erklären die Rechtslage auf Grundlage der Primärquellen, sie ersetzen keine Prüfung im Einzelfall.