Wann Sie diese Prüfung verwenden
Beurteilen Sie den Zweck des Bildes an der jeweiligen Stelle. Ein Foto einer Reparatur kann den Ablauf erklären, einen Abschnitt dekorieren oder als Link dienen. Für jeden Fall ist ein anderer Alternativtext passend.
Wissen, was Sie prüfen.
Bei der Bild-SEO müssen die Bedeutung eines Bildes und seine technische Auslieferung zusammenpassen. Ein aussagekräftiges Foto braucht ein entsprechendes Textäquivalent; ein rein dekoratives Bild kann korrekt ein leeres alt-Attribut haben.
Praktisches Beispiel
<img src="oprava.webp" width="960" height="640" alt="Techniker tauscht die Dichtung der Brühgruppe aus" />
<img src="dekoracia.svg" alt="" />Häufiger Fehler
Derselbe alt-Text für alle Fotos füllt zwar das Attribut aus, erklärt aber nicht den jeweiligen Bildinhalt. Ein leeres alt-Attribut bei einem dekorativen Bild ist nicht automatisch ein Fehler. Ohne das Bild selbst zu sehen, kann ein Audit die sachliche Richtigkeit der Beschreibung nicht prüfen.
Ergebnis verstehen. Die richtige Änderung vornehmen.
Wann ein Bild einen Alt-Text braucht und wann alt="" richtig ist
Dasselbe Foto kann einen Ablauf erklären oder nur den Einstieg dekorieren. Schreiben Sie den Alt-Text danach, welche Information an dieser Stelle ohne das Bild fehlen würde.
- Beschreiben Sie informative Bilder kurz und sachlich.
- Lassen Sie bei rein dekorativen Bildern alt="" stehen.
- Erklären Sie bei komplexen Diagrammen die wichtigen Daten zusätzlich im umgebenden Text.
So benennen Sie einen Bildlink oder eine Schaltfläche
Ist ein Logo der einzige Inhalt eines Links zur Startseite, bestimmt sein Alternativtext den Linknamen. Bei einer Schaltfläche mit Symbol reicht eine Beschreibung von Farbe oder Form nicht aus.
- Prüfen Sie, was ein Screenreader bei einem Link ansagt, der nur ein Bild enthält.
- Der Name sollte das Ziel oder die ausgeführte Aktion erklären.
- Steht neben dem Symbol bereits ein vollständiger Text, wiederholen Sie ihn nicht unnötig.
So wählen Sie Bildabmessungen, ohne Inhalte zu verschieben
Eine kleine Vorschau braucht nicht das originale Foto mit mehreren Megapixeln. Auf Displays mit hoher Pixeldichte muss sie dennoch scharf bleiben. Beurteilen Sie die tatsächliche Anzeigegröße.
- Verwenden Sie passende responsive Bildvarianten und den richtigen sizes-Wert.
- Reservieren Sie Platz mit Abmessungen oder einem Seitenverhältnis.
- Prüfen Sie auf Mobilgeräten sowohl Details als auch unnötig große Datenübertragungen.
Wann sollten Bilder verzögert geladen werden?
Ein wichtiges Bild im ersten sichtbaren Bereich kann das LCP-Element sein. Wird es unnötig spät geladen, verzögert sich die Darstellung. Bewerten Sie Bilder weiter unten auf der Seite separat.
- Verzögern Sie das wichtigste sichtbare Bild nicht automatisch mit Lazy Loading.
- Erwägen Sie Lazy Loading für Bilder unterhalb des ersten sichtbaren Bereichs.
- Prüfen Sie das Ergebnis durch eine Messung der Core Web Vitals und anhand der tatsächlichen Darstellung.
Primärquelle: www.w3.org ↗
Häufige Fragen
Braucht jedes Bild einen langen Alt-Text mit einem Schlüsselwort?
Der Alt-Text richtet sich nach dem Zweck des Bildes. Ein informatives Bild braucht eine kurze Beschreibung, ein dekoratives normalerweise alt="" und ein Bildlink einen Namen für Ziel oder Funktion. Wiederholte Schlüsselwörter erschweren das Lesen. Bei einer Produktvariante nennen Sie sichtbare Unterschiede wie Farbe oder Ausführung, wenn sie für die Auswahl wichtig sind.
Wann Sie die Aufgabe schließen können
Prüfen Sie, ob die Seite auch ohne Bilder Sinn ergibt. Abmessungen reservieren Platz, und das Hauptbild sollte angemessen schnell laden. Eine kleine Datei allein garantiert kein gutes LCP.