Thumbnail Prompt Builder entwickelt: Ein kleines Experiment zur natürlichen Ausspielung von KI-generierten Thumbnails auf verschiedene Kanäle

Beim Erstellen von Beitragsbildern für Blogartikel lassen sich mit KI-Bildgeneratoren wie ChatGPT inzwischen sehr gute Visuals erzeugen.

In der praktischen Anwendung gibt es allerdings ein Problem.

Die erforderlichen Bildgrößen unterscheiden sich je nach Kanal stark.

Für das aktuelle Tool war deshalb folgende Ausgabe als Ziel vorgesehen:

Zunächst lag die Idee nahe, ein quadratisches Bild zu erstellen und es automatisch auf alle benötigten Größen zu übertragen.

Genau daraus entstand der Thumbnail Prompt Builder.

Was ich ursprünglich bauen wollte

Das ursprüngliche Ziel war einfach.

Ein Tool, das aus einem Artikeltitel oder einer Zusammenfassung einen Prompt erstellt, den man in eine KI zur Bildgenerierung einfügen kann.

Zusätzlich sollte sich ein hochgeladenes, quadratisches Bild

• Instagram
• Thumbnail
• X
• Cover

automatisch in die jeweiligen Größen für verschiedene Medien umwandeln lassen.

Das ideale Ergebnis sah also so aus.

Artikelinfos eingeben
↓
Bildgenerierungs-Prompt erstellen
↓
Quadratisches Bild generieren
↓
Automatische Ausgabe in Medienformaten

Der erste Entwurf war ziemlich unkompliziert.

"Wenn das Hauptmotiv in der Mitte steht und genug Freiraum drumherum bleibt, lässt sich das Bild für jedes Medium verwenden."

Das war zumindest meine Annahme.

Probleme, die sich in der Praxis gezeigt haben

Beim tatsächlichen Anzeigen der Bilder traten jedoch Probleme auf.

Besonders betroffen waren die Cover-Bilder.

Wurde ein quadratisches Bild in ein Querformat umgewandelt,

• wurden oben und unten stark abgeschnitten,
• wodurch das Hauptmotiv unnatürlich klein wirkte,
• und die Begrenzungslinien des Hintergrunds fielen deutlich auf.
• Die Bildkomposition, die im quadratischen Format funktionierte, geriet beim Cover aus dem Gleichgewicht.

Genau dieser Fall trat ein.

Anfangs haben wir uns mit Codex beraten und mehrere Ansätze ausprobiert.

Zum Beispiel:

• Die SAFE ZONE auf 60 % der Mitte festlegen
• Das Hauptmotiv in der Mitte bündeln
• Hintergrundobjekte untersagen
• Die Ränder allein durch die Hintergrundfarbe erweitern
• Am Rand des Originalbilds eine Verblendung einfügen
• Bei X / Cover das Bild leicht verkleinern, damit nichts abgeschnitten wird

usw.

Alle diese Ansätze hatten eine gewisse Wirkung.

Doch ein entscheidendes Problem blieb bestehen.

Aus einem quadratischen Bild lässt sich ein Cover nur begrenzt natürlich erstellen.

Das Cover hat ein sehr breites Format von 1280×560.

Wenn man PCs, Personen, UI-Karten, Icons und Ähnliches in ein quadratisches Bild setzt, wirkt das im Quadrat zwar gut, im Cover werden jedoch oben und unten deutlich abgeschnitten.

Versucht man umgekehrt, alles unterzubringen, wird das Hauptmotiv zu klein.

Deshalb haben wir uns entschieden, das Design an dieser Stelle zu ändern.

Fazit: Die Prompts werden in zwei Stränge aufgeteilt

Letztendlich haben wir uns für ein Design entschieden, bei dem die Prompts in zwei Teile aufgeteilt werden.

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

Das heißt, statt alles mit einem einzigen quadratischen Bild abzudecken,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

so lautet der Ansatz.

Das war eine recht grundlegende Kurskorrektur.

Ursprünglich war das Ziel ein Tool, das aus einem einzigen Bild alles erzeugt. Im praktischen Einsatz zeigte sich jedoch, dass es sinnvoller ist, die Bildkompositionen von Anfang an nach Medium zu trennen.

Im schlimmsten Fall könnte ein Designer das Layout anpassen. Uns war jedoch wichtig, dass auch Personen ohne Erfahrung mit Figma oder ähnlichen Tools damit arbeiten können. Deshalb sollte alles rein über KI und möglichst einfach umsetzbar sein.

Was das aktuelle Tool leisten kann

Mit dem aktuellen Thumbnail Prompt Builder werden nach Eingabe der Artikelinformationen zwei Arten von Prompts erzeugt.

1. Für Instagram / Thumbnail

Dies ist der Prompt für quadratische Vorschaubilder.

• Quadratisches Bild im Format 1:1
• Hauptmotiv in der Mitte
• Freiraum, der sich auch für vertikale Instagram-Formate gut eignet
• Komposition, die als Blog-Thumbnail gut erkennbar ist

berücksichtigt.

2. X / Cover

Prompt für querformatige Titelbilder.

• Querformat von Beginn an
• damit auch bei Cover-Formaten oben und unten nichts abgeschnitten wird
• seitlichen Freiraum einplanen
• damit das Motiv sowohl auf X als auch bei Cover-Formaten stabil bleibt

enthalten.

