KI-Bilder und Shader in Framer: Was KMU prüfen sollten
Sphinx-Flashdesign Logo
Geschrieben von
Sphinx-Flashdesign
Developers Signature Designers Signature
Datum
12.11.2026
Lesezeit
7 Min.
Wörter
1393
KI-Bilder und Shader in Framer gibt es jetzt auf Zuruf: Der Baukasten erzeugt Motive und bewegte Effekte selbst. Rechte, Ladezeit und Barrierefreiheit prüfen müssen Sie trotzdem.

Am 12. November 2026 hat der Website-Baukasten Framer das Update „Image and Shader Generation“ veröffentlicht[1]. Sein KI-Agent, also der in den Editor eingebaute Assistent, erzeugt laut Framer seitdem Bilder, Texturen und Illustrationen passend zur Website[1]. Außerdem erzeugt er Shader[1], also kleine Grafikprogramme, die Bilder oder Flächen im Browser in Echtzeit verfremden.

Stand 12. November nennt die Ankündigung weder das verwendete Bildmodell noch Preis, Tarif oder Nutzungsrechte[1].

KI-Bilder und Shader in Framer: KI-generierte Motive und bewegte Effekte im Website-Baukasten für KMU-Websites
KI-Bilder und Shader in Framer: Was das Update kann

Vorhandene Bilder bearbeitet der Agent laut Framer ebenfalls: Motiv tauschen, Hintergrund entfernen, Stil ändern[1]. Als Shader nennt Framer etwa Halbton-Raster (Halftone), Bokeh-Unschärfe, Röhrenmonitor-Optik (CRT) oder Bleistift-Look; auch selbst beschriebene Effekte sind möglich[1].

Beides lässt sich koppeln: Der Agent setzt ein erzeugtes Bild als Vorlage für einen Bild-Shader ein. Framers Beispiel ist eine Stiftzeichnung, deren Tinte bei Mausbewegung verwischt[1]. Interaktive Shader selbst sind nicht neu: Schon im Juni 2026 brachte Framer „Ripple“, einen Wasserwellen-Effekt auf Basis von WebGL, einer Browser-Technik für Grafikberechnung[2]. Neu ist, dass der Agent solche Effekte nach einer Beschreibung erzeugt[1].

Wem gehören die KI-Bilder?

Framers AI Notice, die Zusatzbedingungen für KI-Funktionen in Version 1.2 vom 18. September 2026, ordnet Eingaben und Ergebnisse grundsätzlich als „Content“ im Sinne der Nutzungsbedingungen ein[3]. An diesem Content behalten Kunden laut Nutzungsbedingungen das volle Eigentum, Framer erhält dort Nutzungsrechte, um den Dienst zu betreiben und zu optimieren[4].

Das ist weniger, als es klingt. Framer übernimmt keine Gewähr für KI-Ergebnisse; ob ein Bild Rechte Dritter verletzt, müssen Sie selbst prüfen[3]. Das Ergebnis muss nicht einzigartig sein, andere Nutzer können Ähnliches erhalten, und Sie dürfen es nicht als einzigartig oder rein menschlich gemacht ausgeben[3].

Dazu kommt das Urheberrecht, das nur persönliche geistige Schöpfungen schützt (§ 2 Abs. 2 UrhG)[5]. Das Amtsgericht München sprach am 13. Februar 2026 drei KI-erzeugten Logos den Schutz ab; die bloße Auswahl aus mehreren KI-Vorschlägen genüge nicht[5]. Schutz ist laut Urteil möglich, wenn kreative menschliche Entscheidungen das Ergebnis prägen[5]. Für ein Logo, das Sie gegen Nachahmer verteidigen wollen, ist ein reines KI-Bild deshalb eine schwache Grundlage.

