Bilder: der Bereich, in dem drei Themen gleichzeitig hängen

Worum es geht

Bilder sind der einzige Bereich einer Website, an dem Barrierefreiheit, Ladezeit und Suchmaschinenoptimierung an denselben Stellschrauben hängen. Fünf Dinge werden dabei betrachtet:

Der Alt-Text — die Textbeschreibung für Menschen, die das Bild nicht sehen können. Die Dateigröße. Das Format. Die Angabe von Breite und Höhe im HTML. Und ob ein Bild verzögert geladen wird oder sofort.

Warum das zählt

Der Alt-Text ist im <img>-Tag neben dem Dateipfad das einzige Pflichtelement (Rheinwerk, Barrierefreie Webseiten, Kap. 7.3). Screenreader geben ihn statt des Bildes aus. Die Leitregel dafür lautet: so kurz wie möglich, so lang wie nötig.

Zwei Fragen entscheiden bei jedem Bild: Ist es dekorativ oder für das Verständnis nötig? Und wenn es nötig ist — welche Information trägt es? Ein dekoratives Bild bekommt ein leeres Alt-Attribut (alt=""). Wichtig ist der Unterschied: leer, aber vorhanden. Ein ganz fehlendes Alt-Attribut ist etwas anderes als ein leeres, und nur das leere sagt „hier gibt es nichts vorzulesen".

Bei Bildern, die als Link oder Button dienen, beschreibt der Alt-Text nicht das Bild, sondern die Funktion: alt="Zum Kontaktformular" ist richtig, alt="Briefumschlag-Symbol" nicht.

Als Länge sind 100 bis 125 Zeichen ein guter Ausgangspunkt (Rheinwerk, Barrierefreie Webseiten, Kap. 7.3). Telemetriedaten aus 40 Shops zeigen, dass 60 bis 90 Zeichen sogar besser abschneiden als die übliche „nutze alle 125 Zeichen"-Konvention. Keyword-Stuffing im Alt-Text ist kontraproduktiv — für die Barrierefreiheit sowieso, für das Ranking auch.

Beim Gewicht ist die Lage einfacher. Bilder sind auf den meisten Websites der größte Anteil der übertragenen Daten. In einer Auswertung von über 300 Audits hatten 82 Prozent der Websites Bildprobleme: fehlende Alt-Texte oder Dateien über 100 KB. Als Orientierung: Ein Hero-Bild sollte 150 KB nicht überschreiten, absolute Obergrenze rund 200 KB; Bilder im Fließtext nach AVIF-Konvertierung unter 100 KB.

Beim Format ist AVIF inzwischen der Standard: 30 bis 45 Prozent kleiner als WebP bei gleicher Qualität, 50 bis 70 Prozent kleiner als JPEG, und in 94 bis 95 Prozent der Browser weltweit unterstützt. WordPress kann AVIF seit Version 6.5 hochladen und verarbeiten.

Breite und Höhe im HTML anzugeben, verhindert das Springen des Layouts während des Ladens — das ist genau die Größe, die Google als Cumulative Layout Shift misst.

Und beim Lazy Loading gibt es eine Falle, die häufig übersehen wird: Das oberste Bild einer Seite darf niemals loading="lazy" bekommen. Es ist meistens genau das Element, dessen Ladezeit als Largest Contentful Paint gemessen wird — verzögertes Laden macht den wichtigsten Messwert schlechter, nicht besser. Für dieses eine Bild gehört stattdessen fetchpriority="high" gesetzt. Beides zu kombinieren, hebt sich gegenseitig auf.

Wie du das selbst prüfst

Für die Alt-Texte: In der WordPress-Mediathek kannst du jedes Bild anklicken und siehst das Alt-Text-Feld. Einmal gesetzt, wird der Text überall dort eingefügt, wo das Bild verwendet wird. Leere Felder bei inhaltlich wichtigen Bildern sind der Befund.

