Bild-SEO: Alt-Text, Größe und Format

Bild-SEO ist die Arbeit, die Bilder auf deiner Seite sowohl für Suchmaschinen verständlich als auch für den Browser schnell ladbar zu machen. Gut umgesetzt zahlt es sich doppelt aus: zusätzlicher organischer Traffic aus der Google-Bildersuche und eine schnellere Seite mit besseren Core Web Vitals. Auf den meisten Seiten sind Bilder die schwerste Ressource, weshalb ihre Optimierung meist der renditestärkste Performance-Schritt ist.

Warum Bild-SEO wichtig ist

Suchmaschinen verstehen den Inhalt eines Bildes nicht so klar wie ein Mensch. Sie stützen sich auf den Dateinamen, den alt-Text und den umgebenden Kontext, um zu erraten, worum es im Bild geht. Gleichzeitig machen Bilder den Großteil des Seitengewichts aus. Ein einzelnes unoptimiertes Hero-Bild kann 2-3 MB groß sein, während eine richtig komprimierte Version auf 150 KB sinkt. Dieser Unterschied wirkt sich direkt auf die Wartezeit mobiler Nutzer und deinen LCP-Wert (Largest Contentful Paint) aus.

• Auffindbarkeit: gut beschriftete Bilder erscheinen in der Google-Bildersuche und bringen zusätzliche Besucher.
• Geschwindigkeit: kleinere Dateien laden schneller und verbessern die Core Web Vitals, ein Ranking-Signal.
• Barrierefreiheit: der alt-Text verwandelt den Inhalt in Sprache für Besucher mit Screenreadern.

Wie man Alt-Text schreibt

Der Alt-Text wird angezeigt, wenn ein Bild nicht lädt, und von Screenreadern vorgelesen. Seine Aufgabe ist es, das Bild zu beschreiben, nicht Keywords zu stapeln. Vermittle den Inhalt im Kontext, in einem kurzen, natürlichen Satz.

<!-- Schlecht: leer oder Spam -->
<img src="produkt.jpg" alt="">
<img src="produkt.jpg" alt="Schuhe günstig Schuhe Laufschuhe kaufen">

<!-- Gut: beschreibend und natürlich -->
<img src="laufschuh.jpg"
     alt="Grauer Laufschuh mit blauer Sohle, Seitenansicht">

Ein paar praktische Regeln: Lass alt="" bei rein dekorativen Bildern ohne Bedeutung (Screenreader überspringen sie). Enthält ein Bild Text, schreibe diesen Text in das alt. Beginne nicht mit Wörtern wie „Bild" oder „Foto"; der Screenreader kündigt bereits „Bild" an. Verwende ein Keyword nur, wenn es das Bild wirklich beschreibt.

Das richtige Format wählen

Die Formatwahl bestimmt direkt die Dateigröße. Moderne Formate erzeugen bei gleicher Qualität deutlich kleinere Dateien als das ältere JPEG und PNG.

• WebP: heute deine Standardwahl. Für Fotos und Grafiken meist 25-35 % kleiner als JPEG/PNG, und jeder moderne Browser unterstützt es.
• AVIF: liefert noch kleinere Dateien als WebP, aber die Kodierung ist langsamer und die Unterstützung in älteren Browsern etwas geringer. Lohnt sich für kritische Bilder.
• SVG: ideal für Logos, Icons und einfache Grafiken. Als Vektor bleibt es bei jeder Auflösung scharf und ist meist winzig.
• JPEG/PNG: nützlich als Fallback für Kompatibilität; nutze PNG nur, wenn du Transparenz brauchst.

Um ein Bild in mehreren Formaten anzubieten und den Browser das unterstützte wählen zu lassen, verwende <picture>:

<picture>
  <source srcset="cover.avif" type="image/avif">
  <source srcset="cover.webp" type="image/webp">
  <img src="cover.jpg" alt="Projekt-Titelbild" width="1200" height="630">
