Dieser Beitrag wurde mit KI-Unterstützung erstellt, fachlich geprüft und redaktionell freigegeben.

Artikelbild-Kennzeichnung: AI GENERATED

Ein KI-Bild ist selten mit dem ersten Export fertig. Es kann eine gute Produktidee zeigen, die Handhaltung kann jedoch unplausibel sein, der wichtige Ausschnitt verschwindet am Smartphone und der Alt-Text beschreibt etwas, das im finalen Zuschnitt gar nicht mehr zu sehen ist. Für österreichische KMU ist das keine Frage von Bildkosmetik. Bilddatei, Bildaussage, Barrierefreiheit und Kennzeichnung treffen auf derselben Seite zusammen. Wer sie getrennt bearbeitet, erzeugt leicht Widersprüche.

Der praxistaugliche Weg beginnt daher nicht beim Prompt, sondern bei einer kurzen gemeinsamen Prüfung: Was soll das Bild auf dieser konkreten Seite erklären? Welcher Ausschnitt trägt diese Aussage auf Desktop und Mobilgerät? Welchen Nutzen vermittelt der Alternativtext? Und wie wird die Herkunft nachvollziehbar gekennzeichnet, ohne den Inhalt zu überlagern? Dieser Beitrag zeigt einen Ablauf, mit dem Redaktion, Marketing und Webentwicklung KI-Bilder für Websites optimieren können.

Ein Bild, vier Prüfaufgaben

Ein Bildgenerator liefert Pixel, aber keine fertige redaktionelle Entscheidung. Nehmen wir eine Tischlerei in Oberösterreich: Ein generiertes Foto zeigt einen maßgefertigten Esstisch in einer hellen Wohnung. Auf der Startseite soll es hochwertige Handarbeit vermitteln. In der mobilen Kartenansicht bleibt davon vielleicht nur eine Tischkante übrig. Der ursprüngliche Alt-Text „Tischler misst eine massive Eichenplatte in der Werkstatt“ wäre dann doppelt falsch: Der Mensch ist nicht mehr sichtbar und das Bild steht nicht mehr für den dargestellten Arbeitsschritt.

Die vier Aufgaben gehören deshalb zusammen. Erstens braucht das Motiv eine klare Aussage. Zweitens braucht es einen Zuschnitt, der diese Aussage in der vorgesehenen Fläche erhält. Drittens braucht es einen Alternativtext, der den Informationsgehalt oder die Funktion des Bildes wiedergibt. Viertens braucht es eine nachvollziehbare Kennzeichnung für generierte oder wesentlich bearbeitete Inhalte, wenn Kontext, Plattformregeln oder interne Transparenzstandards das erfordern. Die W3C-Anleitung zu Bildern trennt dabei sinnvoll zwischen informativen, dekorativen und funktionalen Bildern. Genau diese Einordnung verhindert generische Alt-Texte.

Mit der Bildaussage starten, nicht mit dem Dateinamen

Vor dem Export steht ein Satz, den auch jemand ohne Bild verstehen kann. Für das Titelbild dieses Artikels lautet er etwa: „Eine Holzschale mit blauem Harzeinsatz wird auf einem Drehteller fotografiert, während Monitor und Smartphone unterschiedliche Bildausschnitte zeigen.“ Dieser Satz ist noch kein Alt-Text. Er zwingt aber dazu, das relevante Objekt, den Arbeitsschritt und die beabsichtigte Botschaft festzulegen.

Für eine Dienstleistungsseite kann die Aussage „persönliche Beratung im Betrieb“ sein, für eine Produktdetailseite „Oberfläche und Größe eines Produkts“, für einen Ratgeber „ein konkreter Arbeitsschritt“. Alles, was nicht zur Aussage beiträgt, ist im Zuschnitt nachrangig. Das schützt vor einem verbreiteten KI-Fehlerbild: Das Bild ist auf den ersten Blick eindrucksvoll, aber seine visuelle Hauptsache ist ein zufälliger Hintergrund, eine übertriebene Dekoration oder ein nicht zur Marke passendes Fantasieobjekt.

