Warum wird mein Bild auf der Website nicht angezeigt?

Ein Symbol für ein defektes Bild, eine leere Fläche und ein dauerhaft sichtbarer Platzhalter liefern unterschiedliche Hinweise. Die Datei kann fehlen, der Browser kann sie möglicherweise nicht darstellen oder die Seite blendet ein erfolgreich geladenes Bild aus.

Beginnen Sie mit einem betroffenen Bild. Für die ersten Prüfungen reichen Website-Editor und Browser. Der optionale Abschnitt für die Website-Verwaltung behandelt Anfragen, HTML, CSS und Sicherheitsmeldungen des Browsers.

Erscheint das Bild auf Ihrer Seite, aber nicht in den Suchergebnissen, hilft der Ratgeber zur Google-Bildersuche. Erscheint es erst nach langer Wartezeit, untersuchen Sie das langsame Laden von Bildern.

1. Beginnen Sie mit der veröffentlichten Seite

Öffnen Sie die öffentliche Seite statt der Editor-Vorschau. Prüfen Sie im Editor, ob das Bild ausgewählt, die Änderung gespeichert und die Seite veröffentlicht wurde. Notieren Sie, welche Bilder betroffen sind und ob der Fehler nach einem Upload, einer Neugestaltung oder einem Website-Umzug auftrat.

Testen Sie die öffentliche Seite auch in einem privaten Fenster. Ein anderes Ergebnis ist ein hilfreicher Hinweis. Allerdings können sich Anmeldestatus, gespeicherte Daten und Erweiterungen zwischen den Fenstern unterscheiden.

2. Finden und testen Sie die Bildadresse

Klicken Sie mit der rechten Maustaste auf das fehlende Bild oder sein Fehlersymbol. Suchen Sie nach Bild in neuem Tab öffnen oder Bildadresse kopieren. Bei Hintergrundbildern oder leeren Platzhaltern fehlen diese Optionen möglicherweise.

Sie können das Bild auch im Editor auswählen und seine Mediendetails öffnen. Kopieren Sie die Datei-URL, nicht die Adresse einer Anhangs- oder Cloud-Freigabeseite. Eine Freigabeseite zeigt das Bild eventuell innerhalb einer Downloadoberfläche oder verlangt eine Anmeldung.

Die öffentliche Seite verwendet möglicherweise ein Vorschaubild, einen mobilen Zuschnitt oder eine Kopie bei einem separaten Bilddienst. Finden Sie nur das Original in der Mediathek, nehmen Sie es als Ausgangspunkt. Die Network-Prüfung zeigt, welche Version die Seite tatsächlich anfordert.

Öffnen Sie die Bildadresse ohne Anmeldung in einem privaten Fenster und wählen Sie den nächsten Schritt:

• Das Bild öffnet sich: Fahren Sie mit den Sichtbarkeitsprüfungen auf der Seite fort. Finden Sie dort nichts, untersuchen Sie die tatsächliche Bildanfrage.
• Sie sehen einen Fehler, eine Anmeldeseite oder eine Zugriffswarnung: Prüfen Sie Dateipfad und Zugriff.
• Der Fehler tritt nur am Smartphone auf: Prüfen Sie mobile Versionen und Ladeverhalten, auch wenn das Original funktioniert.
• Der Browser lädt die Datei herunter: Prüfen Sie die Antwortheader. Download-Einstellungen können dieses Verhalten erklären, ohne zu belegen, ob das Bild auf der Seite funktioniert.

Ein erfolgreicher Test im neuen Tab bestätigt nur, dass die Datei in diesem Zusammenhang angezeigt werden kann. Die Seite kann eine andere Version anfordern oder auf eine Einbettungsbeschränkung stoßen.

3. Stellen Sie die Datei wieder her oder korrigieren Sie den Zugriff

Wenn die Datei fehlt oder die Adresse falsch ist

