Zum Inhalt springen
PageSpeed 100 als Auslieferungs-Standard
Performance

Bilder auf der Website: Formate und Alternativtexte

Bilder sind auf den meisten Seiten der größte Datenposten. Welche Formate sich lohnen, wie Sie Größen und verzögertes Laden steuern und wie gute Alternativtexte entstehen.

12 Min. Lesezeit BilderAlternativtextLadezeitBarrierefreiheit

Auf den meisten Unternehmensseiten sind Bilder der größte Datenposten. Sie bestimmen, wie schwer eine Seite wiegt, wann der Hauptinhalt sichtbar wird und ob das Layout beim Laden ruhig bleibt oder springt. Gleichzeitig sind Bilder die Stelle, an der Barrierefreiheit am häufigsten scheitert: Ohne Alternativtext bleibt eine Information für Menschen unzugänglich, die einen Screenreader nutzen oder Bilder abgeschaltet haben. Beides hängt zusammen, denn beides entscheidet sich im selben Moment, nämlich beim Einpflegen. Dieser Artikel zeigt, welche Formate heute sinnvoll sind, wie Sie Auflösungen und Dateigrößen in den Griff bekommen, wann verzögertes Laden hilft und wann es schadet, wie feste Seitenverhältnisse Layoutsprünge verhindern und wie ein Alternativtext aussieht, der Menschen wie Suchmaschinen tatsächlich weiterhilft.

Bilder ausliefern: Formate, Größen, Alternativtexte Ein Original, mehrere Varianten, ein aussagekräftiger Alternativtext Ein Original, mehrere Varianten Original 3000 x 2000 px 480 px | AVIF | Mobil 960 px | AVIF | Tablet 1600 px | AVIF | Desktop Browser wählt passende Variante über srcset Ein Alternativtext gilt für alle Varianten alt="Monteurin prüft eine Heizungsanlage im Heizraum" Alternativtexte im Web 16,2 % aller Bilder ohne Alternativtext 10,8 % Text fragwürdig oder wiederholt Quelle: WebAIM Million Formatanteile bei Bildern im mobilen Web JPEG 32,4 % PNG 28,4 % GIF 16,8 % WebP 12 % SVG 6,4 % AVIF: 1,0 % Ältere Formate dominieren, obwohl moderne Formate für dieselbe Bildwirkung weniger Bytes brauchen 33 % der Seiten laden Bilder verzögert 32 % der Bilder mit Breite und Höhe 42 % der Seiten nutzen srcset Quelle: HTTP Archive Web Almanac

Warum Bilder der größte Datenposten sind

Wer die Ladezeit einer Website senken will, sollte zuerst dorthin schauen, wo das meiste Gewicht liegt. Auf einer mobil abgerufenen Startseite entfallen im Median rund 900 Kilobyte (HTTP Archive Web Almanac) allein auf Bilder — deutlich mehr als auf Stylesheets und Schriften zusammen. Noch wichtiger als die reine Datenmenge ist die Rolle, die Bilder beim sichtbaren Aufbau spielen: In 68 Prozent (HTTP Archive Web Almanac) der Fälle ist das größte sichtbare Element einer Seite ein Bild. Der Moment, in dem eine Seite für Besucher fertig wirkt, hängt damit unmittelbar davon ab, wie schnell dieses eine Bild übertragen, dekodiert und gezeichnet ist. Für Unternehmen ist das keine Randnotiz, denn rund 89 Prozent (Statistisches Bundesamt) der Unternehmen mit Internetzugang betreiben eine eigene Website und konkurrieren dort um Aufmerksamkeit, die sich in Sekunden entscheidet. Wie stark die Art der Auslieferung mitspielt, haben wir im Beitrag zu PageSpeed und statischer Auslieferung beschrieben. Die Bildfrage kommt ohnehin obendrauf: Selbst eine Seite, die in wenigen Millisekunden vom Server kommt, wartet anschließend auf ein Foto, das mit voller Kameraauflösung eingebunden wurde. Genau an dieser Stelle setzen unsere Leistungen rund um Aufbau und Betrieb an, weil Bildverarbeitung dorthin gehört, wo die Seite entsteht, und nicht in die manuelle Nacharbeit.

  • Übertragungszeit: Jedes überflüssige Kilobyte verlängert die Wartezeit besonders in schwachen Mobilfunknetzen
  • Rechenzeit: Große Bilder müssen dekodiert und skaliert werden, was auf älteren Geräten spürbar Zeit kostet
  • Speicher: Ein Foto mit 4000 Pixel Breite belegt im Browser ein Vielfaches des Speichers einer 800 Pixel breiten Variante
  • Prioritäten: Bilder konkurrieren mit Schriften und Stylesheets um dieselbe begrenzte Bandbreite
  • Stabilität: Bilder ohne reservierten Platz verschieben Text, sobald sie eintreffen
  • Datenvolumen: Bei Tarifen mit begrenztem Volumen zahlen Besucher jedes zusätzliche Megabyte mit