Hilfreich ist ein kleines Freigabefeld direkt am Asset: Seite, Bildfunktion, sichtbares Hauptobjekt, kritische Details und geplante Varianten. So wird aus „header-final-neu.png“ eine prüfbare Entscheidung. Bei Bildern mit Personen kommt zusätzlich dazu: Sind Anatomie, Werkzeuge, Sicherheitsausrüstung und Umgebung plausibel? Bei Produkten: Stimmen Proportionen, Material, Anschlüsse und Varianten? KI kann in diesen Bereichen überzeugend aussehen und dennoch falsche Details erfinden. Eine fachkundige Sichtprüfung bleibt deshalb nötig.

Zuschnitt als Inhaltstest

Ein universeller Zuschnitt existiert nicht. Ein breites Aufmacherbild, eine quadratische Vorschau und ein Hochformat für eine Story können unterschiedliche Schwerpunkte brauchen. Wird dieselbe Datei nur kleiner skaliert, ist auf kleinen Flächen oft nicht mehr erkennbar, worum es geht. Legen Sie daher zuerst die tatsächlich verwendeten Seitenverhältnisse fest: etwa 16:9 für das Artikelbild, 1:1 für eine Übersicht und ein schmaleres Format für mobile Teaser.

Dann prüfen Sie jede Variante bei ihrer späteren Darstellungsgröße. Bleibt das Produkt, Gesicht, Werkzeug oder Detail als Blickanker erhalten? Werden wichtige Hände, Beschriftungen oder Sicherheitsmerkmale abgeschnitten? Entsteht ein irreführender Eindruck, weil ein Kontextobjekt fehlt? Für den eigentlichen Zuschnitt, das Verkleinern und die Ausgabe als WebP, JPEG oder PNG kann der AdSimple Image Resizer verwendet werden. Laut Leistungsseite arbeitet er direkt im Browser; die Bilddatei wird dabei nicht hochgeladen oder gespeichert. Das kann für einen schlanken lokalen Medienworkflow nützlich sein.

Der Zuschnitt ist zugleich ein Qualitätsfilter für die KI-Erzeugung. Wenn ein Motiv nur in einem extrem engen Ausschnitt stimmig wirkt, fehlen möglicherweise brauchbare Bildvarianten. Dann ist es besser, das Ausgangsbild neu zu erzeugen oder eine alternative Perspektive zu wählen, statt ein zufälliges Detail zum Titelbild zu machen. Reservieren Sie bei Motiven mit Menschen und Produkten bewusst etwas Rand. Ein kleiner Sicherheitsraum hilft, wenn das CMS auf Mobilgeräten anders beschneidet als erwartet.

Dateigröße und Layout mitdenken

Bildoptimierung bedeutet nicht, die kleinste Datei um jeden Preis zu erzwingen. Das Ziel ist eine ausreichend scharfe, passende Datei für die vorgesehene Fläche. Die Google-Dokumentation zu responsive images weist darauf hin, dass kleinere Geräte von kleineren passenden Bildkandidaten profitieren können; bei einem Bild als LCP-Element kann das auch die Ladezeit dieses Elements verkürzen. Für Website-Teams folgt daraus eine einfache Reihenfolge: Darstellungsbreite kennen, sinnvolle Varianten ausgeben, Qualität visuell prüfen und erst dann die Gewichtsfrage beurteilen.

Zu kleine Bilder wirken auf hochauflösenden Displays weich. Zu große Originale kosten unterwegs unnötig Daten und Dekodierzeit. Ebenso wichtig sind im Markup hinterlegte Breite und Höhe: Die W3C Recommendation zu HTML 5.2 beschreibt, dass der User Agent damit bereits vor dem Bilddownload Platz zuweisen kann. Das hilft, unerwartete Verschiebungen im Layout zu vermeiden. Prüfen Sie nach dem Upload im echten Template, nicht nur in der Mediathek: Laden die Varianten korrekt? Bleibt das Seitenverhältnis stabil? Ist der wichtige Bildbereich am Handy noch sichtbar?

Ein zweiter Fehler liegt im falschen Dateiformat. Transparenz, fotografische Struktur und geplante Weiterverarbeitung stellen unterschiedliche Anforderungen. Entscheiden Sie anhand der sichtbaren Qualität und der technischen Einbindung, nicht aus Gewohnheit. Für wiederkehrende Formate lässt sich die Arbeit mit einer festen Liste vereinfachen: Original behalten, Webvariante benennen, Format und Abmessungen notieren, dann eine Ansicht auf Desktop und Smartphone abnehmen. Ein Tool ersetzt diese redaktionelle Kontrolle nicht.

Alt-Text: Aussage statt Suchwortliste

Ein Alt-Text ist kein Platz für Keywords und kein vollständiges Inventar aller sichtbaren Gegenstände. Er soll je nach Kontext die Information oder Funktion des Bildes übermitteln. Die W3C-Technik H37 empfiehlt bei bedeutungstragenden img-Elementen einen kurzen Textalternativtext; bei wichtigen Wörtern im Bild sollen diese die gleiche Funktion im Alternativtext erhalten. Für rein dekorative Bilder kann ein leerer Alt-Text richtig sein.

Für das Handwerksmotiv wäre „Holzschale mit blauem Harzeinsatz auf einem Drehteller; Monitor und Smartphone zeigen verschiedene Zuschnitte“ passend, wenn genau dieser Vergleich im Artikel erklärt wird. „KI-Bilder Website optimieren, Bildoptimierung, Image Resizer“ wäre dagegen eine Suchwortliste ohne Nutzen für Screenreader-Nutzende. „Bild von einer Schale“ ist zu wenig präzise. Der Unterschied entsteht durch die Frage: Was würde Lesenden fehlen, wenn dieses Bild nicht geladen wird?

Bei einem verlinkten Bild beschreibt der Alt-Text primär das Ziel oder die Aktion, etwa „Zur Produktübersicht der Esstische“, nicht die Kameraperspektive. Bei einer Grafik mit Zahlen reicht ein kurzer Alt-Text nicht; die Daten oder Schlussfolgerung gehören in den umgebenden Text oder in eine zugängliche Tabelle. Und wenn ein KI-Bild nur eine bereits im Absatz ausgesprochene Stimmung illustriert, ist es möglicherweise dekorativ. Diese Entscheidung sollte die Redaktion treffen, weil nur sie den Seitenkontext kennt.

Kennzeichnung: sichtbar, verständlich und kontextbezogen

Die Kennzeichnung eines KI-Bildes ist kein Ersatz für die fachliche Kontrolle. Sie macht auch kein unpassendes Bild vertrauenswürdig. Sie hilft jedoch, die Herkunft im vorgesehenen Kontext nicht zu verschleiern. Für diesen Beitrag ist ein sichtbares Overlay am Artikelbild vorgesehen und zusätzlich eine textliche, für Hilfstechnologien erreichbare Kennzeichnung. Das ist mehr als ein verstecktes Metadatenfeld, ohne den Bildinhalt mit Text zu überladen.

Die EU-KI-Verordnung enthält Transparenzregeln für bestimmte KI-Systeme und Inhalte. Ihre Anwendung hängt vom konkreten Einsatzfall, Rollen und weiteren Rechtsvorschriften ab. Deshalb ist ein pauschales „muss immer“ oder „muss nie“ unseriös. Orientierung gibt Verordnung (EU) 2024/1689, insbesondere Artikel 50; eine Rechtsberatung ersetzt dieser Artikel nicht. Für österreichische Unternehmen ist es sinnvoll, Bildquelle, Bearbeitungsschritte, Freigabe und gewählte Kennzeichnung im Medienprozess festzuhalten. Bei Kampagnen, realistisch wirkenden Personen oder besonders sensiblen Themen gehört eine zusätzliche fachliche beziehungsweise rechtliche Prüfung dazu.

Praktisch bewährt sich ein einfaches Ampelmodell. Grün: klar stilisierte Illustration ohne Verwechslungsrisiko, dokumentierte Quelle, interne Kennzeichnung nach Standard. Gelb: realistisch wirkendes generiertes Bild oder erhebliche KI-Bearbeitung, sichtbaren Hinweis und Freigabe gegen Briefing prüfen. Rot: erfundene reale Ereignisse, nachgebildete identifizierbare Personen, medizinische oder finanzielle Aussagen, amtlich wirkende Szenen oder unklare Rechte. In Rot wird nicht einfach veröffentlicht; zuerst klären verantwortliche Fachstellen den konkreten Fall.

Ein Ablauf für Redaktion und Webteam

  1. Briefing lesen: Seite, Zielgruppe, Bildaussage und benötigte Formate festhalten.
  2. Ausgangsbild prüfen: KI-Artefakte, Plausibilität, sensible Details, Logos und ungewollte Texte kontrollieren.
  3. Varianten zuschneiden: Jede Zielgröße mit dem tatsächlichen sichtbaren Schwerpunkt erstellen. Für schnelle Varianten kann der AdSimple Image Resizer die browserbasierte Bearbeitung bündeln.
  4. Alt-Text im Kontext schreiben: Bildfunktion bestimmen, Aussage formulieren, dann auf unnötige Suchbegriffe und Wiederholungen kürzen.
  5. Kennzeichnung entscheiden: Herkunft und Bearbeitung dokumentieren, sichtbaren und zugänglichen Hinweis gemäß internem Standard umsetzen.
  6. Im Template abnehmen: Desktop und Smartphone, Seitenverhältnis, Ladeverhalten, Alt-Text und Overlay gemeinsam prüfen.

Der letzte Punkt wird häufig übersprungen. Dabei zeigt sich erst dort, ob CMS, Theme oder automatischer Zuschnitt die Entscheidung verändert haben. Auch der Alt-Text gehört in diesen Test: Wird er am richtigen Bild ausgeliefert und doppelt sich seine Information nicht sinnlos mit Bildunterschrift oder Nachbartext? Der bestehende AdSimple-Beitrag „Autopublish trifft AI Act: Wann Text und Titelbild ein Label brauchen“ ergänzt diese Perspektive mit einem Bild-Gate für automatische Veröffentlichungsprozesse.

Typische Fehlerbilder und ihre Korrektur

Der Desktop-Crop funktioniert, mobil verschwindet das Produkt. Erstellen Sie eine mobile Variante mit anderem Ausschnitt oder passen Sie die Bildposition im Template an. Der Alt-Text nennt einen nicht sichtbaren Vorgang. Schreiben Sie ihn erst nach dem finalen Crop neu. Das Bild enthält erfundene Beschriftungen. Nicht als Informationsgrafik verwenden; neu erzeugen oder die Aussage als echten HTML-Text umsetzen. Das KI-Label liegt nur in Metadaten. Prüfen Sie, ob ein sichtbarer und zugänglicher Hinweis für Ihren Kontext vorgesehen ist. Die Datei ist klein, aber unbrauchbar weich. Vergleichen Sie real gerenderte Varianten statt nur Kilobytes.

Der gemeinsame Blick auf Zuschnitt, Alt-Text und Kennzeichnung ist damit keine zusätzliche Schleife, sondern ein Qualitätscheck für dieselbe Bildaussage. So werden KI-Bilder zu nachvollziehbaren Webinhalten statt zu austauschbaren Dekorationen. Legen Sie für den nächsten Bildauftrag einen kleinen Prüfzettel an und testen Sie ihn an einer realen Seite. Das schafft eine wiederholbare Grundlage, ohne aus jeder Bildentscheidung ein Rechts- oder Technikprojekt zu machen.

Fazit

KI-Bilder für Websites optimieren heißt: Aussage festlegen, passende Formate zuschneiden, den Alt-Text aus dem finalen Kontext ableiten und Kennzeichnung bewusst umsetzen. Wer diese Schritte gemeinsam freigibt, erkennt Fehler früher und verbessert Verständlichkeit, Nutzbarkeit und redaktionelle Transparenz. Beginnen Sie beim nächsten Asset mit der Frage, was im kleinen Ausschnitt wirklich übrig bleiben muss.

Quellen