</picture>

Dateigröße reduzieren

Der größte Gewinn entsteht dadurch, ein Bild nicht größer auszuliefern als nötig. Es bringt nichts, eine 4000-Pixel-Datei in einen Bereich zu legen, der 400 Pixel breit angezeigt wird. Skaliere das Bild auf die genutzte Größe und komprimiere es dann.

Auf der Kommandozeile erzeugst du mit cwebp schnell WebP:

# Ein JPEG mit Qualität 80 nach WebP umwandeln
cwebp -q 80 cover.jpg -o cover.webp

# Für AVIF (libavif-Tools)
avifenc --min 20 --max 30 cover.jpg cover.avif

Bevorzugst du ein Tool gegenüber Einzelbefehlen, sind Squoosh (läuft im Browser), ImageOptim oder sharp (Node.js) gute Optionen. Halte die Qualität bei etwa 75-85; für die meisten Fotos ist das der Sweet Spot, der fürs Auge unsichtbar ist, die Größe aber halbiert.

Responsive Bilder und Lazy Loading

Um verschiedenen Bildschirmen verschiedene Größen anzubieten, nutze srcset und sizes; der Browser lädt die für den Viewport am besten geeignete Datei. Verzögere Bilder außerhalb des Sichtbereichs mit loading="lazy", damit der erste Ladevorgang schneller ist.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="500"
  loading="lazy"
  alt="Designer bei der Arbeit im Studio">

Ein wichtiges Detail: Gib Bildern „above the fold" kein loading="lazy", und schon gar nicht dem LCP-Bild; das verzögert dein wichtigstes Bild und verschlechtert den Wert. Füge diesem Bild bei Bedarf stattdessen fetchpriority="high" hinzu.

Dateiname, Sitemap und Platzierung

Der Dateiname ist ein kleines, aber kostenloses Signal: Verwende statt DSC_0421.jpg beschreibende, mit Bindestrich getrennte Namen wie grauer-laufschuh.jpg. Bevorzuge ASCII und Bindestriche gegenüber Leerzeichen und Sonderzeichen.

width und height bei jedem Bild anzugeben, lässt den Browser Platz reservieren und verhindert das Verspringen der Seite, bekannt als CLS (Cumulative Layout Shift). Hast du schließlich viele wichtige Bilder, hilft eine Bild-Sitemap — oder Bildeinträge in deiner bestehenden Sitemap — Google, sie schneller zu entdecken.

Häufige Fragen

Braucht jedes Bild Alt-Text?

Jedes Bild, das Inhalt trägt, ja. Bei rein dekorativen Bildern (ein Hintergrundmuster, eine Trennlinie) lässt du bewusst alt="", damit Screenreader sie überspringen. Es geht nicht darum, es leer zu lassen, sondern das bedeutungslose Bild absichtlich zu kennzeichnen.

Soll ich WebP oder AVIF verwenden?

In der Praxis ist beides anzubieten am besten: in <picture> zuerst AVIF, dann WebP, mit einem JPEG-Fallback zuletzt. Musst du ein Format wählen, ist WebP am ausgewogensten: breite Unterstützung und gute Kompression.

Beeinflusst Bild-SEO das Ranking wirklich?

Indirekt, aber wirkungsvoll. Auch wenn Bilder kein direkter „Ranking-Faktor" sind, beeinflussen sie die Geschwindigkeit (Core Web Vitals) und den Traffic aus der Google-Bildersuche, die beide deine Gesamtsichtbarkeit erhöhen.

Verlangsamen deine Bilder die Seite, oder bekommst du nicht den Traffic aus der Google-Bildersuche, den du verdienst? Lass uns alle Bilder deiner Seite optimieren und Alt-Texte sowie Formate gemeinsam einrichten. Kontaktiere mich und wir beschleunigen deine Seite von vorne bis hinten.