Bildgewicht wirkt zweifach

Ein zu großes Bild kostet nicht nur Übertragungszeit, sondern auch Rechenzeit auf dem Gerät. Ein Foto mit vier Megapixeln muss dekodiert, in den Speicher gelegt und auf die Anzeigegröße skaliert werden, bevor es erscheint. Auf einem drei Jahre alten Mittelklasse-Telefon summiert sich das über mehrere Bilder hinweg zu einer spürbaren Verzögerung. Deshalb ist die passende Ausgabegröße in der Regel wirksamer als jede zusätzliche Kompressionsstufe am Originalbild.

Welche Bildformate heute sinnvoll sind

Die Formatlandschaft ist überschaubarer, als sie wirkt. Trotzdem hält sich der Bestand hartnäckig: Im mobilen Web entfallen 32,4 Prozent (HTTP Archive Web Almanac) der ausgelieferten Bilder auf JPEG und 28,4 Prozent (HTTP Archive Web Almanac) auf PNG, während das schlankere WebP bei 12 Prozent (HTTP Archive Web Almanac) liegt und AVIF erst 1,0 Prozent (HTTP Archive Web Almanac) erreicht. Das ist bemerkenswert, weil moderne Formate bei vergleichbarer Bildwirkung erfahrungsgemäß erheblich weniger Bytes benötigen. Der Grund für die Trägheit ist selten technischer Natur: Wer Bilder von Hand hochlädt, nimmt das Format, das die Kamera oder das Grafikprogramm ausgibt. Wird die Umwandlung dagegen automatisch beim Einpflegen erledigt, verschwindet die Frage aus dem Alltag. Wichtig ist dabei die Rückfallebene: Ein Browser, der AVIF nicht kennt, muss ein Bild bekommen, das er darstellen kann. Genau dafür gibt es das picture-Element mit mehreren Quellen. Ebenso wichtig wie die Formatwahl ist die Qualitätsstufe beim Umwandeln: Oberhalb eines bestimmten Punktes wächst die Dateigröße weiter, während der sichtbare Gewinn ausbleibt, und unterhalb davon fransen Kanten und Farbverläufe erkennbar aus. Sinnvoll ist deshalb, die Stufe einmal an typischen Motiven zu prüfen und anschließend fest einzustellen, statt sie bei jedem Bild neu zu schätzen. Ein zweiter Punkt betrifft die Herkunft der Dateien: Aufnahmen direkt aus der Kamera enthalten häufig eingebettete Vorschaubilder, Farbprofile und Zusatzdaten, die für die Darstellung im Browser keine Rolle spielen und beim Umwandeln entfallen können. Wie dieser Ablauf im Aufbau einer Seite verankert wird, zeigt unsere Übersicht dazu, wie eine Website mit XICflow entsteht. Für Logos, Symbole und einfache Grafiken bleibt SVG die sinnvollste Wahl, weil es unabhängig von der Auflösung scharf bleibt und meist nur wenige Kilobyte wiegt.

