KI-Bilder und Website-Grafiken: passend gestalten und sauber veröffentlichen

KI-Bilder können einem Artikel ein eigenes Motiv geben und den Bedarf an fremden Fotolizenzen verringern. Automatische Freiheit von Rechten Dritter entsteht dadurch nicht. Entscheidend sind Bildfunktion, nachvollziehbare Herkunft und das konkrete Motiv. Dieser Ratgeber verbindet die Auswahl mit der Veröffentlichung in WordPress: von der fachlichen Prüfung bis zum passenden Ausschnitt und Alternativtext.

Beginnen Sie deshalb mit der Aufgabe des Bildes. Eine Illustration kann ein abstraktes Thema begleiten, ein Diagramm erklärt einen Zusammenhang und ein Foto dokumentiert einen realen Gegenstand oder Ort. Diese Funktionen sind nicht beliebig austauschbar. Dieser Leitfaden zeigt, wann KI-Bilder sinnvoll sind, wann eigene Grafiken oder echte Fotos besser passen und wie die ausgewählte Datei sauber in WordPress veröffentlicht wird. Der Ablauf dient gleichermaßen einem kleinen Firmenauftritt und einem umfangreichen Ratgeberportal.

Die Bildart folgt dem Erkenntnisziel des Abschnitts. Diese Übersicht hilft, ein schönes Motiv mit seiner fachlichen Aufgabe und dem benötigten Herkunftsnachweis abzugleichen.

Die Tabelle lässt sich seitlich verschieben.

1. 1Bildfunktion festlegen
2. 2Herkunft und Nutzung prüfen
3. 3Motiv fachlich kontrollieren
4. 4Format und Ausschnitt optimieren
5. 5Alternativtext ergänzen
6. 6Darstellung und Abruf prüfen

Die Bildfunktion entscheidet über das passende Motiv

Schreiben Sie für jedes geplante Bild einen Zweck auf. Soll es den Ablauf eines Websiteumzugs erklären, eine Produktansicht zeigen oder lediglich den Einstieg optisch unterstützen? Ein erklärendes Bild benötigt fachlich richtige Beziehungen. Ein dekoratives Bild kann abstrakter sein, sollte den Inhalt aber nicht überdecken. Wenn Sie keinen konkreten Zweck benennen können, ist der Abschnitt möglicherweise ohne Bild besser. Eine sachliche Informationsseite braucht nicht nach jedem Absatz ein neues Motiv, um vollständig zu sein.

Echte Produktfotos und dokumentierende Screenshots erfüllen eine andere Aufgabe. Wenn ein Artikel eine bestimmte Oberfläche erklärt, hilft eine tatsächlich passende Ansicht mehr als ein generiertes Fantasiebild. Erstellen Sie Screenshots in einer geeigneten Testumgebung und entfernen Sie vertrauliche Daten vor der Veröffentlichung. Ein Bild, das angeblich einen echten Verwaltungsbereich zeigt, darf nicht aus frei erfundenen Schaltern und Menüs bestehen. Für abstrakte Erklärungen kann dagegen eine ausdrücklich illustrative Darstellung sehr gut funktionieren.

KI-Illustrationen von tatsächlichen Nachweisen trennen

Eine generierte Illustration zeigt nicht, dass ein Produkt getestet wurde oder dass ein bestimmtes Rechenzentrum so aussieht. Verwenden Sie sie entsprechend. Ein künstliches Foto von Serverreihen kann ein Hostingthema begleiten, ist aber kein Nachweis für den Standort oder die Infrastruktur eines Anbieters. Eine künstlich dargestellte Person ist kein bestätigter Mitarbeiter. Der Bildkontext und eine passende Beschriftung sollten diese Unterschiede verständlich machen, insbesondere wenn das Motiv sehr realistisch wirkt.

Vermeiden Sie generierte Auszeichnungen, Prüfzeichen und angebliche Kundenlogos. Ein Siegel im Bild kann dieselbe Behauptung vermitteln wie ein Satz im Text. Wenn die Website eine Zertifizierung oder einen Test nicht belegen kann, darf die Gestaltung diese Aussage nicht nebenbei erzeugen. Prüfen Sie auch Texte innerhalb des Bildes. Ein automatisch erzeugtes Schild mit einem garantierten Leistungsversprechen kann leicht übersehen werden, bleibt für Besucher aber eine sichtbare Aussage des Angebots.

