Bilder-SEO: Der komplette Guide für bessere Google Rankings [2026]

Warum Bilder-SEO wichtig ist

Bilder machen oft über 50% des Datenvolumens einer Website aus — und sind gleichzeitig einer der am meisten vernachlässigten SEO-Faktoren. Dabei können optimierte Bilder Ihre Website in der Google Bildersuche sichtbar machen, die Ladezeit drastisch verbessern und Ihre Core Web Vitals positiv beeinflussen.

Die Google Bildersuche generiert laut Studien bis zu 22% des gesamten organischen Traffics. Wenn Ihre Bilder dort nicht auftauchen, verschenken Sie fast ein Viertel Ihres potenziellen Traffics. Gleichzeitig sind nicht optimierte Bilder der häufigste Grund für langsame Websites — und Ladezeit ist seit 2021 ein offizieller Google-Ranking-Faktor.

Bei GoldenWing optimieren wir jedes Bild als Teil unseres Webdesign-Prozesses. In diesem Guide zeigen wir Ihnen, wie Sie das auch für Ihre Website umsetzen.

Alt-Text: Das wichtigste Element der Bilder-SEO

Der Alt-Text (Alternativtext) ist das zentrale Element der Bilder-SEO. Er beschreibt den Inhalt eines Bildes für Suchmaschinen und Screenreader. Google kann Bilder zwar zunehmend „sehen", verlässt sich aber nach wie vor stark auf den Alt-Text, um den Kontext eines Bildes zu verstehen.

So schreiben Sie gute Alt-Texte

• Beschreiben Sie, was auf dem Bild zu sehen ist: „Team von Webdesignern bei der Konzeptarbeit am Whiteboard" statt „Bild 1" oder „DSC_0042.jpg".
• Integrieren Sie Keywords natürlich: Wenn das Bild zu Ihrem Thema passt, verwenden Sie Ihr Fokus-Keyword. Aber nicht erzwingen — „Webdesign Wien Webdesign Agentur Wien günstig" ist Keyword-Stuffing und schadet Ihrem Ranking.
• Halten Sie es unter 125 Zeichen: Screenreader schneiden längere Texte ab. Prägnant ist besser als ausführlich.
• Vermeiden Sie „Bild von" oder „Foto von": Google und Screenreader wissen bereits, dass es sich um ein Bild handelt. Beginnen Sie direkt mit der Beschreibung.
• Jedes Bild braucht einen individuellen Alt-Text: Kopieren Sie nie denselben Alt-Text für verschiedene Bilder.

Alt-Text Beispiele

• Schlecht: „bild" / „foto" / „IMG_2847.jpg" / leer
• Mittel: „Webdesign Projekt"
• Gut: „Responsives Website-Design für eine Wiener Anwaltskanzlei auf Desktop und Smartphone"
• Zu lang: „Professionelles responsives Webdesign-Projekt das wir für eine renommierte Wiener Anwaltskanzlei im 1. Bezirk erstellt haben zeigt die Desktop und mobile Ansicht der Homepage"

Bildformate: WebP, AVIF, JPEG oder PNG?

Die Wahl des richtigen Bildformats hat einen enormen Einfluss auf die Ladezeit Ihrer Website. Hier ein Vergleich:

WebP — Der aktuelle Standard

WebP bietet 25-35% kleinere Dateien als JPEG bei vergleichbarer Qualität. Es wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge) und unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung sowie Transparenz. Für die meisten Websites ist WebP das optimale Format.

AVIF — Die Zukunft

AVIF komprimiert noch besser als WebP — bis zu 50% kleiner als JPEG. Die Browserunterstützung wächst stetig, ist aber noch nicht universal. Wir empfehlen AVIF als primäres Format mit WebP als Fallback.

JPEG — Der Klassiker

JPEG eignet sich nach wie vor für Fotografien, wenn WebP oder AVIF keine Option sind. Die Qualitätsstufe sollte zwischen 75-85% liegen — darunter werden Artefakte sichtbar, darüber wird die Datei unnötig groß.

PNG — Nur für Transparenz und Grafiken

PNG-Dateien sind deutlich größer als WebP/JPEG und sollten nur für Logos, Icons und Grafiken mit Transparenz verwendet werden. Für Fotos ist PNG nie die richtige Wahl.

SVG — Für Vektorgrafiken

SVG eignet sich perfekt für Logos, Icons und einfache Illustrationen. SVG-Dateien sind extrem klein, skalieren verlustfrei auf jede Größe und können sogar animiert werden.

Bildkomprimierung: Die richtige Balance

Zu große Bilder sind der häufigste Grund für langsame Websites. Hier die wichtigsten Regeln:

• Maximale Dateigröße: Keine Bilddatei auf Ihrer Website sollte größer als 200 KB sein. Hero-Bilder können bis 300 KB gehen, aber nicht mehr.
• Auflösung anpassen: Ein Bild, das auf der Website 800px breit angezeigt wird, muss nicht in 4000px gespeichert werden. Speichern Sie Bilder in der Größe, in der sie tatsächlich angezeigt werden (plus 2x für Retina-Displays).
• Tools zur Komprimierung: Squoosh (kostenlos, von Google), TinyPNG, ShortPixel oder ImageOptim (Mac). Bei GoldenWing nutzen wir automatisierte Build-Pipelines, die jedes Bild beim Deploy komprimieren.

Responsive Images mit srcset

Moderne Websites liefern verschiedene Bildgrößen je nach Gerät aus. Das HTML-Attribut srcset ermöglicht es dem Browser, die optimale Größe zu laden:

• Mobile: 400px Breite
• Tablet: 800px Breite
• Desktop: 1200px Breite
• Retina: Doppelte Auflösung