FormatStärkeTypischer EinsatzHinweis
AVIFSehr gute Kompression bei FotosGroßflächige Fotos, HintergründeRückfallebene für ältere Browser einplanen
WebPGute Kompression, breite UnterstützungFotos, Vorschaubilder, GalerienSolide Wahl, wenn AVIF nicht passt
JPEGÜberall darstellbarRückfallebene für FotosOhne Transparenz, sichtbare Artefakte bei starker Kompression
PNGVerlustfrei, mit TransparenzBildschirmfotos, Grafiken mit harten KantenFür Fotos meist unnötig schwer
SVGAuflösungsunabhängig, sehr kleinLogos, Symbole, DiagrammeVor dem Einbinden von Skriptanteilen befreien
GIFWeit verbreitet, animierbarKurze Animationen im BestandFür Bewegtbild ist ein Videoformat sparsamer

Modern zuerst, mit Rückfall

Das picture-Element liefert AVIF an Browser, die es unterstützen, und ein bewährtes Format an alle anderen. Der Aufwand entsteht einmal beim Aufbau und wirkt danach auf jeder Seite.

Vektor statt Pixel

Logos, Symbole und einfache Diagramme gehören als SVG in die Seite. Sie bleiben auf jedem Bildschirm scharf, lassen sich per CSS einfärben und wiegen in der Regel nur einen Bruchteil einer Pixelgrafik.

Kein Text im Pixelbild

Text, der als Bild eingebunden wird, ist weder markierbar noch durchsuchbar und skaliert schlecht. Überschriften und Preisangaben gehören in das HTML, nicht in eine Grafikdatei.

Die richtige Auflösung ausliefern

Die häufigste Ursache für schwere Seiten ist kein falsches Format, sondern eine falsche Größe. Ein Foto, das in der Seite 640 Pixel breit dargestellt, aber mit 4000 Pixel Breite ausgeliefert wird, verschwendet den größten Teil seiner Daten. Die Werkzeuge dagegen sind seit Jahren vorhanden: 42 Prozent (HTTP Archive Web Almanac) der Seiten setzen inzwischen srcset ein, das dem Browser mehrere Größen zur Auswahl stellt, und 9,3 Prozent (HTTP Archive Web Almanac) nutzen zusätzlich das picture-Element für Formatvarianten. Zur Orientierung: Das Median-Bild im Web wiegt 12 Kilobyte (HTTP Archive Web Almanac), das größte Bild einer Seite im Median 135 Kilobyte (HTTP Archive Web Almanac). Wer deutlich darüber liegt, hat meist ein Größenproblem und kein Kompressionsproblem. Praktisch bedeutet das: Für jede Bildposition im Layout wird die maximale Anzeigebreite bestimmt, daraus werden zwei bis vier Varianten abgeleitet, und der Browser wählt anhand von Bildschirmbreite und Pixeldichte die passende aus. In unseren Demoseiten sehen Sie, wie unterschiedlich diese Breiten je nach Block ausfallen: Ein Bühnenbild über die volle Breite braucht andere Varianten als ein Vorschaubild in einem dreispaltigen Raster.

  1. Maximale Anzeigebreite jeder Bildposition im Layout bestimmen, getrennt für Mobilgeräte und Desktop
  2. Diese Breite verdoppeln, um Bildschirme mit hoher Pixeldichte abzudecken, und daraus die größte Variante ableiten
  3. Zwei bis vier Stufen festlegen, zum Beispiel 480, 960 und 1600 Pixel Breite
  4. Jede Stufe in einem modernen Format und in einer Rückfallebene erzeugen
  5. Die Auswahl über srcset und sizes beschreiben, damit der Browser die passende Datei anfordert
  6. Das Ergebnis auf einem echten Mobilgerät prüfen und die tatsächlich geladene Dateigröße kontrollieren
