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.

Prüfen Sie, ob Ihr Webflow-Tarif Custom Code enthält.

Bilder markieren

Welche Bilder ein Label brauchen, entscheiden Sie, etwa mit dem Pflicht-Check. Das Widget kennzeichnet nur markierte Bilder, auf drei kombinierbaren Wegen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für mit KI veränderte Fotos.
• 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.

In Webflow ist das Custom Attribute der einfachste Weg, 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 data-ai-label mit dem Wert generated oder modified hinzu. Die zweite Ebene geht genauso mit data-ai-parts, etwa mit dem Wert background.

Bei Bildern aus einer CMS-Sammlung ist der Alt-Text oft praktischer. Sie pflegen ihn im CMS-Eintrag oder in den Bildeinstellungen. Auch der Dateiname mit --ai funktioniert, wenn er in der Bildadresse ankommt; das zeigt der Seitenquelltext.

Webflow/ Element settings

AI

kerze.jpg

Custom attributes

NameValuedata-ai-labelgenerated

KI-generiert

Duftkerze im Glas24,90 €

Vase aus Steinzeug32,00 €

KI-generiert

Pilzleuchte59,00 €

Stolpersteine

• 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, Attribut und Alt-Text hängen ohnehin am Element.
• Interaktionen: Eingeblendete Bilder bekommen ihr Label, sobald sie sichtbar und groß genug sind. Prüfen Sie Slider und Tabs.

Grenzen des Widgets

• Das Widget erreicht nur <img>-Elemente auf Seiten mit dem Skript. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bleiben ohne Label.
• Webflow-Shop: Prüfen Sie Warenkorb und Kasse.
• E-Mails wie Bestellbestätigungen erreicht es nicht. Für Bilder außerhalb der Website erzeugen Sie mit KI-Bild kennzeichnen eine Kopie mit eingebranntem Label.
• Datenschutz: Beim Laden von ai-label.app sieht unser Hoster wie bei jedem Abruf die IP-Adresse. Cookies setzt das Skript nicht. 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.