Personenbezogene Daten dürfen Sie laut AI Notice weder eingeben noch erzeugen lassen[3]; wer Teamfotos per KI freistellen will, sollte das vorher klären. Außerhalb des Enterprise-Tarifs darf Framer Eingaben und Ergebnisse zum Training eigener KI-Modelle nutzen, solange Sie das in den Workspace-Einstellungen nicht abschalten; die Anbieter eingebundener Fremdmodelle dürfen das laut Framer nicht[3].

KI-Bild oder echtes Foto: Was Studien zeigen

Die Nielsen Norman Group ließ 77 US-Erwachsene sechs Varianten einer fiktiven Beratungs-Startseite bewerten, die sich nur im Titelbild unterschieden (drei KI-Bilder, drei Stockfotos), ohne Hinweis auf die KI-Herkunft[6]. Sie fand keinen Beleg, dass die getesteten KI-Bilder das Vertrauen senkten[6]. Bilder, die Teilnehmende für KI hielten, schnitten allerdings tendenziell schlechter ab, auch echte Fotos[6].

Liegt die Herkunft offen, kann sich das drehen: In einer kleinen Studie mit 43 Teilnehmenden und sechs Websites, vorgestellt auf der Fachkonferenz CHI, verschob sich das Vertrauen nach der Offenlegung zugunsten der Versionen mit Fotos[7]. Einen direkten Vergleich für deutsche KMU-Websites haben wir nicht gefunden.

Unsere Haltung: KI-Bilder taugen für Stimmung, nicht als Beweis. Wo Kunden prüfen wollen, wer und was sie erwartet, gehört ein echtes Foto hin.

EinsatzKI-Bild geeignet?Echtes Foto nötig?
Hintergründe, Texturen, Illustrationen✓ Ja, auch als Vorlage für einen Shader[1]✗ Nein
Team und Ansprechpartner✗ Nein, erfundene Gesichter zeigen nicht, wer anruft✓ Ja
Produkte✗ Nein, das Bild verspricht, was der Kunde bekommt✓ Ja
Laden, Praxis, Werkstatt✗ Nein, wer vorbeikommt, vergleicht✓ Ja
Shader auf dem Smartphone: messen statt raten

Ladezeiten oder Messwerte nennt Framer weder im neuen Update noch beim Ripple-Shader[1][2]. Ein technischer Stellhebel für das Tempo ist die Auflösung: MDN, die Entwicklerdokumentation von Mozilla, nennt das Rendern in kleinerer Auflösung mit anschließendem Hochskalieren als gängigen Tausch von Bildqualität gegen Tempo[8].

Als Maßstab dienen Googles Core Web Vitals: Der größte sichtbare Inhalt sollte nach höchstens 2,5 Sekunden stehen (LCP), die Reaktion auf eine Eingabe höchstens 200 Millisekunden dauern (INP) und das Layout kaum springen (CLS bis 0,1)[9]. Google bewertet am 75. Perzentil, drei von vier Seitenaufrufen sollen die Werte also schaffen, getrennt nach Mobilgerät und Desktop[9].

Googles Felddaten aus dem Chrome-Nutzerbericht CrUX, also Messwerte echter Besuche, stammen nur aus Chrome auf Desktop und Android; Chrome auf dem iPhone ist ausdrücklich ausgenommen[10]. Framer rät, Googles Messwerkzeug PageSpeed Insights mindestens dreimal laufen zu lassen und Median oder Mittelwert zu nehmen; das Werkzeug simuliere ein langsames Android-Gerät, Schwankungen bis 15 Punkte kämen vor[11]. Testen Sie deshalb zusätzlich auf echten Geräten, auch auf einem iPhone.

Bewegte Effekte: Was Barrierefreiheit verlangt

Bewegung auf dem Bildschirm kann Menschen mit Störungen des Gleichgewichtsorgans Schwindel, Übelkeit oder Kopfschmerzen bereiten[12]. Deshalb gibt es in Betriebssystemen die Einstellung „Bewegung reduzieren“, auf dem iPhone unter Einstellungen > Bedienungshilfen > Bewegung[13]. Websites können sie über die CSS-Abfrage prefers-reduced-motion erkennen[13]; reagieren muss die Seite aber selbst.