Auszug: responsive Einbindung mit AVIF und Rückfallebene
<!-- Der Browser wählt Format und Größe selbst aus -->
<picture>
  <source type="image/avif"
          srcset="/bilder/werkstatt-480.avif   480w,
                  /bilder/werkstatt-960.avif   960w,
                  /bilder/werkstatt-1600.avif 1600w"
          sizes="(min-width: 1024px) 640px, 100vw">
  <img src="/bilder/werkstatt-960.jpg"
       srcset="/bilder/werkstatt-480.jpg   480w,
               /bilder/werkstatt-960.jpg   960w,
               /bilder/werkstatt-1600.jpg 1600w"
       sizes="(min-width: 1024px) 640px, 100vw"
       width="1600" height="900"
       alt="Monteurin prüft eine Heizungsanlage im Heizraum"
       loading="lazy" decoding="async">
</picture>

<!-- Das erste sichtbare Bild bekommt Vorrang statt Verzögerung -->
<img src="/bilder/empfang-1600.avif" width="1600" height="900"
     alt="Empfangstresen im Eingangsbereich der Praxis"
     fetchpriority="high" decoding="async">

Pixeldichte ist kein Grund für Riesenbilder

Bildschirme mit hoher Pixeldichte brauchen mehr Bildpunkte, aber nicht beliebig viele. Der Sprung von einfacher auf doppelte Dichte ist deutlich sichtbar, der Schritt darüber hinaus kaum noch. Für ein Bild, das höchstens 640 Pixel breit dargestellt wird, reicht deshalb in der Regel eine größte Variante um 1280 Pixel. Alles darüber erhöht die Datenmenge quadratisch, ohne dass jemand den Unterschied bemerkt. Wer das einmal sauber festlegt, spart auf jeder Unterseite Bytes, ohne an der Bildqualität zu sparen.

Verzögertes Laden mit Augenmaß

Verzögertes Laden verschiebt das Anfordern eines Bildes, bis es in die Nähe des Sichtfensters rückt. Das ist sinnvoll für alles, was weiter unten auf der Seite liegt, und inzwischen weit verbreitet: 33 Prozent (HTTP Archive Web Almanac) der Seiten setzen die entsprechende Angabe ein. Genau hier entsteht allerdings auch ein verbreiteter Fehler. Bei 9,5 Prozent (HTTP Archive Web Almanac) der Seiten wird ausgerechnet das größte sichtbare Element verzögert geladen — also jenes Bild, auf das die Ladezeitmessung wartet. Der Browser darf es dann erst anfordern, nachdem er das Layout berechnet hat, und verliert dabei wertvolle Zeit. Die Regel ist deshalb einfach: Was beim Aufruf sofort im Sichtfeld steht, wird bevorzugt geladen; alles darunter wird verzögert. Bei Bildstrecken in Beiträgen zahlt sich das besonders aus, weil dort viele Bilder untereinander stehen, von denen anfangs nur eines sichtbar ist. Wie sich das im redaktionellen Alltag auswirkt, zeigt unser Beitrag dazu, ob sich ein Blog für kleine Unternehmen lohnt. Ergänzend hilft die Angabe zur Dekodierung, damit das Zeichnen der Seite nicht blockiert wird, während ein großes Bild im Hintergrund entpackt wird. Zwei Sonderfälle werden dabei leicht übersehen: Hintergrundbilder, die über CSS eingebunden sind, tauchen im HTML gar nicht auf und lassen sich weder verzögern noch bevorzugt anfordern. Bestimmt ein solches Bild den sichtbaren Aufbau, gehört es besser als echtes Bildelement in die Seite. Und Vorschaubilder eingebetteter Videos zählen ebenfalls als Bild: Sie werden häufig in voller Auflösung geladen, obwohl sie zunächst nur als Standbild dienen.