1. Suchen Sie das gewünschte Bild in der Mediathek. Vergleichen Sie seine Dateiadresse mit der fehlerhaften Adresse. Prüfen Sie Domain, Ordner, Dateinamen, Endung sowie Groß- und Kleinschreibung. Manche Server unterscheiden Photo.JPG von photo.jpg.
2. Ersetzen Sie die fehlerhafte Auswahl im betroffenen Bildblock oder Widget. Wählen Sie die vorhandene funktionierende Datei, speichern und veröffentlichen Sie. Wurde das Original gelöscht, laden Sie zuerst einen verlässlichen Ersatz hoch.
3. Öffnen Sie die öffentliche Seite erneut. Prüfen Sie, ob sie jetzt auf ein funktionierendes Bild verweist. Fordert sie weiterhin ein fehlendes Vorschaubild an, folgen Sie der Prüfung erzeugter Bildgrößen weiter unten.

Vergleichen Sie nach einem Website-Umzug neben dem Dateinamen auch den Bildserver. Die Seite verweist womöglich noch auf die alte Domain oder den alten Uploadordner. Für manuell geschriebene Pfade helfen die technischen Prüfungen.

Wenn das Original funktioniert, aber ein Vorschaubild fehlt

Ein erneuter Upload repariert nicht unbedingt eine Seite, die weiterhin auf die fehlende Version verweist. Geben Sie der zuständigen Person die URL des funktionierenden Originals und die des fehlenden Vorschaubilds. Bitten Sie darum, die fehlende Größe neu zu erzeugen und darauf verweisende Bildlisten zu aktualisieren. Das Network-Panel liefert die fehlerhafte URL und den Status.

Zum Beispiel: „Das Original öffnet sich, aber diese Seite fordert eine kleinere Version an, die 404 zurückgibt. Bitte stellen Sie diese Größe wieder her und prüfen Sie die responsiven Bildverweise der Seite.“ So benennen Sie die Reparatur, ohne die Werkzeuge zur Bilderzeugung der Plattform kennen zu müssen.

Wenn der Zugriff verweigert wird oder eine Anmeldung nötig ist

Klären Sie zunächst, ob das Bild öffentlich sein soll. Falls ja, verwenden Sie eine Datei, die über den regulären öffentlichen Medien-Upload Ihrer Website bereitgestellt wurde. Eine lokale file:///C:/...-Adresse, eine vorübergehende blob:-Vorschau oder ein privater Cloud-Freigabelink ist keine dauerhafte öffentliche Bildadresse.

Bei einer Antwort mit 401 oder 403 senden Sie dem Hoster die genaue fehlerhafte URL, die verwendende Seite und den Testzeitpunkt. Fragen Sie, welche Authentifizierungs- oder Auslieferungsregel die Anfrage abgelehnt hat. Mögliche Ursachen sind ablaufende Links und Hotlink-Schutz, der das Einbetten auf anderen Websites einschränkt. Korrigieren Sie die Regel oder verwenden Sie die unterstützte öffentliche Bild-URL des Anbieters. Behalten Sie die vorgesehenen Zugriffsbeschränkungen für private Dateien bei.

4. Prüfen Sie die Sichtbarkeit auf der Seite

Öffnet sich das Bild direkt, beginnen Sie mit seinen Einstellungen im Seiteneditor:

• Prüfen Sie das Bild und den übergeordneten Abschnitt. Suchen Sie nach Sichtbarkeitsoptionen wie „Auf Mobilgeräten ausblenden“ oder „Nur Desktop“. Ein ausgeblendeter Abschnitt verbirgt auch seine Bilder.
• Prüfen Sie Hintergründe gesondert. Ein Abschnittshintergrund braucht einen sichtbaren Container. Geben Sie einem leeren Abschnitt im Editor die gewünschte Höhe und prüfen Sie Hintergrundposition und Überlagerung.
• Prüfen Sie transparente Grafiken vor einer anderen Farbe. Ein weißes Logo kann auf einer weißen Seite verschwinden, obwohl es korrekt lädt. Lesen Sie den Ratgeber zur Transparenz, wenn das eigentliche Motiv unsichtbar wirkt.

Speichern Sie die betreffende Änderung und prüfen Sie die öffentliche Seite. Fehlt das Bild weiterhin, unterscheiden die technischen Prüfungen eine blockierte Anfrage von einem durch das Layout versteckten Bild.

5. Prüfen Sie mobile Bilder und festhängende Platzhalter