Bei Vorher-nachher-Darstellungen ist besondere Genauigkeit sinnvoll. Ein generiertes Vorherbild und ein idealisiertes Nachherbild belegen keinen tatsächlichen Projekterfolg. Nutzen Sie solche Darstellungen nur als verständlich gekennzeichnete Konzeptillustration. Wenn ein echtes Ergebnis gezeigt werden soll, verwenden Sie die tatsächlichen Aufnahmen mit nachvollziehbarem Zusammenhang. Diese redaktionelle Grenze ist unabhängig davon, welches KI-Werkzeug verwendet wurde. Der Nutzen einer Illustration liegt in ihrer Erklärung, nicht in einer erfundenen Geschichte über ihre Entstehung.

Das Bildbriefing an die Website anpassen

Ein gutes Bildbriefing nennt Motiv, Funktion, Stil, Seitenverhältnis und geplanten Einsatz. Ergänzen Sie, wo später Text steht und welche Elemente deshalb frei bleiben sollen. Für ein Titelbild kann beispielsweise ein ruhiger Rand erforderlich sein, während ein kleines Vorschaubild einen klar erkennbaren zentralen Gegenstand braucht. Ein großflächig detailliertes Motiv verliert in der kleinen Übersicht seine Wirkung. Die tatsächliche Darstellungsgröße gehört deshalb bereits in die erste Aufgabe.

Legen Sie ein wiederkehrendes Gestaltungssystem fest. Eine Serie aus Ratgebergrafiken kann dieselben Farben und Schriftgrößen verwenden, aber jeweils einen eigenen fachlichen Ablauf zeigen. Das macht das Portal erkennbar, ohne identische Bilder zu wiederholen. Verwenden Sie nicht bloß dieselbe Grafik mit einer anderen Überschrift. Unterschiedliche Themen brauchen unterschiedliche Zusammenhänge. Eine Domainweiterleitung und eine Wiederherstellung haben andere Schritte; diese Unterschiede sollte die Darstellung auf einen Blick nachvollziehbar machen.

Beschreiben Sie auch Ausschlüsse: keine Markenlogos, keine erfundenen Oberflächen, keine Zahlen und keine Texte im Bild, wenn diese separat gesetzt werden sollen. Bei Diagrammen ist es häufig besser, Beschriftungen als echte Textelemente kontrolliert einzufügen. Dadurch bleiben Rechtschreibung und Aktualisierungen einfacher. KI-generierte Buchstaben können falsch sein oder bei kleiner Darstellung verschwimmen. Ein eigener Diagrammaufbau mit wenigen Vektorelementen lässt sich außerdem präziser an mobile Größen anpassen.

Herkunft und Nutzungsbedingungen dokumentieren

Für jedes verwendete Bild sollte nachvollziehbar sein, woher es stammt. Bei eigenen Fotos halten Sie die Aufnahme und eine gegebenenfalls erforderliche Freigabe fest. Bei externen Bildern speichern Sie den ursprünglichen Fundort, den Urheberhinweis und die konkrete Lizenz.

Für ein KI-Motiv dokumentieren Sie den Herstellungsweg so, dass eine spätere Redaktion ihn nachvollziehen kann:

• Herkunft: eingesetztes Werkzeug und gegebenenfalls verwendete Referenzdateien.
• Prompt: die maßgebliche Aufgabenbeschreibung einschließlich wichtiger Ausschlüsse.
• Erzeugungsdatum: Datum der Bilderstellung und Zuordnung zur verwendeten Fassung.
• Anbieterbedingungen: die für das Projekt geprüften Bedingungen mit nachvollziehbarem Stand.

Diese Informationen gehören in die interne Medienverwaltung; öffentlich notwendige Angaben werden zusätzlich an geeigneter Stelle sichtbar gemacht. Speichern Sie keine vertraulichen Promptbestandteile in öffentlich sichtbaren Bildunterschriften.

