Bildoptimierung ist einer der günstigsten Wege zu einer schnelleren Website und besserem SEO. Bilder sind in der Regel die größten Dateien auf einer Seite — meist entscheiden sie darüber, wie schnell die Seite lädt und welches Ergebnis Sie bei den Core Web Vitals erzielen. Ein gut vorbereitetes Bild hat das richtige Format (WebP/AVIF), passende Abmessungen, eine vernünftige Dateigröße, ein beschreibendes alt-Attribut und blockiert das Rendering nicht. Unten finden Sie eine konkrete Schritt-für-Schritt-Liste, die Sie selbst umsetzen können.
Kurz gesagt
Bildoptimierung für SEO bedeutet, das Gewicht der Bilder zu reduzieren und sie korrekt zu beschreiben, damit die Seite schnell lädt (Core Web Vitals) und für Google verständlich ist. In der Praxis: Verwenden Sie moderne Formate (WebP/AVIF), Komprimierung und passende Abmessungen, ergänzen Sie ein beschreibendes Alt-Attribut und einen sinnvollen Dateinamen und aktivieren Sie Lazy Loading sowie responsive Größen. Leichte, gut beschriebene Bilder verbessern Geschwindigkeit, Barrierefreiheit und die Sichtbarkeit in der Bildersuche.
Warum Bildoptimierung Ihre Google-Rankings beeinflusst
Google bewertet die reale Ladegeschwindigkeit einer Seite über die Core-Web-Vitals-Metriken. Die wichtigste für Bilder ist LCP (Largest Contentful Paint) — die Zeit, nach der das größte sichtbare Element auf dem Bildschirm erscheint. Sehr oft ist dieses Element genau das große Header-Bild oder ein Produktfoto. Wenn es zu viel wiegt oder zu langsam lädt, bekommt die ganze Seite ein schlechteres Ergebnis.
Der zweite Grund ist einfacher: Niemand wartet, bis eine langsame Seite geladen ist. Der Nutzer schließt den Tab und kehrt zu den Suchergebnissen zurück — und Google sieht das. Leichte, schnell ladende Bilder verbessern gleichzeitig das Nutzererlebnis und die Signale an die Suchmaschine.
Wählen Sie das richtige Format: WebP oder AVIF
Die alten Formate (JPEG, PNG, GIF) funktionieren weiterhin, sind aber schwerer als ihre modernen Pendants. Der heutige Standard:
- WebP — ein guter Kompromiss: deutlich kleinere Datei als JPEG bei ähnlicher Qualität, von allen aktuellen Browsern unterstützt.
- AVIF — noch bessere Komprimierung als WebP, ideal für große Fotos und Produktgalerien.
- JPEG — ein sinnvoller Fallback für fotografische Bilder, wenn Sie aus irgendeinem Grund kein WebP/AVIF verwenden.
- PNG — nur für Grafiken mit Transparenz oder scharfen Kanten (Logos, Icons, Screenshots).
- SVG — für Logos und einfache Icons: skaliert ohne Qualitätsverlust und wiegt nur wenige Kilobyte.
In der Praxis: Exportieren Sie Fotos als WebP oder AVIF und halten Sie Logos und Icons in SVG. Viele Systeme (auch WordPress mit dem passenden Plugin) können WebP automatisch ausliefern.
Passen Sie die Abmessungen an den Platz auf der Seite an
Der häufigste Fehler ist das Hochladen eines 4000 px breiten Bildes in einen Bereich, der auf der Seite 600 px breit ist. Der Browser verkleinert es zwar, muss aber vorher die gesamte schwere Datei herunterladen. Bevor Sie ein Bild hochladen:
- prüfen Sie, wie breit der Container auf der Seite tatsächlich ist (z. B. 800 px für ein Bild im Inhalt),
- bereiten Sie eine Version in dieser Breite plus Reserve für Retina-Bildschirme vor (in der Regel 2×),
- nutzen Sie für verschiedene Auflösungen die Attribute
srcset/sizes, damit ein Smartphone nicht die Desktop-Version herunterlädt.
Dasselbe gilt für Produktfotos im Shop — Miniaturen in der Produktliste brauchen nicht die volle Auflösung der Produktseite.
Reduzieren Sie die Dateigröße durch Komprimierung
Je leichter das Bild, desto schneller lädt die Seite. Für die Komprimierung reichen kostenlose Tools wie TinyPNG, Squoosh oder Komprimierungs-Plugins für WordPress. Gute, leicht verlustbehaftete Einstellungen können eine Datei halbieren, ohne dass ein Qualitätsverlust sichtbar wird. Die Regel ist einfach: Beurteilen Sie die Qualität mit dem Auge, nicht nur anhand der Kilobyte-Zahl — zielen Sie auf die kleinste Datei, die noch gut aussieht.
Dateiname und Alt-Attribut
Der Dateiname sollte beschreiben, was auf dem Bild zu sehen ist, und ein Keyword enthalten — z. B. schwarze-sportschuhe.webp statt IMG_2841.webp. Ohne Sonderzeichen und Leerzeichen (verwenden Sie Bindestriche).
Das Alt-Attribut ist die Textbeschreibung einer Grafik im HTML-Code. Es erfüllt drei Funktionen: Es hilft Menschen, die Screenreader nutzen, es wird angezeigt, wenn das Bild nicht lädt, und es hilft Google, den Inhalt des Bildes zu verstehen (u. a. in der Google-Bildersuche). Schreiben Sie eine kurze, natürliche Beschreibung dessen, was tatsächlich zu sehen ist — ohne Keywords mit Gewalt hineinzustopfen.
Lazy Loading und Ladereihenfolge
Nicht alle Bilder müssen sofort laden. Lazy Loading (das Attribut loading="lazy") sorgt dafür, dass Bilder außerhalb des sichtbaren Bereichs erst geladen werden, wenn der Nutzer zu ihnen scrollt. Wichtige Ausnahme: das für LCP verantwortliche Bild (in der Regel das erste große Bild oben) sollte mit Priorität laden — geben Sie ihm loading="eager" oder fetchpriority="high" und nehmen Sie es vom Lazy Loading aus. So erscheint das wichtigste Element schnell, und der Rest belastet den Seitenstart nicht.
Produktbilder im E-Commerce-Shop
Im Shop spielen Bilder eine Doppelrolle: Sie verkaufen das Produkt und beeinflussen die Performance. Daran sollten Sie denken:
- Einheitliche Größe und Bildausschnitt — Produktfotos auf weißem Hintergrund wirken aufgeräumt und laden schneller.
- Produktliste vs. Produktseite — liefern Sie in der Liste Miniaturen aus und halten Sie die volle Auflösung auf der Produktseite vor.
- Strukturierte Daten — das Produktbild sollte im Product-Schema (Feld
image) hinterlegt sein, damit es in den Rich Results erscheint. - Bilder-Sitemap — das Aufnehmen von Bildern in die XML-Sitemap erleichtert Google die Indexierung der Grafiken, was besonders in Shops mit vielen Produkten wichtig ist.
Ein durch schwere Bilder langsamer Shop bedeutet real verlorene Verkäufe. Wenn Sie das Ausmaß des Problems abschätzen möchten, werfen Sie einen Blick auf unseren Umsatzverlust-Rechner.
So prüfen Sie, ob Bilder Ihre Seite ausbremsen
Der einfachste Test ist PageSpeed Insights — es zeigt das Core-Web-Vitals-Ergebnis und benennt direkt die Bilder, die verbessert werden sollten (zu groß, im alten Format, ohne Abmessungen). Im Diagnose-Bereich finden Sie die konkreten Dateien und die möglichen Einsparungen in Kilobyte. Das ist eine gute Roadmap für den Einstieg — die größten Gewinne bringt meist die Optimierung der wenigen schwersten Bilder.
Häufig gestellte Fragen
Ist WebP für SEO besser als JPEG?
Ja, in der Praxis fast immer. WebP liefert eine kleinere Datei bei ähnlicher Qualität, was das Laden beschleunigt und den LCP verbessert. Das Format selbst ist kein Rankingfaktor, aber die Geschwindigkeit, die es ermöglicht, sehr wohl.
Wie viel sollte ein Bild auf einer Website wiegen?
Es gibt keine feste Zahl, denn das hängt von den Abmessungen und der Rolle des Bildes ab. Die Faustregel: Zielen Sie auf die kleinstmögliche Datei, die noch gut aussieht. Bilder im Inhalt lassen sich in der Regel auf wenige Dutzend Kilobyte reduzieren, ohne dass ein Qualitätsverlust sichtbar wird.
Schadet Lazy Loading dem SEO?
Nein — solange Sie es nicht auf das für LCP verantwortliche Bild anwenden. Lazy Loading für Bilder unterhalb des ersten sichtbaren Bereichs wird empfohlen. Das Header-Bild sollte dagegen mit Priorität laden, um den LCP nicht zu verschlechtern.
Muss ich bei jedem Bild das Alt-Attribut ausfüllen?
Ja, das Alt-Attribut sollte bei jedem Bild ausgefüllt werden, das Inhalt transportiert — das ist ein Standard der Barrierefreiheit und hilft Google, die Grafik zu verstehen. Rein dekorative Grafiken (z. B. Hintergründe) können ein leeres Alt-Attribut haben, damit Screenreader sie überspringen.
Erfordert Bildoptimierung Programmierkenntnisse?
Die Grundlagen nicht — Komprimierung, das richtige Format und beschreibende Dateinamen kann jeder umsetzen. Fortgeschrittenere Dinge (srcset, fetchpriority, automatische WebP-Auslieferung) werden in der Regel auf Template- oder Plugin-Ebene umgesetzt — hier lohnt es sich manchmal, Hilfe in Anspruch zu nehmen.
Sie möchten eine schnelle Website, die gut rankt?
In der Marketingagentur SEMTAK kümmern wir uns um die technische Seite von Performance und SEO — von Bildformaten bis zu den Core Web Vitals:
- SEO-Audit — wir prüfen, was Ihre Seite ausbremst und die Sichtbarkeit blockiert.
- Website-SEO — mehr Traffic aus Google auf einem gesunden technischen Fundament.
- Onlineshop-SEO — SEO für E-Commerce, wo Geschwindigkeit direkt in Umsatz mündet.
- WooCommerce-Shop-Erstellung — schnelle Shops, von Anfang an optimiert.
Mehr Praxiswissen finden Sie in den Beiträgen: WooCommerce-Shop beschleunigen und WooCommerce-SEO — wo anfangen.