Wenn der Fehler nur am Smartphone auftritt

Öffnen Sie die mobile Ansicht des Editors und prüfen Sie, ob Bild oder Abschnitt ausgeblendet sind. Gibt es eine eigene Einstellung für das mobile Bild, muss sie auf eine verfügbare Datei verweisen. Testen Sie anschließend die öffentliche Seite auf dem betroffenen Smartphone.

Websites können mehrere Größen erzeugen und den Browser wählen lassen. Ein Smartphone fordert womöglich eine fehlende kleine Version an, während ein Laptop eine funktionierende große Version nutzt. Lassen Sie die gewählten URLs bei funktionierender und fehlerhafter Bildschirmgröße vergleichen und die fehlende Version wiederherstellen. Wie sich die Auswahl ermitteln lässt, erklären die technischen Prüfungen.

Wenn bei einem sichtbaren Bild der Platzhalter bleibt

Dass ein Bild weiter unten auf der Seite oder in einer noch nicht geöffneten Galeriefolie erst später lädt, kann beabsichtigt sein. Untersuchen Sie den Fall, wenn es nach dem Hinscrollen oder Öffnen der Folie und angemessener Ladezeit leer bleibt. Eine fehlgeschlagene Anfrage und eine nie gestartete Anfrage brauchen unterschiedliche Lösungen.

Testen Sie die betroffene Galerie oder Lazy-Loading-Einstellung auf einer einzelnen Seite in einer Testumgebung. Erscheint das Bild wieder, lassen Sie zunächst diese Komponente korrigieren, bevor Sie die Änderung breiter ausrollen. Prüfen Sie beim sofort sichtbaren Hauptbild, ob verzögertes Laden sinnvoll ist. Unser Lazy-Loading-Ratgeber erklärt die Möglichkeiten.

6. Vergleichen Sie Editor und Besucheransicht

Erscheint das Bild nur im Editor, prüfen Sie, ob Sie die Bildänderung auf der richtigen Seite veröffentlicht haben. Vergleichen Sie danach die Mediathek-Adresse mit der Anfrage der öffentlichen Seite. Eine private Editor-Vorschau ist etwas anderes als ein öffentlich verfügbarer Upload.

Haben Sie eine veraltete Seite oder Bildreferenz repariert, nutzen Sie die dokumentierte Cache-Aktualisierung Ihres Veröffentlichungssystems für die betroffene Seite oder Datei. Ein Content Delivery Network, kurz CDN, kann einen eigenen Cache haben. Das Löschen Ihrer Browserdaten erneuert nicht den gemeinsamen Website-Cache.

Tritt der Fehler nur in einem Browserprofil auf, testen Sie ohne Erweiterungen und prüfen Sie dessen Website-Berechtigungen. Privates Surfen ist nicht in jeder Konfiguration frei von Erweiterungen. Halten Sie die fehlgeschlagene Anfrage fest, bevor Sie entscheiden, ob ein Inhaltsblocker oder die Auslieferungsmethode der Website angepasst werden muss.

Der Abschnitt für die Website-Verwaltung erklärt Tests ohne den normalen HTTP-Cache des Browsers. Der Caching-Ratgeber von MDN beschreibt Browser-Caches und gemeinsame Caches.

7. Ändern Sie die Datei, wenn Format oder Größe die Ursache sind

Prüfen Sie den tatsächlichen Dateityp und die Anforderungen des Zielsystems, bevor Sie einen Konverter wählen. Eine Konvertierung kann ein Formatproblem lösen, aber weder eine fehlende Adresse wiederherstellen noch einen ausgeblendeten Abschnitt sichtbar machen.

• Die Datei ist HEIC oder HEIF und das Ziel verlangt JPG: Erstellen Sie mit HEIC zu JPG eine Kopie als Standbild. Prüfen Sie das Ergebnis und behalten Sie das Original. Ein iPhone-Foto kann bereits JPEG sein; prüfen Sie daher zuerst das Format.
• Die Plattform lehnt SVG ab, akzeptiert aber PNG: Erstellen Sie eine PNG-Kopie mit passenden Pixelmaßen. Kontrollieren Sie die Grafik vor dem Upload.
• Die Datei öffnet sich auch lokal nicht: Stellen Sie ein funktionierendes Original wieder her oder exportieren Sie es erneut aus der ursprünglichen Anwendung. Eine andere Dateiendung repariert keine beschädigten Daten.
• Der Upload überschreitet ein angegebenes Limit: Erstellen Sie eine Kopie innerhalb des Limits. Prüfen Sie danach, ob der Upload abgeschlossen ist und die Seite diese Datei verwendet.

