Bildgenerierung für unsere Website mit GPT-4o
Stefan Müller
·
09.04.2025, 12:00
Am 25.03.2025 hat OpenAI sein GPT-4o Modell um Bildgenerierung erweitert. Wie viele andere haben wir die ersten Tage genutzt, um die Grenzen und Möglichkeiten dieses neuen Features zu testen. Nachdem wir die üblichen Ghibli-Bilder und viele andere eher lustige Dinge getestet hatten, wollten wir uns mit den ernsthaften Themen und Anwendungsmöglichkeiten beschäftigen. Wir hatten einige Bilder auf unserer Website, die wir schon seit einiger Zeit austauschen wollten. Bilder sind essenziell für jede moderne Website, doch oft mangelt es an Zeit, Ressourcen oder kreativen Ideen. So haben wir die Bilder bei der Erstellung unserer Website im Jahr 2024 bereits mit KI generiert und hatten dabei einige Einschränkungen:
- fehlende Transparenz (weißer Hintergrund)
- man konnte vorhandene Bilder nicht als Grundlage verwenden
- die KI ist oft nicht unseren Anweisungen gefolgt
- zuverlässig korrekte Texte zu generieren war unmöglich
- viele Fehler in den Bildern: Menschen mit vier Fingern, Tische mit nur zwei Beinen, Monitore in der Luft
- am Ende haben wir uns mit den kleineren Fehlern abgefunden
Die neueste Generation der KI von OpenAI verspricht, professionelle und kreative Bilder mit konsistenten Charakteren allein durch präzise Beschreibungen zu generieren. Daher wollten wir nun versuchen, die Bilder auf unserer Website zu modernisieren.
Schritt 1: Erste Schritte und Finden des Stils
Zunächst versuchten wir, mit GPT-4o Ideen für Bilder für die einzelnen Abschnitte auf unserer Homepage zu finden.
Mach 5 Bildbeschreibungen für ein Bild, das auf einer Website neben dem folgenden Abschnitt abgebildet sein könnte. Die Website ist von einer Software-Entwicklungsfirma "Lucent Code" aus Berlin.
{Überschrift und Textabsatz von der Website}Hier wurden uns von der KI dann fünf passende Bildbeschreibungen generiert, von denen wir dann zunächst zwei weiter verfolgten. Wir testeten auch verschiedene Stile von fotorealistischem bis zum Comic-Stil.
Auch wenn die fotorealistischen Bilder schon sehr gut aussahen, fand man hier doch noch am ehesten Fehler und es begleitete einen das Gefühl, dass die Bilder unecht sind. Außerdem wäre es schwierig, die Fehler im Nachgang mit einer Bildbearbeitungssoftware zu korrigieren. Daher haben wir uns für den Comic Stil entschieden. Wir wollten dann zunächst Bilder für unsere Leistungsbeschreibungen generieren, die bisher noch keine Bilder enthielten.
Nach einigen Tests haben wir folgendes Bild mit der KI generiert:
Schritt 2: Anpassung von Bildern
Diese Gestalltung hat uns gut gefallen. Darum haben wir uns von der KI eine Stilbeschreibung als Text geben lassen, um damit weitere Bilder im gleichen Stil zu generieren. Den Text, der dabei heraus kam, haben wir in allen folgenden Prompts als Basis verwendet.
Erstelle eine moderne, flache Vektorillustration (Flat Design) im Stil eines Infografik-Layouts. Der Fokus liegt auf einer stilisierten, tech-orientierten Darstellung. Verwende weiche, runde Formen und klare Linien.
Design-Stil: Flat Design, minimalistische Vektoroptik ohne Schattierungen oder 3D-Effekte.
Farbschema: Helles, freundliches Farbschema mit dominanten Blau-, Gelb- und Weißtönen.
Textlayout: Klar strukturierter Text in moderner serifenloser Schrift rechts vom Bild, mit Aufzählungspunkten.
Zielgruppe: Technisch interessierte Kunden oder Stakeholder in der Softwareentwicklung.Das Farbschema haben wir im Laufe des Prozesses noch einmal angepasst. Gelb haben wir durch helle Pastellfarben ersetzt.
Schritt 3: Übertragung des Stils auf bereits bestehende Bilder oder Ideen
Um die weiteren Bilder auf unserer Website anzupassen, haben wir dann einen Prompt benutzt, der das alte Bild als Basis nutzt und sowohl unseren Stil beschreibt als auch unser neues Bild als Referenz für den Stil übergibt.
Erstelle eine moderne, flache Vektorillustration (Flat Design) vom ersten Bild. Der Hintergrund soll transparent sein.
Der Fokus liegt auf einer stilisierten, tech-orientierten Darstellung. Verwende weiche, runde Formen und klare nicht zu dicke Linien.
Design-Stil: Flat Design, minimalistische Vektoroptik ohne Schattierungen oder 3D-Effekte.
Farbschema: Helles, freundliches Farbschema mit dominanten Blau-, Pastell- und Weißtönen.
Zielgruppe: Technisch interessierte Kunden oder Stakeholder in der Softwareentwicklung.
Personen in dem Bild sollen sich vom Stil her an dem zweiten Bild orientieren.
Achte darauf, dass Details trotz des transparenten Hintergrundes erhalten bleiben.Ein Problem, welches wir bis zum Ende nicht vollständig in den Griff bekommen haben, ist die Transparenz. Die Bilder sind dann zwar transparent, aber meistens sind auch Teile des Bildes transparent, die eigentlich ein Papier, Kleidung oder ein Whiteboard sein sollen.
Schritt 4: Neue Bilder
Für Seiten, die bisher keine Bilder hatten, haben wir zunächst einen Screenshot der Seite oder einen Absatz als Kontext übergeben und uns von GPT-4o zunächst 5 Ideen für die Bebilderung als Bildbeschreibung geben lassen. Das hatte den Vorteil, dass wir uns diese Beschreibungen im Kopf vorstellen und nach Belieben anpassen konnten, bevor wir das Ganze als Prompt durch die KI generieren ließen. Eine Bildgenerierung dauerte ca. ein bis zwei Minuten und unterlage einem Rate-Limiting. Darum war dieser Prozess effektiver, schneller und gab uns mehr Kontrolle.
Hast du Ideen was für ein Bild ich zwischen die folgenden 2 Abschnitte auf der Website einbauen kann? Liefere mir bitte 5 Ausführliche Beispiele, mit denen ich dann ein Bild generieren lassen kann.
Abschnitt 1:
{Überschrift und Text aus Abschnitt 1}
Abschnitt 2:
{Überschrift und Text aus Abschnitt 2}Nach Bearbeitung der Idee konnten wir sie dann unter Verwendung unserer Stilbeschreibung und einem Beispielbild erstellen lassen und sind so zu guten Ergebnissen gekommen.
Erstelle eine moderne, flache Vektorillustration (Flat Design) das den Inhalt des am Ende angegebenen Absatzes am besten wiederspiegelt. Der Hintergrund soll transparent sein.
Der Fokus liegt auf einer stilisierten, tech-orientierten Darstellung. Verwende weiche, runde Formen und klare nicht zu dicke Linien.
Design-Stil: Flat Design, minimalistische Vektoroptik ohne Schattierungen oder 3D-Effekte.
Farbschema: Helles, freundliches Farbschema mit dominanten Blau-, Pastell- und Weißtönen.
Zielgruppe: Technisch interessierte Kunden oder Stakeholder in der Softwareentwicklung. Es soll kein Text benutzt werden.
Ein halb-technisches, halb-illustratives Bild von ineinandergreifenden Zahnrädern, in denen Icons für Austausch, Sicherheit, Skalierung, Code und Monitoring eingebettet sind. Die Zahnräder sollen ineinander greifen. Farblich in Blau-, Grau- und Akzentfarben gehalten.
Fazit / Zusätzliche Tipps
Wir haben gemerkt, dass GPT-4o bei der ersten Antwort auf einen Prompt (zur Bildgenerierung) die besten Resultate erzielt. Es ist bisher nicht so verlässlich beim Erhalten der Details, wenn man die Bilder durch weitere Nachrichten in der Konversation verändern will. Bei diesen Konversationen sind oft Details in Gesichtern, an der Kleidung oder gleich ganze Icons verschwunden oder die Farben immer blasser geworden. In wenigen Fällen sind plötzlich ganz andere Personen oder ein anderes Setting aufgetaucht. Das kann natürlich alles mit dem Prompt zu tun haben, aber der Grundeindruck auch bei anderen Tests war, dass Details verloren gehen.
Kleinere Anpassungen, wie das neu Anordnen von Symbolen oder das Auffüllen von Flächen, die versehentlich transparent generiert wurden, sind aktuell noch einfacher mit einer Bildbearbeitungssoftware durchzuführen, als mit der KI.
Von diesen kleinen Punkten abgesehen sind wir aber begeistert, wie gut sich die KI-Modelle in den letzten zwei Jahren weiterentwickelt haben und dass wir mit einem Investment von unter 10 Stunden Arbeitszeit 6 Bilder auf unserer Website ersetzen und sogar weitere 6 Bilder neu erstellen konnten.
