Vier Beschriftungen, vier Aufgaben
In der Praxis werden Alt-Text, Bildunterschrift, Dateiname und Title-Attribut häufig als dasselbe behandelt. Sie sind es nicht. Jedes Element richtet sich an ein anderes Publikum und erfüllt eine andere Funktion — wer sie sauber trennt, schreibt automatisch bessere Beschriftungen.
- Alt-Text (alt-Attribut): Ersatz für das Bild, wenn es nicht angezeigt oder nicht gesehen werden kann. Wird von Screenreadern vorgelesen.
- Bildunterschrift (caption): sichtbarer Text für alle Leser. Erklärt, ordnet ein, nennt Ort, Personen oder Quelle.
- Dateiname: beschreibt den Inhalt der Datei in Kurzform, klein geschrieben und mit Bindestrichen.
- Title-Attribut: optionaler Tooltip. Wird von vielen Geräten gar nicht angezeigt und ersetzt niemals den Alt-Text.
- Umgebender Text: der Absatz rund um das Bild liefert den eigentlichen thematischen Kontext.
Alt-Text: beschreiben, nicht bewerben
Der Alt-Text beschreibt, was auf dem Bild zu sehen ist, und zwar so, dass jemand ohne Bild der Seite folgen kann. Das ist zuerst eine Frage der Barrierefreiheit: Die Web Content Accessibility Guidelines verlangen für Bilder mit Informationsgehalt eine gleichwertige Textalternative.
Die historische Empfehlung, in jeden Alt-Text ein Keyword zu schreiben, ist überholt und war nie gut. Ein Alt-Text, der wie eine Suchanfrage klingt, hilft weder einem Screenreader-Nutzer noch der Bildersuche. Wenn das passende Wort ohnehin beschreibt, was zu sehen ist, steht es von selbst darin.
Rein dekorative Bilder ohne Informationswert bekommen ein leeres alt-Attribut (alt=""). Dann wird das Bild von Screenreadern übersprungen, statt einen belanglosen Dateinamen vorzulesen.
- Beschreiben Sie den Bildinhalt, nicht das Thema der Seite
- Kurz halten — ein Satz reicht in den meisten Fällen
- Keine Formulierungen wie „Bild von“ oder „Grafik zeigt“
- Dekoratives Bild: alt="" statt Füllwörter
Bildunterschrift: sichtbar und für Menschen
Die Bildunterschrift ist der sichtbare Text unter dem Bild. Sie wird überdurchschnittlich oft gelesen und eignet sich deshalb für Einordnung: Was ist hier zu sehen, aus welchem Projekt stammt es, wann wurde es aufgenommen, woher kommt die Aufnahme.
Die alte Regel „mindestens ein Keyword pro Bildunterschrift“ entfällt. Eine Bildunterschrift, die erklärt, ist wertvoller als eine, die Suchbegriffe unterbringt.
Dateinamen: kurz, kleingeschrieben, beschreibend
Ein Dateiname wie IMG_4821.jpg sagt niemandem etwas. Google Search Central empfiehlt beschreibende Dateinamen und Pfade, weil sie zusätzliche Hinweise auf den Bildinhalt geben.
Bei der Migration der 13 Projektbilder in dieses Projekt haben wir jede Datei nach demselben Muster benannt: Präfix für den Typ, dann das Projekt, dann die Breite — zum Beispiel project-kleinfeldt-1280.webp. Der praktische Nutzen lag weniger bei der Suchmaschine als in der Pflege: Bei mehreren Größen pro Projekt ist ohne konsequentes Schema nach kurzer Zeit nicht mehr erkennbar, welche Datei wozu gehört.
- Kleinbuchstaben, Bindestriche statt Leerzeichen oder Unterstrichen
- Keine Umlaute und Sonderzeichen
- Inhalt benennen, nicht Kampagnen- oder Kundennummern
- Bei mehreren Größen dieselbe Systematik durchhalten
Format und Dateigröße: keine feste Kilobyte-Grenze
Die früher verbreitete Regel „nie größer als 100 Kilobyte“ lässt sich so nicht halten. Ein kleines Symbol darf deutlich darunter liegen, ein bildschirmfüllendes Foto liegt auch gut optimiert oft darüber. Entscheidend ist nicht eine Zahl, sondern ob die Seite dadurch spürbar langsamer wird.
Moderne Formate helfen dabei mehr als jede pauschale Grenze. WebP und AVIF liefern bei vergleichbarer Qualität in der Regel kleinere Dateien als JPEG oder PNG. Für Logos, Symbole und einfache Grafiken bleibt SVG die beste Wahl, weil es beliebig skaliert.
Responsive Bilder: srcset, sizes, width und height
Ein Bild, das auf dem Desktop 1.280 Pixel breit ist, muss auf dem Smartphone nicht in derselben Auflösung geladen werden. Mit srcset und sizes geben Sie mehrere Varianten an und überlassen dem Browser die Auswahl.
Genauso wichtig: width und height am img-Element. Ohne diese Angaben weiß der Browser vor dem Laden nicht, wie viel Platz er reservieren soll — der Text springt beim Nachladen, und genau das misst Google als Layoutverschiebung.
In diesem Projekt liegt jedes migrierte Projektbild in zwei Breiten vor (640 und 1.280 Pixel) und wird über srcset ausgeliefert. Welche Wirkung das auf Rankings hat, lässt sich nicht seriös beziffern; der nachvollziehbare Effekt ist, dass mobile Geräte die kleinere Datei laden.
- srcset: mehrere Dateien mit ihrer jeweiligen Pixelbreite angeben
- sizes: dem Browser sagen, wie breit das Bild im Layout dargestellt wird
- width und height immer setzen — gegen Layoutsprünge
- Lazy Loading (loading="lazy") nur für Bilder unterhalb des sichtbaren Bereichs
- Das erste große Bild oben auf der Seite nicht lazy laden
Google Bilder: was tatsächlich hilft
Für die Bildersuche zählt vor allem, ob ein Bild inhaltlich zu der Seite passt, auf der es steht. Google Search Central nennt dafür immer wieder dieselben Punkte: aussagekräftiger Alt-Text, beschreibender Dateiname, sinnvoller umgebender Text, gute Seitenqualität und technische Erreichbarkeit des Bildes.
Ranking-Versprechen gibt es hier nicht. Bilder sind ein Baustein — sie verbessern Verständlichkeit und Ladeverhalten, ersetzen aber keinen guten Inhalt.
Kurze Checkliste vor dem Hochladen
Die Punkte lassen sich in wenigen Sekunden pro Bild abarbeiten und ersparen später aufwendige Nacharbeit.
- Dateiname beschreibend und kleingeschrieben
- Bild in der Größe gespeichert, in der es maximal angezeigt wird
- Modernes Format (WebP oder AVIF), SVG für Grafiken
- Alt-Text beschreibt den Inhalt — oder ist bewusst leer
- Bildunterschrift erklärt, wenn Erklärung nötig ist
- width und height gesetzt
- Lazy Loading nur unterhalb des sichtbaren Bereichs