Die WCAG 2.2, die Barrierefreiheits-Richtlinien des W3C, werden bei bewegten Effekten an zwei Stellen konkret[14]:

  • 2.2.2 (Stufe A): Bewegung, die automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht, braucht eine Möglichkeit zum Pausieren, Stoppen oder Ausblenden, außer sie ist wesentlich[14]. Ein dauerhaft laufender Shader-Hintergrund kann darunter fallen.
  • 2.3.3 (Stufe AAA, die höchste): Durch Interaktion ausgelöste Bewegungsanimationen sollen sich abschalten lassen, sofern sie nicht wesentlich sind[14]. Das W3C nennt prefers-reduced-motion als passende Technik[12].

Effekte, die der Maus folgen, funktionieren auf Touchscreens anders: Laut MDN verhält sich Hover, also das Überfahren mit dem Mauszeiger, dort je nach Browser unterschiedlich; Inhalte müssen auch ohne Hover zugänglich sein[15]. Ob Ihre Website unter das Barrierefreiheitsstärkungsgesetz fällt, erklärt unser Beitrag zu barrierefreiem Webdesign.

Framers Schalter: Shader nicht dokumentiert
Framer bietet in den Site Settings unter „General“ eine Reduced-Motion-Einstellung. Die Hilfe nennt Parallax-, Transform- und Layout-Animationen, Shader erwähnt sie nicht[16]. Testen Sie deshalb selbst mit eingeschalteter Systemeinstellung.
Bevor ein KI-Bild oder Shader live geht
Einstellungen und Rechte prüfen
Training in den Workspace-Einstellungen abschalten, wenn Sie es nicht wollen (wirkt für künftige Daten), keine personenbezogenen Daten an den Agenten geben und jedes Motiv vor der Veröffentlichung auf Rechte Dritter prüfen[3].
Eigenen Anteil dokumentieren
Prompts und eigene Bearbeitungsschritte ablegen: Im Münchner Fall musste der Kläger den menschlichen Anteil darlegen[5].
Mit und ohne Effekt messen
Beide Varianten in je mindestens drei PageSpeed-Läufen vergleichen, nach dem Livegang die Core Web Vitals in der Search Console verfolgen[11].
Bewegung reduzieren testen
Mit aktivierter Systemeinstellung prüfen, ob der Effekt ruhig bleibt; für dauerhaft laufende Bewegung eine Pause-Möglichkeit vorsehen[14].
Häufige Fragen zu KI-Bildern in Framer
Darf ich KI-Bilder aus Framer kommerziell auf der Firmenwebsite nutzen, und wem gehören sie?

Ausdrücklich regelt Framer die kommerzielle Nutzung nicht, beansprucht aber auch kein Eigentum: KI-Ergebnisse gelten als Content[3], an dem Kunden das volle Eigentum behalten[4]. Eine Garantie gegen Rechte Dritter gibt Framer nicht, und das Ergebnis muss nicht einzigartig sein[3]. Urheberrechtlich geschützt ist ein KI-Bild laut AG München nur bei prägendem menschlichem Einfluss[5].

Muss ich KI-Bilder auf der Website kennzeichnen?

Nicht pauschal, offenlegen müssen Betreiber aber Deepfakes, also täuschend echt wirkende KI-Inhalte[17] – welche Bilder darunter fallen, erklärt unser Beitrag zur KI-Kennzeichnungspflicht.

Bremsen Shader-Effekte die Seite auf dem Smartphone aus?

Pauschal lässt sich das nicht sagen, Framer nennt keine Messwerte[1]. Messen Sie die Seite mit und ohne Effekt, je mindestens dreimal mit PageSpeed Insights[11], und testen Sie auf echten Geräten.