Für die Dateigröße: Öffne die Entwicklertools (F12), Reiter „Netzwerk", filtere auf „Img" und lade die Seite neu. Du siehst jede Bilddatei mit ihrer Größe. Sortiere absteigend — die obersten drei sind deine Baustelle.

Für die Gesamtsituation reicht ein Blick auf PageSpeed Insights. Die Meldungen „Bilder effizient codieren" und „Bilder richtig dimensionieren" zeigen genau die Dateien, bei denen sich Arbeit lohnt. Die zweite Meldung erscheint, wenn eine Datei mehr als das Vierfache der tatsächlich dargestellten Pixelbreite hat.

Für Lazy Loading: Quelltext öffnen und nach loading="lazy" suchen. Steht es beim ersten großen Bild der Seite, ist das der Fehler.

Was zu tun ist, wenn es fehlt

Pflege die Alt-Texte in der Mediathek nach — dort einmal, statt in jeder Verwendung einzeln. Beschreibe, was auf dem Bild zu sehen ist und warum es dort steht. Bei rein dekorativen Bildern setze bewusst ein leeres Alt-Attribut.

Konvertiere Bilder nach AVIF oder WebP. Ein Plugin oder ein CDN-Optimierer kann das automatisch beim Upload oder bei der Auslieferung erledigen.

Benenne Dateien vor dem Upload sinnvoll: gartenhaus-aus-laerche-grau.webp statt IMG_0023.JPG. Drei bis sechs Wörter, Bindestriche statt Unterstriche, kleingeschrieben, ohne Umlaute.

Setze Breite und Höhe auf allen <img>-Tags. In Etch und ACSS passiert das über die Bildkomponenten automatisch.

Und behandle das Hero-Bild als Sonderfall: kein Lazy Loading, dafür fetchpriority="high". WordPress setzt das seit Version 6.3 automatisch beim ersten größeren nicht-lazy Bild — bei Bildern, die in einer Komponente stecken, greift die Automatik allerdings nicht, und du musst es selbst setzen.

Quellen

• Alt-Text ist neben dem Dateipfad das einzige Pflichtelement im img-Tag; Leitregel „so kurz wie möglich, so lang wie nötig"; zwei Fragen je Bild (dekorativ oder verständnisnotwendig, welche Information); 100–125 Zeichen als Ausgangspunkt; Keyword-Stuffing kontraproduktiv; WordPress-Mediathek pflegt den Alt-Text zentral; funktionale Bilder beschreiben die Funktion -- @ctx:atlas-accessibility-rheinwerk-barrierefreie-webseiten-07-03-the-alt-attribute@1 -- Rheinwerk, Barrierefreie Webseiten, Kap. 7.3
• 82 % der Websites mit Bildproblemen (fehlende Alt-Texte, Dateien über 100 KB); WebP-Upload und Komprimierung; Alt-Text auf jedem Bild in der Mediathek; width und height auf allen img-Tags gegen CLS -- @ctx:atlas-seo-technical-audit@1
• AVIF 30–45 % kleiner als WebP und 50–70 % kleiner als JPEG, 94–95 % Browserunterstützung, WordPress Core 6.5 mit AVIF-Upload; Kompressionsschwellen 150 KB Ziel und ~200 KB Grenze für das Hero-Bild, ≤100 KB für Inhaltsbilder; „Bilder richtig dimensionieren" greift ab dem Vierfachen der dargestellten Pixel; niemals loading="lazy" auf dem Hero-Bild, stattdessen fetchpriority="high", Kombination beider hebt sich auf; WordPress Core 6.3 setzt fetchpriority automatisch, verfehlt aber komponentengekapselte Heroes; Dateinamen kurz, beschreibend, mit Bindestrichen, kleingeschrieben, ASCII; Alt-Text-Optimum 60–90 Zeichen laut ImageSEO-Telemetrie aus 40 Shops; funktionale Bilder beschreiben die Funktion -- @ctx:atlas-seo-practice-2026@3
• Informative Bilder mit beschreibendem Alt-Text, dekorative mit leerem (nie fehlendem) Alt-Attribut -- @ctx:atlas-accessibility-wcag22-checklist@1