Prüfen Sie die Lizenz des konkreten Bildes, nicht nur die allgemeinen Aussagen einer Suchplattform. Ein Suchergebnis mit dem Hinweis frei nutzbar ist kein vollständiger Herkunftsnachweis. Bilder können falsch eingeordnet sein oder weitere Bedingungen haben. Halten Sie eine Kopie der relevanten Angaben oder einen nachvollziehbaren Vermerk vor, damit eine spätere Redaktion nicht alles neu suchen muss. Ein professionell wirkendes Motiv ohne geklärte Herkunft ist keine geeignete Grundlage für eine dauerhaft gepflegte Website.

Die Bedingungen eines KI-Werkzeugs sind ebenfalls keine pauschale Zusage für jede denkbare Bildnutzung. Sie beantworten den Zugang und die vertraglich beschriebenen Nutzungsrechte am Ergebnis, ersetzen aber nicht die Prüfung des konkreten Motivs. Erkennbare Personen, Marken oder die Nachahmung einer bestimmten Vorlage können weitere Fragen aufwerfen. Wählen Sie für normale Websiteillustrationen daher möglichst eigenständige, sachlich passende Motive und vermeiden Sie Aufgaben, deren Zweck gerade die Verwechslung mit einer realen fremden Darstellung ist.

Creative-Commons-Bilder sorgfältig auswählen

Creative Commons bietet verschiedene Lizenzen mit unterschiedlichen Bedingungen. CC BY 4.0 erlaubt beispielsweise Nutzungen unter der Bedingung einer geeigneten Namensnennung, eines Lizenzlinks und eines Hinweises auf Änderungen. Andere Varianten ergänzen Bedingungen wie ShareAlike, NonCommercial oder NoDerivatives. Die Bezeichnung Creative Commons allein sagt deshalb nicht, welche Bearbeitung und Veröffentlichung erlaubt ist. Lesen Sie die genaue Lizenz des ausgewählten Bildes und prüfen Sie, ob sie zum geplanten Einsatz passt.

Ein Portal mit Produktwerbung sollte eine NonCommercial-Lizenz nicht ohne weitere Prüfung als passend behandeln. Die kommerzielle Einordnung hängt vom konkreten Einsatz ab; eine einfache Werbewebsite ist jedenfalls kein guter Ort für ungeprüfte Annahmen.

Wenn die Bedingungen für Ihren Fall unklar sind, wählen Sie eine eindeutig geeignete Alternative oder klären Sie die Erlaubnis. Ebenso prüfen Sie, ob ein Zuschnitt oder eine Bearbeitung mit einer NoDerivatives-Bedingung vereinbar ist. Die geeignete Lizenz muss den tatsächlich geplanten Umgang abdecken.

Vermeiden Sie eine Quellenangabe, die nur den Namen einer Bilderplattform nennt. Der konkrete Urheber, der Bildtitel soweit erforderlich, die Lizenz und der Ursprungslink sollten entsprechend den Bedingungen nachvollziehbar sein. Nutzen Sie in WordPress eine gepflegte Bildunterschrift oder eine passende Quellenverwaltung. Testen Sie anschließend, ob die Angabe auf Mobilgeräten sichtbar und der Link bedienbar ist. Eine intern dokumentierte Lizenz ist für die Redaktion wichtig, erfüllt aber nicht automatisch eine öffentlich erforderliche Namensnennung.

Die fachliche Prüfung eines generierten Bildes

Kontrollieren Sie das Bild zuerst auf seine zentrale Aussage. In einem Netzwerkdiagramm dürfen Pfeile nicht den falschen Weg anzeigen. In einer Backupdarstellung sind drei Ordner auf demselben Laufwerk keine drei unabhängigen Sicherungsorte.

In einer Grafik über Managed Hosting darf der Hoster nicht automatisch sämtliche Inhaltsverantwortung übernehmen. Die optische Ordnung kann einen fachlichen Fehler besonders überzeugend erscheinen lassen. Legen Sie deshalb die richtige Aussage vor der Gestaltung fest und prüfen Sie die fertige Grafik dagegen.

Prüfen Sie anschließend Details, die bei schneller Betrachtung verborgen bleiben. Bei realistischen Motiven können unplausible Anschlüsse, verformte Hände oder unlesbare Beschriftungen die Glaubwürdigkeit schwächen. Bei sachlichen Grafiken sind Kontrast, Reihenfolge und Anzahl der Schritte wichtiger. Das Bild muss in seiner geplanten Größe geprüft werden. Eine perfekte Darstellung im großen Bearbeitungsfenster kann als kleine Artikelvorschau nur noch aus unverständlichen Farbflächen bestehen.