Next.js (das Framework, das wir bei GoldenWing verwenden) generiert diese Varianten automatisch über die next/image-Komponente.

Dateinamen: Ein unterschätzter SEO-Faktor

Der Dateiname ist das Erste, was Google über ein Bild erfährt. Er sollte beschreibend und keyword-relevant sein:

• Schlecht: IMG_2847.jpg, bild1.png, screenshot-2026-04-08.webp
• Gut: webdesign-wien-responsives-layout.webp, seo-audit-ergebnis-dashboard.webp

Regeln für Dateinamen

1. Bindestriche statt Unterstriche: Google behandelt Bindestriche als Worttrenner, Unterstriche nicht. webdesign-wien.webp ist besser als webdesign_wien.webp.
2. Nur Kleinbuchstaben: Vermeiden Sie Großbuchstaben und Sonderzeichen.
3. Keine Umlaute: Verwenden Sie ue statt ü, ae statt ä, oe statt ö.
4. Keyword einbauen: Wenn das Bild ein Webdesign-Projekt zeigt, sollte „webdesign" im Dateinamen vorkommen.

Lazy Loading: Bilder erst laden, wenn sie sichtbar werden

Lazy Loading ist eine Technik, bei der Bilder erst geladen werden, wenn der Nutzer zu ihnen scrollt. Das verbessert die initiale Ladezeit erheblich, weil Bilder „below the fold" nicht sofort geladen werden müssen.

• Native Lazy Loading: Das HTML-Attribut loading="lazy" wird von allen modernen Browsern unterstützt. Einfach zum <img>-Tag hinzufügen — fertig.
• Hero-Bilder nicht lazy laden: Das Hauptbild above the fold sollte sofort laden. Verwenden Sie loading="eager" oder gar kein loading-Attribut für das erste sichtbare Bild.
• Placeholder verwenden: Zeigen Sie einen unscharfen Platzhalter (Blur-Up) oder einen farbigen Hintergrund, während das Bild lädt. Das verhindert Layout-Shifts (CLS).

Bild-Sitemaps und strukturierte Daten

Bild-Sitemap

Eine Bild-Sitemap teilt Google explizit mit, welche Bilder auf Ihrer Website existieren. Das ist besonders wichtig, wenn Ihre Bilder per JavaScript oder Lazy Loading eingebunden werden und Google sie beim regulären Crawling möglicherweise nicht findet.

Sie können Bilder entweder in Ihre bestehende XML-Sitemap integrieren oder eine separate Bild-Sitemap erstellen. Google empfiehlt die Integration in die Haupt-Sitemap.

Strukturierte Daten für Bilder

Mit dem ImageObject-Schema können Sie Google zusätzliche Informationen über Ihre Bilder geben — wie den Autor, die Lizenz und eine Beschreibung. Das ist besonders relevant für Rezepte, Produkte und Nachrichtenartikel, wo Bilder prominent in den Suchergebnissen angezeigt werden.

Core Web Vitals und Bilder

Bilder beeinflussen direkt drei der wichtigsten Performance-Metriken:

LCP (Largest Contentful Paint)

Das größte sichtbare Element der Seite ist oft ein Bild. Wenn dieses Bild zu groß ist oder zu lange zum Laden braucht, verschlechtert sich Ihr LCP-Wert. Die Lösung: Hero-Bilder vorladen mit <link rel="preload">, das richtige Format (WebP/AVIF) verwenden und die Dateigröße unter 200 KB halten.

CLS (Cumulative Layout Shift)

Wenn Bilder keine definierten Breiten- und Höhenangaben haben, springt das Layout beim Laden. Das führt zu einem schlechten CLS-Wert. Die Lösung: Geben Sie jedem <img>-Tag explizite width- und height-Attribute oder verwenden Sie CSS aspect-ratio.

INP (Interaction to Next Paint)

Zu viele oder zu große Bilder können den Main Thread blockieren und die Interaktivität verschlechtern. Lazy Loading und effiziente Komprimierung helfen hier.

Bilder-SEO Checkliste

Hier die wichtigsten Punkte zusammengefasst:

1. Alt-Text: Jedes Bild hat einen beschreibenden, einzigartigen Alt-Text mit natürlichem Keyword
2. Format: WebP als Standard, AVIF wo möglich, PNG nur für Transparenz
3. Komprimierung: Keine Datei über 200 KB, Qualität zwischen 75-85%
4. Dateiname: Beschreibend, mit Bindestrichen, Kleinbuchstaben, keine Umlaute
5. Responsive: srcset für verschiedene Bildschirmgrößen
6. Lazy Loading: Alle Bilder außer dem Hero-Bild lazy laden
7. Dimensionen: Breite und Höhe immer angeben (verhindert CLS)
8. Preload: Hero-Bild mit rel="preload" vorladen
9. Sitemap: Bilder in die XML-Sitemap aufnehmen
10. CDN: Bilder über ein Content Delivery Network ausliefern

Fazit: Bilder-SEO ist kein Luxus, sondern Pflicht

Optimierte Bilder machen Ihre Website schneller, verbessern die Nutzererfahrung und bringen zusätzlichen Traffic über die Google Bildersuche. Die gute Nachricht: Die meisten Optimierungen sind einmalig einzurichten und laufen dann automatisch.

Bei GoldenWing ist Bilder-SEO ein fester Bestandteil jedes Website-Projekts. Wir setzen auf automatische WebP-Konvertierung, intelligentes Lazy Loading und optimierte Bild-Pipelines, damit Ihre Website vom ersten Tag an perfekt performt.

Sie möchten Ihre bestehende Website auf Bilder-SEO prüfen lassen? Kontaktieren Sie uns für eine kostenlose Erstanalyse.