Der Format-Ratgeber von MDN vergleicht Browserunterstützung und Formatfunktionen. Sieht eine SVG nach dem Export anders aus, hilft der SVG-Ratgeber. Wird ein Bild angezeigt, wirkt aber unscharf, lesen Sie den Ratgeber zu unscharfen Bildern.

Beispiel: Ein Produktfoto fehlt auf dem Smartphone

In diesem veranschaulichenden Beispiel funktioniert ein Produktfoto nach einem Shop-Umzug auf dem Laptop, auf dem Smartphone erscheint jedoch ein defektes Bild. Das Original in der Mediathek öffnet sich. Deshalb prüft die Betreiberin die tatsächliche Bildanfrage des Smartphones.

Das Smartphone wählt /media/blue-mug-640.webp, was 404 zurückgibt. Der Laptop verwendet /media/blue-mug-1280.webp. Beim Umzug wurde die größere Datei kopiert, die kleinere Version jedoch ausgelassen.

Die zuständige Person erzeugt die fehlende Größe neu, prüft die übrigen angebotenen Versionen und aktualisiert gegebenenfalls veraltete Seitenverweise. Die Betreiberin lädt die öffentliche Seite am Smartphone neu und bestätigt, dass die angeforderte Datei nun das richtige Bild liefert. Die Ursache war eine fehlende erzeugte Datei; eine Formatänderung am Original würde diesen Verweis nicht reparieren.

8. Prüfen Sie die Reparatur aus Besuchersicht

Wiederholen Sie den fehlgeschlagenen Test auf derselben öffentlichen Seite, mit derselben Bildschirmgröße und Galeriefolie. Prüfen Sie, ob das richtige Bild erscheint und nach dem Neuladen verfügbar bleibt. Testen Sie ohne Administratoranmeldung, wenn alle Besucher das Bild sehen sollen.

Prüfen Sie bei einer Vorlagen- oder Auslieferungsänderung eine weitere Seite mit derselben Komponente sowie die Desktop- und Mobilansicht. Notieren Sie kurz die Ursache und die geänderte Datei oder Einstellung.

Muss jemand anderes die Reparatur abschließen, senden Sie Seiten-URL, ausgewählte Bild-URL, Fehlerzeitpunkt, Browser- und Gerätedaten sowie die relevante Fehlermeldung. Geben Sie an, ob das Bild im Editor, direkt in einem neuen Tab oder bei einer anderen Bildschirmgröße funktioniert. Entfernen Sie private Tokens und personenbezogene Angaben aus öffentlich geteiltem Material.

Optional: Technische Prüfungen für die Website-Verwaltung

Wählen Sie die zu Ihren bisherigen Beobachtungen passenden Prüfungen. Sie unterscheiden eine nicht verfügbare Datei, eine fehlgeschlagene Anfrage und ein geladenes, aber verstecktes Bild.

Lesen Sie die Bildanfrage im Network-Panel

1. Öffnen Sie die betroffene öffentliche Seite. Wählen Sie in Chrome über das Menü Weitere Tools → Entwicklertools und anschließend Network. Andere Browser bieten ähnliche Funktionen.
2. Lassen Sie die Aufzeichnung aktiv und laden Sie neu. Wählen Sie den Filter Img oder suchen Sie nach dem Dateinamen. Scrollen Sie zum Bild oder öffnen Sie dessen Galeriefolie, falls dies normalerweise das Laden auslöst.
3. Wählen Sie die Anfrage. Notieren Sie unter Headers die Request URL, den Status und die Antwortheader. Prüfen Sie unter Preview oder Response, was zurückkam.
4. Finden Sie keinen Treffer, entfernen Sie die Filter. Die URL könnte sich geändert haben oder ein Skript ruft das Bild über Fetch/XHR ab.

