KI-Bilder in Magento und Adobe Commerce kennzeichnen

Script-Tag einbinden

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

1. Im Admin: Content > Design > Configuration.
2. In der Zeile der gewünschten Store View auf Edit klicken.
3. Unter „Other Settings“ den Bereich HTML Head öffnen.
4. Das Script-Tag in das Feld „Scripts and Style Sheets“ einfügen.
5. Save Configuration, danach unter System > Cache Management die als ungültig markierten Caches aktualisieren.

Die Einstellung gilt für die gewählte Ebene. Haben Sie mehrere Store Views, etwa je Sprache, prüfen Sie jede einzeln.

Content Security Policy

Laut Adobe muss JavaScript aus diesem Feld in der Content Security Policy freigegeben sein, sonst läuft es auf den Checkout-Seiten nicht. Ab Version 2.4.7 gilt auf Zahlungsseiten der strenge Modus, auf den übrigen Seiten der Berichtsmodus. Freigeben lässt sich die Adresse mit einer Datei csp_whitelist.xml im Ordner etc eines eigenen Moduls:

<policy id="script-src">
    <values>
        <value id="ai-label" type="host">https://www.ai-label.app</value>
    </values>
</policy>

Für Sprachen außer Deutsch und Englisch lädt das Widget eine kleine Textdatei von derselben Adresse nach. Geben Sie die Adresse in diesem Fall auch für connect-src frei.

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 Magento ist der Alt-Text des Produktbilds. Öffnen Sie unter Catalog > Products das Produkt, im Bereich „Images And Videos“ das Bild, und ergänzen Sie das Feld „Alt Text“ um „(KI-generiert)“ oder „(Mit KI verändert)“. Alternativ benennen Sie die Datei vor dem Hochladen mit --ai um und prüfen im Seitenquelltext, ob die Kennung in der Bildadresse ankommt. Das Attribut data-ai-label setzen Sie in eigenen Theme-Vorlagen.

Stolpersteine

• Cache: Ohne Aktualisierung unter Cache Management und im Full Page Cache sieht der Besucher weiter die Seite ohne Skript.
• CSP im Berichtsmodus: Auf normalen Seiten meldet die Policy einen Verstoß nur, sie blockiert nicht. Fehlt die Freigabe, fällt es deshalb oft erst im Checkout auf.
• Galerie im Vollbild: Prüfen Sie, ob das Label in der vergrößerten Ansicht der Produktgalerie erscheint.
• Mehrere Store Views: Alt-Texte lassen sich je Store View pflegen. Ergänzen Sie den Zusatz in jeder Sprache, in der das Bild erscheint.

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.
• Im Checkout läuft das Widget nur mit Freigabe in der Content Security Policy. Prüfen Sie die Kasse nach jeder Änderung.
• 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 Magento 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.