Dadurch wirkt das Cover-Bild seltener so, als wäre ein quadratisches Bild gewaltsam in ein Querformat gezogen worden.

Auch die Bildausgabe wurde auf zwei Varianten umgestellt

Auch der Bild-Upload wurde in zwei Varianten aufgeteilt.

• Upload quadratischer Bilder
• Upload von Querformat-Bildern

Aus quadratischen Bildern werden

• instagram.png
• thumbnail.png

erzeugt.

Aus Querformat-Bildern werden

• x.png
• cover.png
• [email protected]

erzeugt.

Nur das Cover wird zusätzlich in doppelter Größe für Retina-Displays ausgegeben.

Zunächst wollten wir alle Bilder in doppelter Größe ausgeben. Da Instagram und X Bilder beim Posten jedoch stark komprimieren und das Thumbnail ohnehin bereits groß genug ist, beschränken wir die doppelte Ausgabe schließlich auf nur das Cover.

Eingabeinhalte bleiben erhalten

Während der Entwicklung war eine Sache überraschend hinderlich: Beim Neuladen der Seite gingen die Eingaben in den Formularen verloren.

Wenn Codex an der Aufgabe arbeitete und die Seite neu geladen wurde, gingen teilweise bereits eingegebene Inhalte verloren.

Da mich das ziemlich gestört hat, haben wir auch die Speicherfunktion verbessert.

Aktuell werden die Eingaben in

• localStorage
• Cookie

gespeichert.

Die Cookies dienen dabei als Sicherungskopie für 7 Tage.

Dadurch lassen sich Eingaben nun deutlich zuverlässiger wiederherstellen, auch bei Seitenaktualisierungen oder Neuladen während der Entwicklung.

Erkenntnisse aus der Umsetzung

Die wichtigste Erkenntnis aus dieser Entwicklung war:

KI-Bildgenerierung funktioniert zuverlässiger, wenn man Bilder von Anfang an nach Verwendungszweck erstellt, statt sie nachträglich umzuwandeln

ist das Fazit.

Gerade bei Beitragsbildern unterscheiden sich die Seitenverhältnisse je nach Medium stark.

Eine Bildkomposition, die im Quadrat funktioniert, ist nicht automatisch auch für Cover-Formate geeignet.

Versucht man, alles zwangsweise zu vereinheitlichen,

• wird das Hauptmotiv kleiner,
• entsteht zu viel Leerraum,
• werden Ober- und Unterkante abgeschnitten,
• wirkt der Hintergrund unnatürlich,

und es treten Probleme auf.

Letztendlich haben wir uns für

keine übermäßige Vereinheitlichung, sondern die Trennung der Generierungsvoraussetzungen nach Verwendungszweck

entschieden.

Vorgehen im Austausch mit Codex

Das Tool war zu Beginn noch nicht in seiner endgültigen Form festgelegt.

Im Austausch mit Codex

• Ausspielen quadratischer Bilder auf die jeweiligen Medien
• Fehler bei der Hintergrunderweiterung beheben
• SAFE ZONE überarbeiten
• Verkleinerung des Hauptmotivs bei Cover-Darstellung beheben
• Größendefinitionen überarbeiten
• Retina-Ausgabe hinzufügen
• Retina wird jedoch nur auf Cover-Format angewendet
• Prompts in zwei Varianten aufteilen
• Eingabeinhalte speichern

So habe ich das Design Schritt für Schritt angepasst.

Die ursprüngliche Idee war, ein quadratisches Bild als universelle Vorlage zu verwenden.

Während ich die Testbilder überprüfte und verbesserte, entstand schließlich eine praxisnähere Lösung: Quadratische und querformatige Vorlagen werden getrennt behandelt.

Dieser Wandel war sehr spannend.

Fazit

Thumbnail Prompt Builder ist nicht einfach nur ein Tool zur Umwandlung von Bildgrößen.

Genauer gesagt,

ist es ein Hilfswerkzeug, mit dem mit KI erstellte Titelbilder so aufbereitet werden können, dass sie im tatsächlichen Betrieb bestehen.

.

In der aktuellen Form

• können aus Artikelinformationen zwei Arten von Bildgenerierungs-Prompts erstellt werden
• aus einem quadratischen Bild werden Instagram- und Thumbnail-Versionen erzeugt
• aus einem Querformatbild werden X- und Cover-Versionen erzeugt
• Nur für das Cover wird zusätzlich eine Version für Retina-Displays ausgegeben
• Eingegebene Inhalte werden für einen bestimmten Zeitraum gespeichert

bis zu diesem Punkt ist die Funktion inzwischen nutzbar.

Es ist etwas komplexer geworden, als ich es ursprünglich geplant hatte, aber dafür ist es im praktischen Einsatz eine Form, die sich sehr angenehm nutzen lässt.

Wenn ich es in Zukunft weiter verbessern möchte, dann

• Umschalten von Prompt-Vorlagen
• Verwaltung von Farbschemata nach Marke
• Speichern von Generierungsbeispielen
• Ausgabewege für Notion und WordPress
• Direkte Anbindung an KI-Bildgenerierung

würde ich auch gerne ausprobieren.

KI-Bildgenerierung ist praktisch, doch für den tatsächlichen Einsatz in Artikeln und sozialen Medien ist weiterhin menschliche Gestaltung erforderlich.

Um diesen Aufwand bei der Gestaltung etwas zu verringern, möchte ich Thumbnail Prompt Builder als Werkzeug weiterentwickeln.