Aktivieren Sie für einen frischen Browserabruf Disable cache, lassen Sie die Entwicklertools geöffnet und laden Sie neu. Das umgeht den normalen HTTP-Cache des Browsers, nicht den CDN-Cache. Verarbeitet ein Service Worker die Website, prüfen Sie dessen gespeicherte Antworten gesondert. Siehe die Chrome-Network-Referenz.

Ein Status grenzt die Suche ein, erklärt aber nicht jede Ursache. MDN beschreibt HTTP-Statuscodes und die normale 304-Validierung. Prüfen Sie bei Hostnamen- oder Zertifikatsfehlern die DNS- und HTTPS-Einrichtung des Bildservers.

Erwarten Sie echte Bilddaten und einen passenden Content-Type, etwa image/jpeg oder image/webp. Eine URL mit der Endung .jpg kann HTML zurückgeben; ein Bilddienst kann unter derselben Endung aber auch berechtigt ein anderes Bildformat ausliefern.

Wenn das Öffnen der Adresse einen Download auslöst

Prüfen Sie neben dem Inhaltstyp auch Content-Disposition. Eine Antwort mit Content-Disposition: attachment kann beim direkten Öffnen einen Download auslösen. Das allein beweist nicht, dass das Bild innerhalb einer Seite scheitert: Prüfen Sie auch die eingebettete Anfrage. Haben Sie einen Downloadlink kopiert, verwenden Sie die unterstützte Bildauslieferungs-URL des Hosters. Siehe die Content-Disposition-Referenz.

Ermitteln Sie die ausgewählte responsive Bild-URL

Klicken Sie in Chrome oder Edge mit rechts auf das betroffene Bild und wählen Sie Untersuchen. Wählen Sie unter Elements das eigentliche <img>, nicht dessen Hülle oder <picture>. Öffnen Sie Console und geben Sie diesen nur lesenden Ausdruck ein:

$0.currentSrc

$0 bezeichnet das zuletzt ausgewählte Element in diesen Entwicklertools. Das Ergebnis ist die ausgewählte Bildadresse, keine Garantie für erfolgreiches Laden. Prüfen Sie sie im Network-Panel. Die Console-Utilities-Referenz erklärt $0; MDN dokumentiert currentSrc.

Ein Browser kann eine Datei aus srcset oder einer passenden <picture>-Quelle wählen. Ein funktionierendes src repariert keinen fehlenden ausgewählten Kandidaten. Der Picture-Fallback hängt von Quellbedingungen und Unterstützung ab; verlassen Sie sich nicht darauf, dass er einen 404-Fehler der gewählten Datei auffängt. Siehe responsive Bildauswahl und die Picture-Referenz.

Lösen Sie Bildpfade in HTML und CSS auf

Auf https://example.com/services/kitchens/ fordern diese beiden Quellen unterschiedliche Orte an, sofern die Seite keine andere Basis-URL festlegt:

<img src="images/kitchen.jpg" alt="Fertige Küche mit Eichenschränken">
<img src="/images/kitchen.jpg" alt="Fertige Küche mit Eichenschränken">

Die erste fordert /services/kitchens/images/kitchen.jpg an, die zweite /images/kitchen.jpg auf diesem Host. Wählen Sie die Adresse Ihrer tatsächlichen Bereitstellung, einschließlich eines möglichen Unterverzeichnis-Präfixes. MDN erklärt relative und absolute Pfade. In einer externen CSS-Datei wird eine relative Bild-URL anhand der Stylesheet-Adresse aufgelöst; siehe die CSS-URL-Referenz.

Untersuchen Sie Layout und Ladeimplementierung

Prüfen Sie unter Elements → Computed Bild und übergeordnete Elemente auf display: none, visibility: hidden, Deckkraft null, zusammengefallene Maße, Beschneidung oder Überlagerungen. Ein Hintergrundbild gibt einem leeren Container nicht die Höhe des Fotos. Korrigieren Sie die verantwortliche Regel im Editor oder Quell-Stylesheet; eine vorübergehende Änderung in den Entwicklertools verschwindet meist beim Neuladen. Siehe Chromes Anleitung zur CSS-Prüfung und die background-image-Referenz.