Das erste sichtbare Bild nicht verzögern

Bühnenbilder, Logos im Kopfbereich und das erste Motiv einer Startseite sollten ohne Verzögerung geladen werden, idealerweise mit erhöhter Priorität. Wird die Verzögerung pauschal auf alle Bilder gesetzt, verschlechtert sich der wichtigste Ladezeitwert messbar, obwohl die Maßnahme als Optimierung gedacht war. Prüfen Sie deshalb nach jeder Änderung, welches Element tatsächlich als größtes sichtbares Element gemessen wird.

Feste Seitenverhältnisse gegen Layoutsprünge

Wenn Text beim Laden nach unten rutscht, weil ein Bild nachträglich Platz beansprucht, spricht man von Layoutverschiebung. Für Besucher ist das ärgerlich, weil sie im ungünstigsten Fall auf etwas tippen, das im Moment des Tippens nicht mehr an derselben Stelle steht. Technisch ist die Lösung seit Langem bekannt und trotzdem selten umgesetzt: Nur 32 Prozent (HTTP Archive Web Almanac) der Bilder tragen die Attribute für Breite und Höhe. Dabei genügen genau diese beiden Angaben, damit der Browser das Seitenverhältnis kennt und den Platz reserviert, bevor die Bilddaten eintreffen. Ergänzend lässt sich in CSS ein festes Verhältnis für Bildflächen in Karten und Rastern setzen, sodass unterschiedlich zugeschnittene Fotos dieselbe Fläche einnehmen. Der Zielwert für Layoutstabilität liegt bei 0,1 (HTTP Archive Web Almanac) und wird mit reservierten Bildflächen erfahrungsgemäß ohne besondere Mühe eingehalten. Warum dieser Wert neben Ladezeit und Reaktionsfähigkeit zu den zentralen Kennzahlen gehört, ordnet unser Beitrag zur statischen Auslieferung und den Core Web Vitals ein. Dasselbe Prinzip gilt für alles andere, was nachträglich Platz beansprucht: eingebettete Inhalte, Werbeflächen oder ein Einwilligungsbanner. Wird die Fläche vorher reserviert, bleibt der Text an seinem Platz, auch wenn der Inhalt erst später eintrifft.

Platz reservieren: Maßangaben und Seitenverhältnis
/* Maßangaben im HTML lassen den Browser Platz reservieren */
img {
  max-width: 100%;
  height: auto;           /* hält das Seitenverhältnis */
}

/* Bildflächen in Karten und Rastern fest verhältnisgebunden */
.karte__bild {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;      /* Ausschnitt statt Verzerrung */
  background: #eef5f3;    /* ruhige Fläche vor dem Laden */
}

/* Porträts im Team-Raster bekommen ein eigenes Verhältnis */
.team__portraet {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
}

Ein Bild ohne reservierten Platz ist kein Gestaltungselement, sondern eine angekündigte Layoutverschiebung.

Alternativtexte, die tatsächlich weiterhelfen

