Bilder laden nicht immer
Es passiert häufiger, als man denkt: Ein Bild lädt nicht — und statt des Motivs erscheint das hässliche kaputte-Bild-Symbol. Die Gründe sind vielfältig und oft außerhalb der eigenen Kontrolle:
- falscher, umbenannter oder gelöschter Pfad
- ein fremder Server (Hotlink), der das Bild entfernt oder gesperrt hat
- langsame oder abgebrochene Verbindung
- Tippfehler in der URL
Gerade bei Bildern von Drittanbietern hat man keine Garantie, dass sie dauerhaft verfügbar bleiben. Deshalb lohnt es, den Fehlerfall bewusst zu gestalten, statt ihn dem Zufall zu überlassen.
Stufe 1: der alt-Text als Basis-Schutz
Der einfachste und wichtigste Fallback kostet nichts: ein guter alt-Text. Lädt das Bild nicht, zeigt der Browser statt des kaputten Symbols den Alternativtext an — der beschreibt, was zu sehen sein sollte:
<img src="/produkt.jpg" alt="Blaue Kaffeetasse mit Henkel">Damit ist schon viel gewonnen: Der Nutzer erfährt, worum es ging, statt vor einem leeren Kasten zu sitzen. Und derselbe alt-Text dient blinden Nutzern und der Bildersuche — ein Aufwasch.
Stufe 2: ein Ersatzbild per onerror
Wenn statt Text ein echtes Ersatzbild erscheinen soll (ein neutraler Platzhalter, ein Standard-Produktbild), nutzt man das onerror-Ereignis des img-Elements: Es feuert, wenn das Laden fehlschlägt, und schaltet dann auf ein Ersatzbild um. Wichtig ist, dass dieser Fallback selbst zuverlässig lädt (am besten ein kleines, lokales Bild) — sonst kann eine Schleife entstehen, in der auch das Ersatzbild fehlschlägt. Deshalb setzt man den Handler so, dass er nur einmal greift.
Stufe 3: Platzhalter beim Laden
Ein verwandtes Thema ist der Moment während des Ladens. Statt einer leeren Lücke zeigt man eine leichte Vorschau, bis das echte Bild da ist:
- Einfarbige Fläche in der Durchschnittsfarbe des Bildes.
- Unscharfes Miniaturbild (ein winziges, verwischtes Vorschaubild), das scharf nachlädt.
- Umriss / Skelett als grauer Platzhalter.
Damit dabei nichts springt, gehören — wie immer bei Bildern — widthund height ans Element, damit der Platz reserviert ist (siehe Layout Shift vermeiden). Der Platzhalter füllt genau diesen reservierten Raum, bis das Bild ihn ablöst.
Warum das mehr ist als Kosmetik
Ein sauberer Umgang mit nicht ladenden Bildern ist kein reiner Schönheitsfaktor:
- Barrierefreiheit: Der alt-Text hält die Seite auch dann verständlich, wenn Bilder fehlen.
- Vertrauen: Kaputte Bilder wirken wie eine vernachlässigte Seite.
- Robustheit: Gerade bei Inhalten von Dritten ist der Ausfall eines Bildes eine Frage des Wann, nicht des Ob.
Die Reihenfolge zum Merken: immer alt-Text (Basis), bei Bedarf Ersatzbild (onerror), und für den Ladevorgang Platzhalter mit reserviertem Platz. Drei kleine Schritte, und das kaputte-Bild-Symbol taucht auf deiner Seite nie mehr auf.
Häufige Fragen
Warum lädt ein Bild manchmal nicht?
Häufige Gründe: falscher oder veralteter Pfad, gelöschte Datei, ein fremder Server (Hotlink), der das Bild entfernt hat, eine langsame oder abgebrochene Verbindung, oder ein Tippfehler in der URL. Bei Bildern von Drittanbietern hat man keine Kontrolle darüber, ob sie verfügbar bleiben.
Was ist der einfachste Fallback für ein kaputtes Bild?
Ein guter alt-Text: Lädt das Bild nicht, zeigt der Browser den Alternativtext an — der beschreibt, was zu sehen sein sollte. Das ist der Basis-Schutz und zugleich für die Barrierefreiheit wichtig. Ohne alt-Text erscheint nur das leere kaputte-Bild-Symbol.
Wie ersetze ich ein nicht ladendes Bild durch ein Ersatzbild?
Über das onerror-Ereignis des img-Elements: Schlägt das Laden fehl, kann man per JavaScript auf ein Platzhalter- oder Standardbild umschalten. Wichtig ist, dass der Fallback selbst zuverlässig lädt, sonst entsteht eine Endlosschleife.
Was ist ein Bild-Platzhalter?
Eine leichte Vorschau, die schon angezeigt wird, bevor das echte Bild geladen ist — etwa eine einfarbige Fläche, ein unscharfes Miniaturbild oder ein Umriss. Das verhindert leere Lücken beim Laden und ein Springen des Layouts, wenn zusätzlich width und height gesetzt sind.