Beachten Sie auch den kulturellen und redaktionellen Kontext. Ein stark dramatisiertes Sicherheitsbild kann ein sachliches Thema unnötig bedrohlich machen. Eine Personengruppe sollte nicht einseitig zeigen, wer angeblich für bestimmte Aufgaben zuständig ist.

Die Auswahl soll zum Publikum und zum Ton der Website passen. Lassen Sie ein Bild mit unklarer Wirkung durch eine zweite Person ansehen und fragen Sie, welche Aussage sie darin erkennt. So wird sichtbar, ob die Bildsprache unbeabsichtigt ein anderes Versprechen vermittelt als der Text.

Rasterbild oder Vektorgrafik auswählen

Fotos und gemalte Illustrationen sind meist Rasterbilder, deren Details aus Pixeln bestehen. Diagramme, einfache Icons und technische Linienzeichnungen können als Vektorgrafiken umgesetzt werden. Eine Vektorgrafik kann bei unterschiedlichen Größen scharf bleiben und ist für wenige klare Formen oft kompakt. Das passende Format hängt vom Inhalt ab. Ein fotorealistisches Motiv als komplexe Vektorgrafik wäre wenig zweckmäßig; eine einfache Ablaufgrafik muss nicht als sehr großes Foto gespeichert werden.

Für Rasterbilder kommen je nach Zweck unter anderem JPEG, PNG, WebP und AVIF infrage. Vergleichen Sie die konkrete Bildqualität und Dateigröße. Transparenz, feine Textbeschriftungen und fotografische Flächen stellen unterschiedliche Anforderungen. Ein kleiner Dateiwert ist kein Erfolg, wenn die Schrift danach unlesbar wird. Eine universelle Qualitätszahl passt deshalb nicht zu jedem Motiv. Erstellen Sie eine geeignete Webfassung und bewahren Sie die bearbeitbare Originaldatei getrennt auf.

SVG-Dateien benötigen einen kontrollierten Umgang, weil sie mehr als reine Pixel enthalten können. Verwenden Sie vertrauenswürdige eigene Dateien und eine passende Prüfung, bevor Sie sie in eine Website übernehmen. Öffentliche Uploads für beliebige SVG-Dateien sind für ein normales Informationsportal nicht erforderlich. Alternativ kann eine kontrolliert erzeugte Rasterfassung für den redaktionellen Upload ausreichen. Die Entscheidung richtet sich nach Darstellung, Aktualisierbarkeit und dem vorhandenen technischen Veröffentlichungsweg.

Dateigröße, Auflösung und Ausschnitt zusammen betrachten

Ermitteln Sie, wie breit das Bild tatsächlich auf der Seite erscheint. Daraus leiten Sie sinnvolle Auslieferungsgrößen ab, statt die maximale Generatorauflösung unverändert hochzuladen. WordPress kann verschiedene Größen bereitstellen; prüfen Sie, ob das Theme diese passend verwendet. Eine responsive Einbindung erlaubt dem Browser, eine geeignete Datei für Bildschirm und Darstellungsgröße zu wählen. Sie spart jedoch nur dann Daten, wenn tatsächlich unterschiedliche geeignete Bilddateien vorhanden sind und korrekt angeboten werden.

Kontrollieren Sie den Ausschnitt auf Desktop und Mobiltelefon. Ein Bild kann im breiten Format genügend Platz bieten, während im schmalen Format die entscheidende Beschriftung abgeschnitten wird. Für Diagramme ist eine vollständige Darstellung meist wichtiger als ein dekorativer Zuschnitt. Bei Titelbildern kann ein eigener mobiler Ausschnitt sinnvoll sein. Entscheiden Sie bewusst, statt eine automatische Zentrierung für jedes Motiv anzunehmen. Ein Fokuspunkt sollte auf dem bleiben, was für das Verständnis erforderlich ist.