Der Alternativtext ist die Textfassung eines Bildes. Er wird vorgelesen, wenn jemand einen Screenreader nutzt, er erscheint, wenn ein Bild nicht geladen werden kann, und er ist für Suchmaschinen der wichtigste Hinweis auf den Bildinhalt. Die Praxis sieht nüchtern aus: Auf 53,1 Prozent (WebAIM Million) der untersuchten Startseiten finden sich Bilder ohne Alternativtext, insgesamt fehlt er bei 16,2 Prozent (WebAIM Million) aller Bilder. Bei den vorhandenen Texten sind zusätzlich 10,8 Prozent (WebAIM Million) fragwürdig oder wiederholt, etwa Dateinamen, das Wort Bild oder eine Kopie der Bildunterschrift. Bei durchschnittlich 66,6 Bildern (WebAIM Million) je Startseite summiert sich das zu einer Menge unzugänglicher Information. Die Anforderung selbst ist eindeutig: Nicht-Text-Inhalte brauchen eine Textalternative, festgehalten im Erfolgskriterium 1.1.1 der Richtlinien (W3C, WCAG 2.2). Seit dem 28. Juni 2025 (Bundesfachstelle Barrierefreiheit) gelten die Vorgaben des Barrierefreiheitsstärkungsgesetzes für einen großen Teil der digitalen Angebote im geschäftlichen Verkehr; was genau darunterfällt und welche Ausnahmen es gibt, haben wir im Beitrag zu BFSG und WCAG 2.2 AA aufgeschlüsselt. Der Nebeneffekt ist angenehm: Ein präziser Alternativtext beschreibt den Bildinhalt in Worten, die auch in der Bildsuche zählen. Zusammen mit sauber ausgezeichneten Seiteninhalten, wie sie unser Beitrag zu strukturierten Daten in Suchergebnissen beschreibt, entsteht daraus ein Bild Ihrer Seite, das Maschinen auswerten können. Wichtig ist die Unterscheidung zwischen inhaltstragenden und rein dekorativen Bildern: Ein Foto, das eine Aussage transportiert, braucht eine Beschreibung; eine Hintergrundfläche ohne Informationswert bekommt ein leeres alt-Attribut und wird damit bewusst übersprungen, statt Vorlesesoftware mit Rauschen zu belasten.

BildsituationSchwacher AlternativtextBesserer Alternativtext
Foto eines Monteurs bei der ArbeitIMG_20240718.jpgMonteur tauscht ein Heizungsventil im Keller aus
Teamporträt auf der Über-uns-SeiteBildSandra Berger, Leiterin der Kundenberatung
Logo als Link zur StartseiteLogoStartseite der Tischlerei Nordlicht
Diagramm mit MesswertenDiagrammLadezeit sinkt von 4,1 auf 1,3 Sekunden nach der Umstellung
Dekorative HintergrundflächeHintergrundbild abstrakt grünLeeres alt-Attribut, das Bild wird übersprungen
Produktfoto im Shop-RasterProdukt 1 von 12Eichentisch geölt, 180 mal 90 Zentimeter
  • Beschreiben Sie, was auf dem Bild zu sehen ist, nicht dass es sich um ein Bild handelt
  • Halten Sie sich kurz: ein bis zwei Sätze reichen in den meisten Fällen aus
  • Nennen Sie den Zweck, wenn das Bild ein Link oder eine Schaltfläche ist
  • Verzichten Sie auf Formulierungen wie Foto von oder Grafik zeigt
  • Geben Sie bei Diagrammen die Kernaussage wieder, nicht jede einzelne Zahl
  • Setzen Sie bei rein dekorativen Bildern ein leeres alt-Attribut
  • Vermeiden Sie es, die Bildunterschrift wörtlich zu wiederholen
  • Prüfen Sie Alternativtexte bei jedem Bildtausch erneut, nicht nur beim ersten Einpflegen

Bild als Link

Ist ein Bild gleichzeitig ein Link, beschreibt der Alternativtext das Ziel und nicht das Motiv. Bei einem Logo im Kopfbereich lautet er daher sinngemäß Startseite und Firmenname.

Diagramm und Infografik

Kurz die Aussage benennen, die das Diagramm belegen soll. Die vollständigen Werte gehören in eine Tabelle oder in den Fließtext direkt darunter, wo sie sich auch kopieren lassen.

Dekoratives Beiwerk

Trennlinien, Verläufe und stimmungsgebende Flächen tragen keine Information. Sie bekommen ein leeres alt-Attribut, damit Vorlesesoftware sie überspringt, statt Dateinamen vorzulesen.

Text im Bild

Enthält eine Grafik geschriebenen Text, muss dieser vollständig in den Alternativtext. Besser ist es, den Text als echtes HTML über oder neben das Bild zu setzen.