Sind bewegte Effekte barrierefrei?

Nicht automatisch. Bewegung, die automatisch startet und länger als fünf Sekunden neben anderem Inhalt läuft, braucht nach WCAG 2.2.2 eine Pause-Möglichkeit, sofern sie nicht wesentlich ist[14]. Framers Hilfe zur Reduced-Motion-Einstellung erwähnt Shader nicht[16]; prüfen Sie selbst mit „Bewegung reduzieren“.

Wirken KI-Bilder weniger vertrauenswürdig als echte Fotos?

Ohne Herkunftshinweis fand die Nielsen Norman Group keinen Vertrauensnachteil[6]; nach Offenlegung verschob sich das Vertrauen in einer kleinen CHI-Studie zugunsten von Fotos[7]. Für Team, Produkte und Räume bleiben echte Fotos die sichere Wahl.

Was kostet die Funktion, und in welchem Tarif ist sie enthalten?

Framer nennt dafür weder Preis noch Tarif[1]. Der Agent verbraucht KI-Credits, je nach Aufwand der Anfrage unterschiedlich viele[18]. Laut Preisseite (Herstellerangabe in US-Dollar) gibt es ohne Abo 500 Credits zum Testen; Basic enthält 1.000, Pro 3.000 Credits im Monat, bei jährlicher Abrechnung für rechnerisch 10 beziehungsweise 30 US-Dollar monatlich zuzüglich anfallender Steuern[19].

Quellen
  1. Framer: Image and Shader Generation (12.11.2026): framer.com
  2. Framer: Interactive Shaders (25.06.2026): framer.com
  3. Framer B.V.: AI Notice, Version 1.2 (18.09.2026): framer.com
  4. Framer B.V.: Terms of Service, Version 1.8, Abschnitte 7.3 und 8.1 (16.06.2026): framer.com
  5. Amtsgericht München: Urteil 142 C 9786/25 zu KI-generierten Logos (13.02.2026): gesetze-bayern.de
  6. Nielsen Norman Group: AI-Generated Images Can Perform as Well as Stock Photography (21.08.2026): nngroup.com
  7. ACM CHI Extended Abstracts: How AI-generated images affect human preference and trust in websites (13.04.2026): doi.org
  8. MDN Web Docs: WebGL best practices (Stand 31.10.2026): developer.mozilla.org
  9. Google web.dev: Web Vitals (Stand 31.10.2024): web.dev
  10. Chrome for Developers: CrUX methodology (abgerufen 12.11.2026): developer.chrome.com
  11. Framer Help: How to optimize PageSpeed Insights (Stand 23.09.2026): framer.com
  12. W3C WAI: Understanding Success Criterion 2.3.3: Animation from Interactions (abgerufen 12.11.2026): w3.org
  13. MDN Web Docs: prefers-reduced-motion (Stand 10.06.2026): developer.mozilla.org
  14. W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (12.12.2024): w3.org
  15. MDN Web Docs: :hover (Stand 17.04.2026): developer.mozilla.org
  16. Framer Help: Reduced motion settings (Stand 15.09.2026): framer.com
  17. EU-Kommission, AI Act Service Desk: Artikel 50 KI-Verordnung (abgerufen 12.11.2026): ai-act-service-desk.ec.europa.eu
  18. Framer Help: How AI credits and agents pricing work (Stand 30.09.2026): framer.com
  19. Framer: Pricing, US-Dollar-Ansicht (abgerufen 12.11.2026): framer.com
Soll Ihre Website mehr Bewegung bekommen, ohne langsamer zu werden?
Wir klären mit Ihnen, wo KI-Bilder passen und wo echte Fotos hingehören, bauen Effekte mit Pause- und Reduced-Motion-Variante und messen sie auf echten Smartphones. Mehr dazu auf unserer Seite zum Webdesign.
Jetzt Kontakt mit uns aufnehmen
Tags: