Web Dev Blog

Artikel lesen

Alt-Texte generieren mit Künstlicher Intelligenz

KI-basierte Online-Tools im Test

von Daniel Erlinger

von Daniel Erlinger

Ein Roboter, der neben an einer Wand lehnt, auf mit Aufklebern bedeckt ist

In der modernen Webentwicklung spielen Alternativtexte (Alt-Texte) für Bilder eine entscheidende Rolle für die Barrierefreiheit und SEO-Optimierung von Websites. Mit der fortschreitenden Technologie wird der Einsatz von Künstlicher Intelligenz (KI) zur automatischen Generierung dieser Alt-Texte immer populärer. KI-Algorithmen analysieren Bildinhalte und erzeugen präzise Beschreibungen, die nicht nur Menschen mit Sehbehinderungen unterstützen, sondern auch die Auffindbarkeit der Seiten durch Suchmaschinen verbessern. Diese Methode spart Anwendern und Entwicklern Zeit und Mühe, da manuelle Beschreibungen automatisiert werden.

Warum sind Alt-Texte so wichtig?

Eine braun-getigerte Katze sitzt auf einer Treppe und schaut neugierig in die Kamera
@ Copyright: Alexander London/ unsplash.com

Auf die technische Ebene heruntergebrochen ist der Alternativtext ein Fallback, der eintritt, wenn das Bild nicht geladen wurde. Mit seiner Hilfe wird der Inhalt des Bildes beschrieben - also was darauf zu sehen ist. Als HTML-Markup sieht das so aus:

<img src="pfad/zum/cat-content.jpg" alt="Eine braun-getigerte Katze sitzt auf einer Treppe und schaut neugierig in die Kamera">

Der Browser zeigt im Fehlerfall eben jenen Text anstelle des Bildes an, sodass Besucher erahnen können, was zu sehen gewesen wäre.

Im Laufe der letzten Jahre sind dem Alt-Text aber auch neue Bedeutungen zugesprochen worden. So geht es nicht mehr nur um die reine Fallback-Lösung im Fehlerfall, sondern auch um Barrierefreiheit und SEO.

User, die Assistenzsysteme für den Besuch von Websites nutzen, lassen sich Alternativtexte vorlesen. Dabei handelt es sich nicht nur um körperlich beeinträchtgte Menschen. Laut Wikipedia sind bis zu 9 % der Männer von einer Rot-Grün-Schwäche betroffen. Bei einer Einwohnerzahl von ca. 84,5 Mio und einem Männeranteil von 49 % in Deutschland reden wir hier über rund 3,7 Mio. Menschen mit einer potentiellen Beeinträchtigung.

Auch das Thema unserer Zeit - Suchmaschinenoptimierung - nicht zu vergessen. Die Crawler der großen Suchmaschienen werten die Texte aus, wovon der Traffic auf die eigene Seite gut profitieren kann.

Viele Gründe also, dieses Thema stets im Fokus zu behalten.

Die Arbeit mit KI erleichtern

Ein Bild zu beschreiben kann noch einfach sein. Mehrere Bilder zu beschreiben eine Arbeit, die niemand machen möchte. Es gilt, das Visuelle so genau wie möglich wiederzugeben, ohne dabei einen Roman zu schreiben. Aus SEO-Gründen wird oft empfohlen, Keywords passend zum Inhalt der Seite einzubauen. Nutzt man den Alternativtext aber ausschließlich für die Suchmaschinenoptimierung, so missachtet man den Grundgedanken des Attributs. Für eine weitere Beschreibung im Sinne von SEO ist der Titel des Bildes deutlich besser geeignet.

Den kreativen Prozess des Ausdenkens von Texten können einem auch Tools abnehmen. Im Netz lassen sich einige finden, die kostenlos und mit nur wenigen oder gar keinen Beschränkungen daher kommen.

Für diesen Test habe ich mir einige Online-Tools angesehen, die kostenlos und ohne Anmeldung nutzbar sind. Von diesen Tools können lediglich 2 auch Texte auf Deutsch genieren.

Als Testobjekte stehen folgende 4 Bilder zur Auswahl. Um eine möglichst große Bandbreite von Bildinhalten abzudecken, enthalten die Objekte eine unterschiedliche Anzahl von Texten - von keinem bis viel Text - und Motiven. Es sind Landschaften zu sehen ebenso wie Gesichter und Menschen. So werden die Systeme mit unterschiedlichen Schwierigkeitsgraden konfrontiert, um zu sehen wie gut sie damit umgehen können.

Die Testobjekte

Aufgestellter Straßenbahnwagen in Melbourne
Copyright: Daniel Erlinger
Screenshot der Website vom Brisbane Powerhouse
Startseite des Brisbane Powerhouse, Quelle: brisbanepowerhouse.org
Screenshot der Startseite der Agentur Chromatix
Agentur Chromatix, Quelle: chromatix.com.au
Screenshot der Startseite der Tourismus-Website für den Grampians Nationalpark
Die Tourismus-Website für den Grampians Nationalpark, Quelle: visitgrampians.com.au

Um eine große Bandbreite an Bildinhalten abzudecken, wurden diese vier Probanden ausgesucht. Es sind Bilder mit keinem, wenig und viel Text. Der Algorithmus der KI-Tools soll den Inhalt des Bildes - also die Kernaussage - ermitteln und sie so gut wie möglich beschreiben.

Die Tools im Test

Ausgewählt wurden AI-basierte Apps, die sich ohne Anmeldung oder weitere Kosten nutzen lassen. Eine Integration in das eigene CMS spielt dabei keine Rolle. Demzufolge ist es egal, ob eine API oder Plugins verfügbar sind.

Die ursprüngliche Intentation war, Tools zu testen die die generierten Texte auf Deutsch ausgeben können. Das erwies sich leider als schwierig, weil es scheinbar nur zwei Tools gibt, die ohne Anmeldung deutsche Texte generieren. So wurde die Entscheidung getroffen, auch Tools in den Test aufzunehmen, die mit den Testkriterien nur englischsprachige Ausgaben erstellen.

AI-generierte Alt-Texte in deutscher Sprache

  1. Ahrefs Free Image Alt Text Generator
  2. YesChat Alt-Text Generator

Der Algorithmus soll Texte auf Deutsch generieren, eine englische Ausgabe ist lobenswert, weitere Sprachen ein Nice to have. Aus diesem Grund habe ich mich dazu entschieden, zwei weitere Tools mit einzubeziehen, die Alt-Texte in englischer Sprache ausgeben.

AI-generierte Alt-Texte in englischer Sprache

  1. Alttext-Generator
  2. AltText.ai AI Alt Text Generator

Diese Tools können dennoch interessant sein, wenn man eine englischsprachige Website pflegt oder, wie im Fall von AltText.ai, doch nach einer API oder Integration in das eigene CMS sucht. Letzterer Dienst bietet obendrein eine Ausgabe in 130 Sprachen an, aber eben nur mit einem Account.

Die Testmethodik

Zur Vereinfachung werden die generierten Texte einfach zusammen mit den Prompts neben das Testobjekt kopiert - falls diese vorhanden sind. Dadurch soll eine Verfälschung und eine persönliche Wertung weitestgehend vermieden werden. Ein persönliches Fazit erfolgt jeweils am Ende des Tools.

Ahrefs Free Image Alt Text Generator

Das Tool von Ahrefs verzichtet auf eine Chatfunktion. Die Oberfläche ist wie ein Formular aufgebaut und damit sehr übersichtlich und intuitiv.

Neben dem Bildupload wählt man eine Sprache für den generierten Text aus, kann eine optionale Beschreibung angeben und stellt die Tonalität ein. Bei letzterem handelt es sich um den Stil des Textes. So kann man sich zwischen Förmlich, Freundlich oder aber auch Diplomatisch, Plakativ oder Luxuriös entscheiden. Der Generator erzeugt dabei bis zu 5 Varianten.

Aufgestellter Straßenbahnwagen in Melbourne
Copyright: Daniel Erlinger

3 Varianten auf Deutsch als förmlicher Text ohne Beschreibung:

  1. Großes Gebäude mit großem Fenster, das viel Tageslicht hereinlässt.
  2. Ein großes Gebäude mit einem großen Fenster, das die Umgebung beleuchtet.
  3. Ein Gebäude mit einem großen Fenster, das viel Licht in den Raum lässt.

3 Varianten auf Englisch als förmlicher Text ohne Beschreibung:

  1. A large building with a large window overlooking a bustling city street.
  2. An urban building with a spacious window showcasing a vibrant cityscape.
  3. Large architectural structure with a massive window showcasing the city below.
Screenshot der Website vom Brisbane Powerhouse
Startseite des Brisbane Powerhouse, Quelle: brisbanepowerhouse.org

Für das zweite Bild in der Testreihe gab es 3 Varianten in professioneller Sprache auf Deutsch:

  1. Eine Frau mit wehenden Haaren im Wind.
  2. Frau mit Haaren im Wind.
  3. Haare einer Frau im Wind.
Screenshot der Startseite der Agentur Chromatix
Agentur Chromatix, Quelle: chromatix.com.au

Bei diesem Versuch irritierte die Darstellung des Ergebnisses etwas. Das Tool sollte 3 Vorschläge in überzeugender Tonalität liefern. Heraus kam folgende Antwort:

  1. Entdecken Sie die zauberhafte Website für unseren Blumenladen. Lassen Sie sich von der Schönheit der Blumen verzaubern. Jetzt besuchen! Version 1
  2. Erleben Sie die faszinierende Website unseres Blumenladens. Tauchen Sie ein in die Schönheit der Blumen. Jetzt besuchen und inspirieren lassen! Version 2
  3. Entdecken Sie die bezaubernde Website unseres Blumenladens. Lassen Sie sich von der Blütenpracht verzaubern. Jetzt besuchen und inspirieren lassen! Version 3
Screenshot der Startseite der Tourismus-Website für den Grampians Nationalpark
Die Tourismus-Website für den Grampians Nationalpark, Quelle: visitgrampians.com.au

Auch beim letzten Bild aus der Testreihe konnte die KI von Ahrefs nicht überzeugen. Dieses mal gab es neben dem Bild und der Einstellung "Plakativ" noch die Beschreibung "Panoramafoto aus dem Grampians Nationalpark in Victoria, AUS". Das Tool ignorierte die Vorgabe von 3 Varianten komplett und gab lediglich folgendes Ergebnis aus:

Website-Design für ein Reisebüro mit Panoramafoto aus dem Grampians Nationalpark in Victoria, AUS.

Alles in allem ein ernüchterndes Ergebnis. Aus der Agentur Chromatix wird ein Blumenladen und der Website für den Nationalpark ein Reisebüro. Hier scheint beim Training mit den Daten einiges schiefgelaufen zu sein, sodass die Entwickler noch einiges nachbessern müssen.

YesChat Alt-Text Generator

Als eine Art Meta-Plattform bietet YesChat.ai Zugang zu vielen KI-Anwendungen, worunter auch mehrere Alt-Text-Generatoren zu finden sind. Für diesen Test nutzte ich den Generator unter https://www.yeschat.ai/de/gpts-ZxX5Mq2c-Alt-Text-Generator-Assistant, der über einen Prompt sowohl auf Englisch als auch auf Deutsch kommunizieren kann.

Wem die Beschränkung von 20 Kommunikationen pro Tag ausreichen, der kann auf einen Account verzichten. Ich traf jedoch bereits vorher auf die Bezahlschranke, sodass ein Test mit allen 4 Bildern ein etwas längeres Unterfangen wurde. Durch die Chatfunktion kann man den Generator beliebig nutzen. Die Ergebnisse sind sehr detailliert und umfangreich, können aber durch einen cleveren Prompt verkürzt werden. Die Qualität der Bilderkennung spiegelt sich in den generierten Texte wider.

Aufgestellter Straßenbahnwagen in Melbourne
Copyright: Daniel Erlinger

Für das erste Bild nutzte ich den vorgeschlagenen Prompt Generate 5 alt text options for my image. und lud das Bild hoch. Die 5 generierten Texte und ihre deutschen Übersetzungen sind 1:1 aus der Anwendung heraus kopiert.

Ergebnisse auf Englisch:

  1. [A sculpture of an inverted, partially buried tram or bus, with its underside exposed, stands among flagpoles and palm trees. In the background, a modern high-rise building with a distinctive vertical garden on its facade is visible against a blue sky.]
  2. [An artistic installation featuring a tipped-over and partially sunken tram or bus, surrounded by tall flagpoles and lush palm trees. A tall skyscraper with reflective windows and greenery-filled balconies rises in the background.]
  3. [A large, weathered tram or bus sculpture is positioned at an angle, as if emerging from the ground. It is set amidst flagpoles and palm trees, with a high-rise building adorned with green plants towering in the background.]
  4. [The image shows a tilted tram or bus sculpture embedded in the ground, accompanied by white flagpoles and palm trees. A modern skyscraper with blue-tinted windows and vertical gardens is prominent in the background.]
  5. [A unique sculpture of a tram or bus lying on its side, partially buried, stands next to flagpoles and a palm tree. Behind it, a tall, modern building with numerous balconies filled with plants reaches towards the sky.]

Ergebnisse auf Deutsch:

  1. [Eine Skulptur eines umgedrehten, teilweise vergrabenen Straßenbahn- oder Buswagens mit freiliegendem Unterboden steht zwischen Fahnenmasten und Palmen. Im Hintergrund ist ein modernes Hochhaus mit einem markanten vertikalen Garten an der Fassade gegen den blauen Himmel zu sehen.]
  2. [Eine künstlerische Installation mit einer umgestürzten und teilweise versunkenen Straßenbahn oder einem Bus, umgeben von hohen Fahnenmasten und üppigen Palmen. Im Hintergrund erhebt sich ein hoher Wolkenkratzer mit reflektierenden Fenstern und Balkonen voller Grünpflanzen.]
  3. [Eine große, verwitterte Straßenbahn- oder Busskulptur ist schräg positioniert, als ob sie aus dem Boden auftauchen würde. Sie befindet sich zwischen Fahnenmasten und Palmen, mit einem Hochhaus im Hintergrund, das mit grünen Pflanzen verziert ist.]
  4. [Das Bild zeigt eine gekippte Straßenbahn- oder Busskulptur, die im Boden eingebettet ist, zusammen mit weißen Fahnenmasten und Palmen. Ein modernes Hochhaus mit blau getönten Fenstern und vertikalen Gärten ist im Hintergrund zu sehen.]
  5. [Eine einzigartige Skulptur einer auf der Seite liegenden, teilweise vergrabenen Straßenbahn oder eines Busses steht neben Fahnenmasten und einer Palme. Dahinter erhebt sich ein hohes, modernes Gebäude mit zahlreichen Balkonen, die mit Pflanzen gefüllt sind, in den Himmel.]
Screenshot der Website vom Brisbane Powerhouse
Startseite des Brisbane Powerhouse, Quelle: brisbanepowerhouse.org

Ergebnis auf Deutsch nach dem Prompt Generiere 3 Vorschläge für einen Alt-Text in Deutsch.:

  1. Eine Frau mit wehendem, langen Haar vor einem rosa Hintergrund schaut überrascht in die Kamera. Sie trägt schwarze Latzhosen und auffällige Ohrringe. Oben links steht „BRISBANE POWERHOUSE“ und unten rechts „23-26 MAY, ARE YOU PULLING MY LEG? BRISBANE COMEDY FESTIVAL“.
  2. Frau mit wehendem Haar und schwarzer Latzhose vor einem rosa Hintergrund. Text: „BRISBANE POWERHOUSE“, „23-26 MAY, ARE YOU PULLING MY LEG? BRISBANE COMEDY FESTIVAL“. Sie trägt Ohrringe und schaut überrascht in die Kamera.
  3. Frau mit langem, wehendem Haar in schwarzer Latzhose vor rosa Hintergrund. Text: „BRISBANE POWERHOUSE“, „23-26 MAY, ARE YOU PULLING MY LEG? BRISBANE COMEDY FESTIVAL“. Sie trägt Ohrringe und hat einen überraschten Ausdruck.
Screenshot der Startseite der Agentur Chromatix
Agentur Chromatix, Quelle: chromatix.com.au

Mit dem Prompt Give me 3 options for an alt text in English within a range of 20 - 30 words in just one sentence. erhielt ich folgende Vorschläge für dieses Bild.

  1. Chromatix homepage with a pink peony, green leaves, and text: "Websites that capture your full attention," along with navigation links and buttons for showreel and client results.
  2. Chromatix web design agency homepage featuring a pink peony, green leaves, and text: "Websites that capture your full attention," with options to watch a showreel or view client results.
  3. Homepage of Chromatix, showing a pink peony, green leaves, and the text: "Websites that capture your full attention," with buttons for showreel and client results.
Screenshot der Startseite der Tourismus-Website für den Grampians Nationalpark
Die Tourismus-Website für den Grampians Nationalpark, Quelle: visitgrampians.com.au

Zuguterletzt bietet der Assistent mit dem Prompt Erstelle mir einen Alt-Text für dieses Bild mit 15 Worten, in denen das Keyword Nationalpark vorkommt. das Ergebnis:

Person steht auf einem Aussichtspunkt im Grampians Nationalpark, mit Blick auf Berge und See.

Für mich die überzeugendste Leistung aller getesteten Kandidaten. Der Funktionsumfang ist sehr groß und durch den Einsatz einer Chatfunktion kann das Ergebnis beliebig beeinflusst werden.

Alttext-Generator

Der unscheinbare Dienst mit dem Frosch im Logo kommt völlig puristisch daher und bietet als einzige Eingabequelle ein Formular zum Hochladen des Bildes. Keine 2 Sekunden nach dem Absenden des Formulars erscheint der generierte Text, welcher ebenso puristisch daher kommt wie die App selbst.

Wie die Texte geniert werden, welches Sprachenmodell genutzt wird oder wer als Anbieter dahintersteckt, lässt sich hier nicht erfahren. Es gibt die Möglichkeit, sich einen Account anzulegen, aber wozu man diesen gebrauchen könnte, bleibt ebenso das Geheimnis des Anbieters. Der Grund, warum das Tool mit in den Test kam, sind die guten Ergebnisse und das einfache Handling. Bild auswählen, Formular absenden und Text bekommen.

Aufgestellter Straßenbahnwagen in Melbourne
Copyright: Daniel Erlinger

Das erste Bild in der Reihe erkennt die KI korrekt und liefert als generierten Text a sculpture of a bus in front of a palm tree ab.

Screenshot der Website vom Brisbane Powerhouse
Startseite des Brisbane Powerhouse, Quelle: brisbanepowerhouse.org

Die Frau im Bild wird mit a woman with her hair blowing in the wind erkannt.

Screenshot der Startseite der Agentur Chromatix
Agentur Chromatix, Quelle: chromatix.com.au

Mit dem dritten Bild wird es schon kniffliger. Als Ergbnis der Analyse wurde der Text

a close up of a flower

zurückgeliefert. Leider etwas zu wenig für die Beschreibung des Motivs wie es nötig wäre.

Screenshot der Startseite der Tourismus-Website für den Grampians Nationalpark
Die Tourismus-Website für den Grampians Nationalpark, Quelle: visitgrampians.com.au

Beim letzten Bild widerrum ist die Angabe a person standing on a railing on a cliff ausreichend als Beschreibung.

Etwas umfangreicher könnten die Texte schon sein, um ehrlich zu sein. Für "einfache" Bilder mit einem klaren Motiv reichen die generierten Texte aber allesamt aus. Am Ende kann man das Tool auch zur Inspiration oder zum Lernen nutzen.

AltText.ai AI Alt Text Generator

Wie beim vorhergehenden Testkandidaten auch, bietet AltText.ai ein Formular zum Upload des Bildes an. Ein optionales Feld zur Angabe von SEO Keywords fällt aber positiv hervor und bietet dem User Möglichkeiten zum Eingriff in das Ergebnis.

Die generierten Texte sind deutlich umfangreicher als beim Alttext-Generator und machen durchweg einen guten Eindruck.

Anwender, die auf der Suche nach einem richtigen Service sind, der neben einer Schnittstelle auch Plugins für Wordpress oder Shopsysteme bietet, könnten hier fündig werden. Der Umfang an möglichen Sprachen wird mit 130 angegeben, was doch schon ziemlich beachtlich ist.

Aufgestellter Straßenbahnwagen in Melbourne
Copyright: Daniel Erlinger

Für den aufgestellten Bus vor einem Hochhaus in Melbourne wird der folgende Text generiert:

A vertical, worn-out bus sculpture stands among palm trees and flagpoles in an urban setting with modern high-rise buildings in the background.

Die Länge des Textes ist mit 24 Wörtern angenehm lang und beschreibt den Bildinhalt in guter Art und Weise. Mit den optionalen SEO Keywords "Sightseeing, Melbourne" erhält man folgende Ausgabe:

A sculpted facade of a building appears tilted, surrounded by flagpoles and palm trees, with a tall modern skyscraper in the background—an intriguing sight for anyone sightseeing in Melbourne.

Screenshot der Website vom Brisbane Powerhouse
Startseite des Brisbane Powerhouse, Quelle: brisbanepowerhouse.org

Das zweite Bild animiert die KI zu dem Text

A woman with long hair wearing dark overalls stands against a pink background with her hair blown upwards. Text on the image reads "Brisbane Powerhouse, Are You Pulling My Leg? Brisbane Comedy Festival, 23-26 May.

Mit der Angabe der drei Keywords "Exhibition, Cars, Nature" gibt es eine kleine Herausforderung, die mit dem Ergebnis

A woman with one arm is flipping her hair in front of a pink background. Text on the image reads, "Brisbane Powerhouse," and details about the Brisbane Comedy Festival from May 23-26 are displayed like an exhibition of humor.

quittiert wurde.

Screenshot der Startseite der Agentur Chromatix
Agentur Chromatix, Quelle: chromatix.com.au

Die Startseite der Melbourner Agentur ergibt den Alternativtext Website homepage for a Melbourne web design agency featuring a vibrant pink flower and green leaves background.

Screenshot der Startseite der Tourismus-Website für den Grampians Nationalpark
Die Tourismus-Website für den Grampians Nationalpark, Quelle: visitgrampians.com.au

Beim letzten Bild entspricht die Angabe A person stands at a lookout point on a rocky cliff, overlooking a misty valley at sunrise. fast dem Ergebnis, welches vom Alttext-Generator produziert wurde.

Fazit

Wie weit die Sprachmodelle und deren Nutzung bereits gekommen sind, wird immer ersichtlicher. Bei 3 von 4 Diensten werden wirklich solide Ergebnisse zurückgeliefert, wobei der Alt-Text Generator von YesChat heraussticht und die Nase weit vorn hat.

Durch die Nutzung eines Prompts kann man das Ergebnis beeinflussen und bekommt sehr gute Bildbeschreibungen zurück. Je nach Qualität der Prompts bekommt man mehr oder weniger umfangreiche und detailierte Bildanalysen geboten.

Der Alttext-Generator mit dem Frosch im Logo ist dagegen nur mit Vorsicht zu genießen, erkennt er doch die Bildmotive nur unzureichend und liefert dementsprechend teils falsche Ergebnisse.

Zurück zur Newsübersicht

Ihnen gefällt das was Sie sehen?

Gern können wir darüber sprechen. Schreiben Sie mir oder rufen mich an.

Meine Kontaktdetails Referenzen ansehen