Porträts

Bei Personen genügen Name und Funktion, sofern das Aussehen keine Rolle spielt. Steht das Bild in einem Zusammenhang, in dem die Tätigkeit zählt, wird diese ergänzt.

Galerien und Raster

In Bildstrecken braucht jedes Motiv einen eigenen Text. Durchnummerierte Platzhalter helfen niemandem und werden von Prüfwerkzeugen als fragwürdig eingestuft.

Bildrechte und Herkunft im Blick behalten

Bilder sind urheberrechtlich geschützt, und zwar unabhängig davon, wie leicht sie sich im Netz finden lassen. Wer ein fremdes Foto ohne Nutzungsrecht einbindet, riskiert Abmahnkosten und Schadenersatz — auch dann, wenn es unbeabsichtigt geschah oder das Bild schnell wieder entfernt wird. Sauber ist deshalb nur ein dokumentierter Weg: eigene Aufnahmen, beauftragte Fotografie mit schriftlich geregelten Nutzungsrechten oder lizenzierte Bilder mit archiviertem Lizenznachweis. Achten Sie dabei auf den Umfang der Rechte, denn eine Lizenz für eine Website deckt nicht zwingend Druckerzeugnisse oder soziale Netzwerke ab, und manche Lizenzen verlangen eine Urhebernennung an sichtbarer Stelle. Sind Personen erkennbar abgebildet, kommt das Recht am eigenen Bild hinzu; hier ist eine Einwilligung nötig, die den Verwendungszweck benennt und widerrufbar bleibt. Bei Mitarbeiterfotos gehört diese Einwilligung in die Personalunterlagen und sollte beim Ausscheiden erneut geprüft werden. Auch KI-generierte Bilder entbinden nicht von Sorgfalt: Sie können geschützte Marken, erkennbare Gebäude oder verwechselbare Gesichter enthalten, und ihre Verwendung sollte dokumentiert werden. Welche Angaben rund um Verantwortlichkeit und Datenverarbeitung ohnehin auf jede Seite gehören, beschreibt unser Beitrag zu Impressum und Datenschutzerklärung. Hilfreich ist außerdem eine schlichte Ordnung bei den Dateinamen: Sprechende Namen wie werkstatt-heizungswartung.jpg statt IMG_4711.jpg erleichtern die Zuordnung im Team, beschleunigen die Suche im Bestand und geben Suchmaschinen einen zusätzlichen Hinweis auf den Bildinhalt. Den Alternativtext ersetzen sie deshalb noch nicht.

  • Herkunft je Bild festhalten: eigene Aufnahme, Auftragsarbeit oder Lizenz mit Nummer und Datum
  • Umfang der Nutzungsrechte notieren, insbesondere Laufzeit, Medien und Bearbeitungserlaubnis
  • Geforderte Urhebernennungen an der vorgesehenen Stelle einbauen und bei Relaunches mitnehmen
  • Einwilligungen für erkennbar abgebildete Personen schriftlich einholen und ablegen
  • Bei KI-generierten Motiven Werkzeug, Zeitpunkt und Verwendungszweck dokumentieren
  • Standortdaten und Kameradaten aus den Metadaten entfernen, bevor Bilder veröffentlicht werden
  • Beim Austausch eines Bildes den alten Nachweis archivieren, statt ihn zu überschreiben

Wie XICflow Bilder ausliefert und Alternativtexte pflegt