Reservieren Sie den Platz des Bildes im Seitenlayout, damit der Inhalt beim Nachladen möglichst stabil bleibt. Später im Artikel liegende Bilder können verzögert geladen werden, wenn die Einbindung dazu passt. Das zentrale Einstiegsbild sollte nicht durch eine unpassende Optimierung unnötig spät erscheinen. Prüfen Sie die ausgelieferte Seite mit realen Dateien und einer mobilen Verbindung. Weitere Schritte zur Leistung erklärt der Ratgeber zur WordPress-Geschwindigkeit.

Alternativtexte nach Funktion schreiben

Ein Alternativtext beschreibt die relevante Information oder Funktion eines Bildes im jeweiligen Zusammenhang. Er ist keine Sammlung von Suchbegriffen. Bei einem informativen Diagramm benennt er den zentralen Zusammenhang; ausführliche Details stehen zusätzlich im Text. Bei einem verlinkten Bild kann die Funktion des Links entscheidend sein. Eine rein dekorative Grafik benötigt gewöhnlich einen leeren Alternativtext, damit sie nicht unnötig vorgelesen wird. Der W3C-WAI-Entscheidungsbaum hilft bei dieser Zuordnung.

Vergleichen Sie den Alternativtext mit dem umgebenden Absatz. Wiederholt er nur wortgleich die Bildunterschrift, kann das beim Vorlesen störend sein. Beschreibt er unwichtige Farben und vergisst den Ablauf, verfehlt er seine Aufgabe. Für eine Grafik zur Domainnormalisierung wäre der Hinweis sinnvoll, dass alle vier Adressvarianten zur HTTPS-Hauptadresse führen und Pfad sowie Query erhalten bleiben. Die Information soll nachvollziehbar sein, auch wenn der Besucher die Grafik nicht sehen kann.

Lange Diagramme brauchen eine textliche Ergänzung. Ein einzelner Alternativtext kann eine komplexe Tabelle oder eine mehrstufige Entscheidungslogik nicht immer sinnvoll abbilden. Stellen Sie deshalb die wesentlichen Werte und Beziehungen im Artikel als echten Text oder geeignete Tabelle bereit. Der Ratgeber zur Zugänglichkeit von KI-Websites vertieft diese Prüfung. Eine schöne Grafik ist dann ein zusätzlicher Zugang zum Inhalt, während die Information weiterhin unabhängig vom Bild nutzbar bleibt.

Medien in WordPress übersichtlich verwalten

Verwenden Sie aussagekräftige Dateinamen und halten Sie Varianten nachvollziehbar auseinander. Eine Datei mit beliebigen Generatorzeichen ist schwerer wiederzufinden als eine klar benannte Grafik zum Backupablauf. Vermeiden Sie vertrauliche Daten in Dateinamen, weil diese Teil einer öffentlichen URL werden können. Ergänzen Sie Titel, Alternativtext, Bildunterschrift und Herkunft dort, wo die Redaktion sie tatsächlich pflegt. Die Organisation sollte zur Website passen und ohne den ursprünglichen Ersteller verständlich bleiben.

Speichern Sie Originale und Webfassungen getrennt. Eine spätere Änderung einer Beschriftung braucht die bearbeitbare Ausgangsdatei. Eine bereits stark komprimierte Webdatei ist dafür nicht ideal. Halten Sie außerdem fest, in welchen Artikeln ein Bild verwendet wird. Wird eine fachliche Darstellung geändert, können alle betroffenen Seiten gezielt kontrolliert werden. Ein Austausch unter demselben Dateinamen kann Caches beeinflussen; prüfen Sie nach einer Aktualisierung daher den tatsächlich sichtbaren Stand.

Entfernen Sie ungenutzte Dateien mit Bedacht. Ein Medium kann in einer älteren Seite, einem Downloadlink oder einer externen Veröffentlichung verwendet werden. Eine scheinbar fehlende Zuordnung in der Medienübersicht beweist nicht, dass keine Verweise existieren. Bei größeren Bereinigungen sichern Sie den Bestand und prüfen Sie Links. Ein aufgeräumtes Medienarchiv ist sinnvoll, aber die Bereinigung soll nicht funktionierende Inhalte beschädigen. Entscheidend bleibt eine nachvollziehbare Ablage mit geklärten Nutzungsrechten.

Die fertige Bildseite abnehmen