Steht die tatsächliche URL nur in data-src, prüfen Sie das Skript, das die Bildquelle setzt, und relevante Console-Fehler. Geben Sie bei nativem loading="lazy" passende Maße an und stellen Sie sicher, dass das Bild schon vor dem Laden Platz im Layout hat. Der Ratgeber zu browserseitigem Lazy Loading erklärt das Verhalten.

Content Security Policy: Prüfen Sie, ob der vorgesehene Bildhost zu img-src oder, ohne bildspezifische Direktive, zu default-src passt. Siehe die CSP-Referenz zu Bildquellen.

Mixed Content: Ein HTTP-Bildverweis auf einer HTTPS-Seite kann je nach Verwendung auf HTTPS umgestellt oder blockiert werden. Stellen Sie sicher, dass das Bild über HTTPS verfügbar ist, und aktualisieren Sie den Verweis. Siehe MDNs Hinweise zu Mixed Content.

CORS und Einbettungsrichtlinien: Das Anzeigen eines normalen Bildes anderer Herkunft und das Auslesen seiner Pixel über Canvas haben unterschiedliche Anforderungen. Das Hinzufügen von crossorigin kann das Laden verhindern, wenn der Bildhost nicht die erforderliche CORS-Antwort liefert. Prüfen Sie die CORS-Dokumentation für Bilder und gemeldete Einschränkungen durch die Cross-Origin Resource Policy.

Häufige Fragen

Warum sehe ich das Bild, meine Besucher aber nicht?

Ein Editor kann eine unveröffentlichte oder vorübergehende Vorschau zeigen. Ihre angemeldete Sitzung hat möglicherweise Zugriff, der Besuchern fehlt. Testen Sie die öffentliche Seite ohne diese Anmeldung. Soll die Datei öffentlich sein, nutzen Sie den öffentlichen Medien-Upload der Website. Andernfalls lassen Sie die authentifizierte Anzeige prüfen.

Warum öffnet sich das Bild in einem neuen Tab, aber nicht auf der Seite?

Vergleichen Sie zuerst die genauen Adressen: Die Seite fordert möglicherweise eine andere Größe an. Stimmen sie überein, prüfen Sie die eingebettete Anfrage auf Zugriffs- oder Browserrichtlinienfehler. Bei erfolgreicher Bildanfrage untersuchen Sie anschließend Sichtbarkeit und Layout der Seite.

Beweist eine 200-Antwort, dass das Bild funktioniert?

Nein. Prüfen Sie den Inhalt der Antwort. Eine Anmeldeseite mit Status 200 ist kein Bild. Enthält die Antwort das richtige Bild, prüfen Sie relevante Console-Meldungen und seine Darstellung auf der Seite. Der Antwortcode allein bestätigt kein sichtbares Ergebnis.

Reparieren kleinere Maße oder Komprimierung ein defektes Bild?

Sie helfen, wenn ein Upload ein angegebenes Limit überschreitet oder ein übergroßes Bild zu langsam übertragen wird. Ein falscher Pfad, ein fehlendes Vorschaubild oder ein ausgeblendeter Abschnitt braucht eine andere Lösung. Ermitteln Sie das Problem anhand des Uploadfehlers oder der Bildanfrage, bevor Sie die Datei ändern.

Sollte ich die Datei umbenennen oder ihre Endung ändern?

Benennen Sie sie um, um ein konkretes Pfad- oder Namensproblem zu lösen, und aktualisieren Sie anschließend die Verweise auf den alten Namen. Das Umbenennen von .heic in .jpg konvertiert kein Bild. Verwenden Sie einen Konverter, wenn das tatsächliche Format nicht unterstützt wird, und behalten Sie das Original.

Sorgen Alt-Text, robots.txt oder Search Console dafür, dass das Bild erscheint?

Alt-Text beschreibt ein Bild, wenn es nicht gesehen werden kann; er lädt die Datei nicht. Robots-Anweisungen und Search Console betreffen Crawling und Sichtbarkeit in der Suche. Fehlt ein Bild auf der Seite für Besucher, prüfen Sie zuerst Datei, Anfrage und Layout.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)