In XICflow wird ein Bild einmal in die Medienverwaltung geladen und danach in mehreren Größen und in einem modernen Format bereitgestellt. Beim Erzeugen der Seiten entsteht daraus die passende Einbindung: Varianten für unterschiedliche Bildschirmbreiten, eine Rückfallebene für ältere Browser, feste Maßangaben für die Platzreservierung und die Entscheidung, ob ein Bild bevorzugt oder verzögert geladen wird. Weil die Seiten statisch ausgeliefert werden, entsteht dieser Aufwand beim Erzeugen und nicht bei jedem Aufruf. Für den Alternativtext bietet die Medienverwaltung ein eigenes Feld je Bild, das gemeinsam mit dem Titel gepflegt wird und in allen Einbindungen desselben Bildes greift. Auf Wunsch schlägt die KI-Bilderkennung einen Beschreibungstext vor, den Sie übernehmen, kürzen oder ersetzen können — die redaktionelle Entscheidung bleibt bei Ihnen, weil nur Sie den Zusammenhang der Seite kennen. Fehlende Alternativtexte lassen sich in der Übersicht filtern, sodass Lücken sichtbar werden, bevor sie in einer Prüfung auffallen. Bei mehrsprachigen Seiten wird der Alternativtext je Sprache gepflegt, damit die Beschreibung zur jeweiligen Fassung passt. Was das im Leistungsumfang bedeutet, zeigen unsere Preise und Leistungsstufen; wie sich der Ansatz von klassischer Handarbeit unterscheidet, ordnet der Vergleich der Vorgehensweisen ein. Beim Veröffentlichen entsteht daraus ein einheitliches Markup über alle Seiten hinweg, sodass Bildeinbindungen nicht je nach Entstehungszeitpunkt einer Unterseite unterschiedlich ausfallen.

Varianten beim Erzeugen

Aus einem Original entstehen mehrere Ausgabegrößen in einem modernen Format samt Rückfallebene. Die Auswahl übernimmt der Browser, ohne dass jemand Dateien von Hand skalieren muss.

Maße fest im Markup

Breite und Höhe stehen an jedem Bild, Bildflächen in Karten und Rastern sind verhältnisgebunden. Der Platz ist reserviert, bevor die Bilddaten eintreffen.

Alternativtext je Bild

Ein Feld in der Medienverwaltung versorgt alle Einbindungen desselben Bildes. Änderungen wirken damit auf jeder Seite, auf der das Motiv verwendet wird.

Vorschlag per KI-Bilderkennung

Auf Wunsch entsteht ein Beschreibungsvorschlag aus dem Bildinhalt. Er ist als Entwurf gedacht und wird redaktionell geprüft, bevor er veröffentlicht wird.

Lücken sichtbar machen

Bilder ohne Alternativtext lassen sich in der Übersicht filtern. So wird aus einer unbestimmten Menge eine überschaubare Aufgabenliste.

Mehrsprachig gepflegt

Je Sprachfassung ein eigener Alternativtext, damit Beschreibung und Seiteninhalt zusammenpassen. Das gilt ebenso für Bildtitel und Bildunterschriften.

Ein Prüfplan für Ihren Bildbestand

  1. Alle Seiten aufrufen und notieren, welches Bild jeweils das größte sichtbare Element ist
  2. Für diese Bilder die Verzögerung abschalten und stattdessen eine hohe Priorität setzen
  3. Die tatsächlich geladenen Dateigrößen prüfen und Ausreißer über 200 Kilobyte gezielt ansehen
  4. Anzeigebreiten je Bildposition ermitteln und daraus zwei bis vier Varianten festlegen
  5. Fotos in ein modernes Format überführen und eine Rückfallebene hinterlegen
  6. Fehlende Breiten- und Höhenangaben ergänzen und Bildflächen verhältnisgebunden setzen
  7. Alternativtexte durchgehen, Dateinamen und Platzhalter ersetzen, dekorative Bilder leer setzen
  8. Herkunft und Lizenz je Bild dokumentieren und fehlende Nachweise nachfordern
  9. Nach der Umstellung erneut messen und das Ergebnis mit dem Ausgangswert vergleichen
Dieser Artikel basiert auf Daten aus: HTTP Archive Web Almanac, WebAIM Million, W3C (WCAG 2.2), Bundesfachstelle Barrierefreiheit und Statistisches Bundesamt.