Für Webdesigner, Illustratoren und digitale Medienschaffende sind schlanke KI-Werkzeuge unverzichtbar, um visuelle Konzepte ohne großen Kostenaufwand rasch zu testen. Craiyon – ursprünglich von Boris Dayma unter dem Namen DALL-E mini entwickelt – hat sich von einer experimentellen Spaßanwendung zu einem praktischen digitalen Skizzenblock für Prototypen und Blog-Illustrationen entwickelt. Obwohl die ursprünglichen Bildausgaben im Raster eine überschaubare Auflösung aufweisen, können Kreative durch gezielte Prompt-Variationen und den plattforminternen KI-Upscaler hochwertige, weboptimierte Grafiken erstellen.
Der Schlüssel zu hoher Bildschärfe und Wiedergabetreue in Craiyon liegt im Zusammenspiel zweier Phasen: Zuerst wird die Bildkomposition im 3x3-Raster ohne Credit-Verbrauch verfeinert, anschließend rekonstruiert der integrierte 2K-Upscaler Kanten und Texturen bis zu 2048 Pixeln an der langen Seite, bevor die Grafik in moderne Webformate wie WebP konvertiert wird.
1. Gezielte Prompt-Variationen im 3x3-Raster erkunden
Craiyon erzeugt bei jeder Abfrage neun Bildvarianten gleichzeitig. Erfahrene Illustratoren betrachten diesen Durchlauf nicht als isolierten Zufallstreffer, sondern als flexibles Vergleichsboard zur Abstimmung von Bildaufbau, Zeichentechnik und Lichtstimmung.
Stil-Voreinstellungen als visuelles Fundament
Direkt neben oder über dem Eingabefeld stehen vier Hauptstile zur Auswahl: Art, Drawing, Photo und None:
- Art-Modus: Hebt dichte Pinselstriche, malerische Texturen und satte Farben hervor. Ideal für Concept Art, Fantasymotive und atmosphärische Header-Grafiken.
- Drawing-Modus: Fokussiert auf präzise Konturlinien, grafische Schattierungen und aufgeräumte Hintergründe. Bestens geeignet für Vektorillustrationen, UI-Spot-Art und schematische Skizzen.
- Photo-Modus: Simuliert fotografische Linsencharakteristiken, Tiefenschärfe und natürliche Lichtstreuung.
- None-Modus: Deaktiviert die interne Stilsteuerung und überlässt die visuelle Gestaltung vollkommen den im Prompt genannten Begriffen.
Hierarchischer Aufbau wirksamer Prompts
Vage Formulierungen führen bei Diffusionsmodellen schnell zu visueller Unruhe. Ein professioneller Prompt folgt einer klaren Struktur:
[Hauptmotiv & Handlung] + [Künstlerisches Medium & Linienführung] + [Licht & Farbpalette] + [Perspektive & Bildausschnitt]
Beispiel für die schrittweise Verfeinerung einer Web-Illustration:
- Unpräziser Prompt: „cute robot reading a book“ (süßer Roboter liest ein Buch)
- Präzise Vektor-Variante: „a friendly minimalist robot reading an open book, flat clean vector illustration, isometric perspective, soft pastel color palette, crisp outlines, isolated on white background“ (freundlicher minimalistischer Roboter liest ein Buch, flache Vektorillustration, isometrische Ansicht, sanfte Pastellfarben, scharfe Konturen, freigestellt auf weißem Hintergrund)
- Texturierte Gouache-Variante: „a small retro robot reading an antique leather book in a sunlit conservatory, digital gouache painting, visible brushstrokes, rim lighting, atmospheric depth, warm earthy tones“ (kleiner Retro-Roboter liest antikes Lederbuch im sonnigen Wintergarten, digitale Gouache-Malerei, sichtbare Pinselstriche, Kantenlicht, warme Erdtöne)
Bildfehler mit negativen Wörtern (Negative words) herausfiltern
Craiyon bietet ein separates Eingabefeld für Negative words. Da kompakte Modelle gelegentlich zu unsauberen Gliedmaßen oder Bildrauschen neigen, verhindert der gezielte Ausschluss typische Fehler:
- Für Illustrationen und Line-Art:
blurry, grainy, low-res, messy sketch, watermark, distorted hands, extra limbs, muddy colors(unscharf, körnig, niedrige Auflösung, unsaubere Skizze, Wasserzeichen, verformte Hände, überzählige Gliedmaßen, matschige Farben) - Für Banner und Website-Grafiken:
cluttered background, text, logo, oversaturated, chromatic aberration, photographic noise(überladener Hintergrund, Text, Logo, übersättigt, Farbfehler, Kamerarauschen)
Indem Störfaktoren bereits bei der Erzeugung eliminiert werden, erhält der Upscaler ein sauberes Ausgangsbild mit klaren Kontrastkanten.
2. Detailrekonstruktion mit dem integrierten KI-Upscaler
Die im 3x3-Raster gezeigten Vorschaubilder verfügen über eine zu geringe Pixeldichte für moderne Displays. Eine direkte Einbindung führt zu sichtbaren Pixelkanten und verwaschenen Linien. Hier greift die native Funktion Upscale.
Arbeitsweise des Craiyon-Upscalers
Wählt man ein Bild im Raster aus und klickt auf „Upscale“, führt der Algorithmus eine gezielte Bildverbesserung durch:
- Rekonstruktion feiner Konturen: Kanten von Haaren, geometrischen Formen und Objekten werden auf Subpixel-Ebene analysiert und nachgeschärft.
- Glättung von Erzeugungsartefakten: Rauschmuster und Kompressionsartefakte aus dem Diffusionsprozess werden nivelliert, ohne Texturen zu zerstören.
- Erweiterung auf 2K-Auflösung: Die lange Bildkante wird auf 2048 Pixel skaliert, was einer Vervierfachung der Gesamtpixelanzahl entspricht.
Entscheidend ist, dass Craiyon auf eine treue Rekonstruktion ausgelegt ist: Der Upscaler erfindet keine neuen Elemente im Hintergrund und verzerrt keine Gesichter, sondern stellt die vorhandenen Formen gestochen scharf dar.
Tarifstufen, Wasserzeichen und Bearbeitungsguthaben
Für die professionelle Veröffentlichung im Web gelten je nach Konto unterschiedliche Bedingungen:
- Free-Tarif: Werbefinanziert, längere Wartezeiten in der Generierungswarteschlange (meist 1 bis 2 Minuten), obligatorisches Wasserzeichen in der Bildecke sowie Pflicht zur Namensnennung von Craiyon bei kommerzieller Nutzung.
- Supporter-Abonnement: Keine Werbung, keine Wasserzeichen, volle kommerzielle Nutzungsrechte, priorisierte Berechnungen und 100 monatliche Bearbeitungsguthaben (Edit credits) für Upscaling und Hintergrundentfernung.
- Professional- und Ultra-Abonnements: Enthalten 300 bis 1.200 monatliche Bearbeitungsguthaben, private Erzeugungsmodi und die schnellste Prioritätswarteschlange.
Für den Einsatz auf Unternehmenswebsites und redaktionellen Portalen ist ein kostenpflichtiger Plan ratsam, um saubere 2K-PNGs ohne Wasserzeichen und mit verlässlicher Rechtsgrundlage zu erhalten.
3. Weboptimierung und responsive Einbindung
Ein unkomprimiert aus dem Upscaler exportiertes 2K-PNG kann eine Dateigröße von 3 MB bis 8 MB aufweisen. Werden solche Dateien direkt eingebunden, verlangsamt dies den Seitenaufbau spürbar und verschlechtert Leistungskennzahlen wie den Largest Contentful Paint (LCP) der Google Core Web Vitals.
Formatkonvertierung: Von PNG zu WebP
Um hohe Wiedergabetreue mit minimalen Ladezeiten zu verbinden:
- Verlustbehaftetes WebP (Qualität 80 %–85 %): Erhält die feinen Linien der Illustration und senkt das Dateigewicht im Vergleich zum PNG um 70 % bis 85 %, meist auf 150 KB bis 350 KB.
- Verlustfreies WebP: Hervorragend für Vektorgrafiken mit transparentem Hintergrund oder Icons, bei denen absolute Kantenreinheit gefordert ist.
Responsive HTML-Einbindung
Über das <picture>-Element und das srcset-Attribut wird sichergestellt, dass hochauflösende 2K-Bilder nur auf entsprechend dimensionierten Retina-Bildschirmen geladen werden:
<picture>
<source type="image/webp"
srcset="illustration-600.webp 600w,
illustration-1200.webp 1200w,
illustration-2048.webp 2048w"
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
800px">
<img src="illustration-1200.jpg"
alt="Minimalistische digitale Illustration eines lesenden Roboters"
loading="lazy"
width="1200"
height="1200">
</picture>
Durch abgestufte Haltepunkte lädt jedes Endgerät exakt die Bildgröße, die für eine scharfe Darstellung erforderlich ist, was Bandbreite spart und die Benutzererfahrung verbessert.
4. Leitfaden für den praktischen Workflow
| Phase | Kernaufgabe | Empfehlung / Richtwert |
|---|---|---|
| 1. Prompt-Aufbau | Strukturierte Beschreibung | Subjekt + Stilmittel + Lichtstimmung + Perspektive |
| 2. Filterung | Negative words ausfüllen | Begriffe wie blurry, deformed, low-res, muddy colors |
| 3. Stilwahl | Voreinstellung festlegen | Drawing für klare Linien; Art für Malerei |
| 4. Raster-Auswahl | 9 Varianten vergleichen | Anatomie, Kantenführung und Bildaufbau prüfen |
| 5. KI-Upscaling | Upscale ausführen | Auf 2048px vergrößern und Rauschen glätten (1 Credit) |
| 6. Kompression | In WebP konvertieren | Zielqualität zwischen 80 % und 85 % wählen |
| 7. Web-Veröffentlichung | <picture> implementieren | loading="lazy" und responsives srcset einbinden |
Mit strukturiertem Prompt-Engineering, Craiyons 2K-Upscaler und zeitgemäßen Webstandards verwandeln Illustratoren flüchtige KI-Entwürfe in performante, gestochen scharfe Bildinhalte für moderne Webseiten.