Kontrollieren Sie die Dateimetadaten vor dem Upload, wenn die Quelle sensible Informationen enthalten könnte. Ein Foto kann Standortdaten speichern, ein Screenshot interne Namen zeigen und eine exportierte Grafik unbeabsichtigte Arbeitsinformationen enthalten. Die Veröffentlichungsfassung braucht nur die Informationen, die für den vorgesehenen Inhalt erforderlich sind. Das bearbeitbare Original bleibt in der internen Ablage. So bleibt die Bildveröffentlichung bewusst auf das Motiv und seine fachliche Aufgabe begrenzt.

Prüfen Sie die Veröffentlichung in der tatsächlichen Artikelansicht. Ist das Motiv passend? Bleiben Beschriftungen lesbar? Funktionieren Quellenlinks? Stimmen Alternativtext und Bildunterschrift mit dem sichtbaren Bild überein? Laden Sie die Seite abgemeldet und auf einem kleinen Bildschirm. Kontrollieren Sie außerdem, ob die Bilddatei über HTTPS erreichbar ist und keine interne Vorschauadresse verwendet. Solche Fehler fallen in der Bearbeitungsoberfläche häufig nicht auf, weil angemeldete Benutzer andere Zugriffsrechte haben.

Beziehen Sie die Bildprüfung in die redaktionelle Freigabe ein. Der Prüfablauf für KI-Texte gilt sinngemäß auch für sichtbare Aussagen in Grafiken. Ein neuer Tarifwert kann eine bestehende Vergleichsgrafik veralten lassen. Ein geänderter Ablauf kann andere Pfeile oder Schritte erfordern. Die KI kann bei einer Überarbeitung helfen; die endgültige Grafik muss jedoch zum geprüften Inhalt passen und darf keine veralteten oder erfundenen Zusagen weitertragen.

Vorschau und Artikelbild getrennt kontrollieren

Ein Beitragsbild kann gleichzeitig in einer Themenübersicht, auf der Artikelseite und in einer externen Vorschau erscheinen. Diese Darstellungen haben unterschiedliche Ausschnitte. Prüfen Sie daher nicht nur die große Datei. Eine beschriftete Ablaufgrafik eignet sich möglicherweise hervorragend im Artikel, aber schlecht als kleine Vorschaukachel. In diesem Fall kann ein einfacheres Vorschaumotiv die bessere Lösung sein. Die Kachel soll den Artikel erkennbar machen; sie muss nicht sämtliche fachlichen Informationen bereits im kleinen Format vermitteln.

Testen Sie außerdem, ob die Überschrift auch ohne das Bild verständlich bleibt. Besucher können Bilder deaktivieren oder die Seite in einer vereinfachten Leseansicht öffnen. Ein Titel wie Diese fünf Schritte ohne weitere Beschreibung verliert dann seinen Zusammenhang.

Benennen Sie die Aufgabe im Text und verwenden Sie die Grafik als Ergänzung. Bei einer Reihe ähnlicher Motive müssen außerdem die Bildunterschriften die jeweilige Bedeutung korrekt nennen und dürfen nicht versehentlich von einem vorherigen Artikel übernommen werden.

Eine Bildserie ohne austauschbare Motive planen

Bei mehreren Ratgebern erstellen Sie vorab eine Motivliste mit jeweils einem konkreten Erkenntnisziel. Für den Domainartikel könnte das die Normalisierung der Adressen sein, für den Textartikel die Trennung von Aussage und Quelle und für einen Managed-Server-Artikel die Aufteilung der Zuständigkeiten. Die gemeinsame Gestaltung hält die Serie zusammen, während jede Grafik einen eigenen Zusammenhang erklärt. So entsteht ein brauchbares visuelles System, das auch ohne dekorative Bilder zu jedem Absatz Orientierung bietet.

Prüfen Sie die Motive zuletzt nebeneinander und in ihren Artikeln. Wiederholen sich Symbole verständlich? Sind neue Begriffe erklärt? Wird eine Farbe überall für dieselbe Bedeutung eingesetzt? Ein grüner Bereich sollte nicht einmal eine geprüfte Freigabe und ein anderes Mal ein Risiko darstellen. Diese Konsistenz erleichtert das Verständnis über mehrere Seiten hinweg. Für den gesamten Erstellungsprozess ordnet der Leitfaden zur KI-Website Bilder in die übrigen Prüf- und Veröffentlichungsaufgaben ein.