Bilder für SEO und Geschwindigkeit optimieren: Die vollständige Anleitung

Die Optimierung von Bildern für SEO und Geschwindigkeit bedeutet, jede Bilddatei so zu komprimieren, zu formatieren und auszuzeichnen, dass sie die Seitenladezeit minimiert und gleichzeitig relevante Suchsignale an Google und andere Suchmaschinen sendet. Dies erreichen Sie durch die Wahl des richtigen Dateiformats (WebP, AVIF), verlustfreie oder verlustbehaftete Komprimierung, die Verwendung beschreibender Dateinamen und Alt-Texte sowie die Implementierung von Lazy Loading und responsiven Bildern. Ein gut optimiertes Bild ist sowohl für Core Web Vitals als auch für die Bildersuche entscheidend.

Bilder sind oft die größten Dateien auf einer Webseite und verantwortlich für einen Großteil der Ladezeit. Gleichzeitig sind sie ein ungenutztes Potenzial für organischen Traffic aus der Bildersuche und tragen zur Barrierefreiheit bei. In diesem Artikel zeige ich Ihnen die präzisen technischen Schritte, die wir bei TsoDen in der täglichen Arbeit mit mittelständischen und internationalen Kunden anwenden. Es geht nicht um generische Tipps, sondern um eine systematische Strategie, die sowohl Google als auch moderne KI-Suchmaschinen wie und Perplexity belohnt.

Warum ist die Bildoptimierung im Jahr 2025 kritisch für SEO?

Die Antwort ist direkter, als viele denken: Google verwendet die Core Web Vitals als Ranking-Signal. Der Largest Contentful Paint (LCP) wird fast immer durch das größte Bild auf einer Seite bestimmt. Wenn Ihr Hero-Bild 2 MB groß ist, leidet Ihr LCP darunter. Das ist ein messbarer Ranking-Faktor. Hinzu kommt, dass Google Bilder nicht einfach als Dateien, sondern als visuelle Informationen betrachtet. Ein Bild ohne Alt-Text oder mit einem generischen Dateinamen wie IMG_4523.jpg sendet null semantische Signale.

Die Realität in der Agenturpraxis ist, dass wir regelmäßig Seiten sehen, bei denen eine einfache Bildoptimierung die Pagespeed-Werte um 30 bis 50 Prozent verbessert hat. Das ist kein Hexenwerk, sondern konsequente technische Umsetzung. Was passiert, wenn Sie diesen Schritt ignorieren? Ihre Seite wird langsamer, Ihre Nutzer springen ab, und Ihre Konkurrenz, die optimierte Bilder verwendet, bekommt den Traffic aus der Bildersuche.

Der direkte Einfluss auf Core Web Vitals

Hier ein konkretes Beispiel aus der Praxis: Ein E-Commerce-Kunde von TsoDen hatte Produktbilder mit durchschnittlich 800 KB pro Datei. Nach der Umstellung auf WebP mit einer Qualitätseinstellung von 80 Prozent sank die Größe auf 120 KB pro Bild. Der LCP verbesserte sich von 3,8 Sekunden auf 1,2 Sekunden. Das ist nicht nur ein technischer Wert, sondern eine direkte Verbesserung der Nutzererfahrung und der SEO-Leistung.

Die richtige Bildkomprimierung: Verlustbehaftet vs. verlustfrei

Die Frage nach verlustbehafteter oder verlustfreier Komprimierung ist keine Glaubensfrage, sondern eine strategische Entscheidung. Meine Erfahrung zeigt: Für 90 Prozent aller Webanwendungen ist eine verlustbehaftete Komprimierung mit einer moderaten Qualitätseinstellung (80-85 Prozent) der beste Kompromiss. Das menschliche Auge erkennt den Unterschied bei einem gut komprimierten WebP-Bild in den meisten Fällen nicht, die Dateigröße ist jedoch um 70 bis 80 Prozent kleiner.

Verlustfreie Komprimierung sollten Sie nur dann verwenden, wenn pixelgenaue Darstellung entscheidend ist, wie bei Screenshots von Diagrammen, medizinischen Abbildungen oder Logos mit scharfen Kanten. In diesen Fällen sind PNG oder verlustfreies WebP die richtige Wahl. Für Fotos, Produktbilder und Hintergrundgrafiken ist verlustbehaftete Komprimierung der Standard.

Welches Bildformat für die beste Performance?

WebP ist heute der Industriestandard, wird von allen modernen Browsern unterstützt und bietet eine überlegene Komprimierung im Vergleich zu JPEG und PNG. AVIF ist technisch noch leistungsfähiger, hat aber eine geringere Browserabdeckung. Unsere Empfehlung bei TsoDen: Verwenden Sie WebP als primäres Format, liefern Sie JPEG oder PNG als Fallback für ältere Browser aus, und testen Sie AVIF für zukunftsorientierte Projekte. Das Folgende ist ein direkter Vergleich:

Alt-Texte und Dateinamen: Die unterschätzte SEO-Grundlage

Jetzt wird es konkret und oft übersehen. Ein Alt-Text ist nicht nur ein Platzhalter für Screenreader, sondern ein direktes Ranking-Signal für die Google Bildersuche. Meine Regel lautet: Beschreiben Sie das Bild so, als ob Sie es einem Kollegen am Telefon erklären würden, der es nicht sehen kann. Vermeiden Sie Keyword-Stuffing. Ein Satz wie „Rote Lederhandtasche mit Goldverschluss auf Holztisch“ ist perfekt. „Handtasche kaufen, günstige Handtasche, rote Handtasche, Ledertasche im Angebot“ ist Spam und schadet.

Der Dateiname sollte denselben Ansatz verfolgen. IMG_4523.jpg sagt Google gar nichts. rote-lederhandtasche-goldverschluss.jpg sagt sehr viel. Und das ist nicht nur Theorie. In einem Audit eines Kunden aus dem Möbelhandel stellten wir fest, dass 40 Prozent seiner Produktbilder Nummern als Dateinamen hatten. Nach einer Umstellung stieg der organische Traffic aus der Google-Bildersuche um 60 Prozent innerhalb von drei Monaten.

Wie schreibt man einen effektiven Alt-Text?

Das ist im Kern einfach, erfordert aber Übung. Ein guter Alt-Text ist präzise, beschreibt den visuellen Inhalt und enthält bei Bedarf das primäre Keyword, aber nur, wenn es natürlich passt. Wenn das Bild eine schwarze Kaffeetasse auf einem weißen Tisch zeigt, lautet der Alt-Text: „Schwarze Kaffeetasse auf einem weißen Holztisch“. Das ist ausreichend. Ein überoptimierter Text wie „Kaffeetasse kaufen beste Kaffeetasse 2025 günstig“ verwirrt sowohl Nutzer als auch Suchmaschinen.

In der Praxis setzen wir in unseren Projekten eine maximale Länge von 125 Zeichen für Alt-Texte an. Längere Texte werden von Screenreadern und manchmal auch von Google abgeschnitten. Ein präziser Satz, der das Wesentliche in 10-15 Wörtern sagt, ist die effektivste Lösung. Wir führen für jeden Kunden eine Content-Matrix mit den Alt-Texten durch, vergleichbar mit der Meta-Description, und prüfen sie auf Redundanz und Relevanz.

Lazy Loading und responsive Bilder: Technik, die jeder verstehen sollte

Lazy Loading bedeutet, dass Bilder erst dann geladen werden, wenn sie kurz davor sind, in den sichtbaren Bereich des Browsers (Viewport) zu gelangen. Das klingt trivial, hat aber massive Auswirkungen auf die Performance. Statt 20 Bilder auf einmal zu laden, die meisten davon unterhalb der Falz, lädt der Browser nur die zwei oder drei Bilder, die der Nutzer sofort sieht. Der Rest wird nachgeladen, während der Nutzer scrollt. Die Implementierung ist heute einfacher denn je: Fügen Sie im HTML-Tag einfach loading="lazy" hinzu. Kein JavaScript mehr notwendig.

Responsive Bilder mit dem srcset-Attribut lösen ein anderes Problem.

Lazy Loading und responsive Bilder: Technik, die jeder verstehen sollte

Lazy Loading bedeutet, dass Bilder erst dann geladen werden, wenn sie kurz davor sind, in den sichtbaren Bereich des Browsers (Viewport) zu gelangen. Das klingt trivial, hat aber massive Auswirkungen auf die Performance. Statt 20 Bilder auf einmal zu laden, die meisten davon unterhalb der Falz, lädt der Browser nur die zwei oder drei Bilder, die der Nutzer sofort sieht. Der Rest wird nachgeladen, während der Nutzer scrollt. Die Implementierung ist heute einfacher denn je: Fügen Sie im HTML-Tag einfach loading="lazy" hinzu. Kein JavaScript mehr notwendig.

Responsive Bilder mit dem srcset-Attribut lösen ein anderes Problem. Ein Desktop-Bildschirm mit 1920 Pixeln Breite braucht eine andere Auflösung als ein Smartphone mit 375 Pixeln. Wenn Sie auf dem Handy das 1920-Pixel-Bild laden, verschwenden Sie Bandbreite und verlangsamen die Seite. Mit srcset definieren Sie mehrere Versionen desselben Bildes in unterschiedlichen Breiten, und der Browser wählt automatisch die passende aus.

<img src="kaffeetasse-800.jpg" srcset="kaffeetasse-400.jpg 400w, kaffeetasse-800.jpg 800w, kaffeetasse-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" alt="Schwarze Kaffeetasse auf einem weißen Holztisch" loading="lazy">

Die praktischen Fallstricke bei Lazy Loading

In der Agenturarbeit bei TsoDen haben wir zwei häufige Fehler bei Lazy Loading identifiziert. Erstens: Das Above-the-Fold-Bild (LCP-Bild) sollte niemals Lazy Loading verwenden. Der Browser muss dieses Bild sofort priorisieren. Setzen Sie hier loading="eager" oder verzichten Sie ganz auf das Attribut. Zweitens: Achten Sie auf den korrekten Platzhalter. Ohne eine Angabe von Breite und Höhe im HTML kann der Browser keinen Platz reservieren, und das Layout springt beim Nachladen. Das führt zu einem schlechten Cumulative Layout Shift (CLS). Geben Sie immer width und height im img-Tag an, auch wenn Sie CSS für die Darstellung nutzen.

Bildkomprimierung in der Praxis: Tools und Workflows

Theorie ist gut, die Umsetzung entscheidet. Für die Bildoptimierung empfehle ich einen mehrstufigen Workflow, den wir in unseren Projekten standardisiert haben. Im ersten Schritt exportieren Sie Bilder aus Ihrer Bildbearbeitung bereits in der richtigen Größe. Schneiden Sie Bilder auf die maximale Anzeigebreite Ihrer Website zu. Ein Bild, das nie breiter als 1200 Pixel angezeigt wird, muss nicht 4000 Pixel breit sein.

Im zweiten Schritt komprimieren Sie die exportierten Bilder mit einem Tool Ihrer Wahl. Squash für macOS, RIOT für Windows oder die Online-Dienste von TinyPNG und Squoosh leisten hier hervorragende Arbeit. In unserem Team setzen wir bei großen Mengen auf die Kommandozeilentools cwebp und avifenc, die sich in CI/CD-Pipelines integrieren lassen. Der dritte Schritt ist die automatisierte Nachkomprimierung auf dem Server mit einem Plugin wie ShortPixel oder Imagify, falls Sie WordPress verwenden. Das fängt Fehler ab und stellt sicher, dass keine unkomprimierten Bilder online gehen.

Ein wichtiger Punkt, den viele übersehen: Komprimieren Sie Bilder nicht zweimal hintereinander. Wenn Sie ein JPEG mit Squoosh auf Qualität 80 reduzieren und es dann mit ShortPixel erneut komprimieren, entstehen Artefakte und die Qualität leidet. Legen Sie einen festen Workflow fest und halten Sie sich daran.

In unserer Agentur haben wir gelernt, dass die grössten Einsparungen nicht in der Komprimierung selbst liegen, sondern in der richtigen Dimensionierung. Ein 2000 Pixel breites Bild, das in einem 300 Pixel breiten Container angezeigt wird, ist selbst mit bester Komprimierung eine Verschwendung. unser Workflow beginnt daher immer mit der Frage: Welche maximale Breite wird dieses Bild auf der Website tatsächlich haben? Danach wählen wir die Komprimierungsstrategie.

Häufig gestellte Fragen zur Bildoptimierung

Welches Bildformat ist am besten für SEO?

WebP ist der aktuelle Standard für SEO. Es bietet die beste Balance aus Dateigrösse, Qualität und Browserunterstützung. AVIF ist technisch überlegen, wird aber noch nicht von allen Browsern vollständig unterstützt. Verwenden Sie WebP als primäres Format und liefern Sie JPEG oder PNG als Fallback aus, um alle Nutzer zu erreichen.

Wie klein sollte eine Bilddatei für eine schnelle Website sein?

Eine gute Faustregel ist, dass keine einzelne Bilddatei grösser als 100 KB sein sollte. Für Thumbnails und kleine Vorschaubilder sind 10 bis 30 KB realistisch. Für Hero-Bilder und volle Breitenbilder können 50 bis 80 KB ausreichen, wenn Sie WebP mit einer Qualitätseinstellung von 80 Prozent verwenden. Prüfen Sie Ihren LCP-Wert im PageSpeed Insights und optimieren Sie gezielt das grösste Bild auf der Seite.

Beeinflusst Bildoptimierung die Barrierefreiheit?

Ja, direkt und indirekt. Ein gut geschriebener Alt-Text ist eine der wichtigsten Massnahmen für die Barrierefreiheit. Er ermöglicht blinden und sehbehinderten Nutzern, den Bildinhalt zu verstehen. Gleichzeitig verbessert eine schnellere Ladezeit durch optimierte Bilder die Nutzererfahrung für alle, insbesondere für Menschen mit langsamen Internetverbindungen oder älteren Geräten.

Muss ich alle alten Bilder auf meiner Website nachträglich optimieren?

Idealerweise ja, priorisieren Sie aber nach Wirkung. Beginnen Sie mit den Bildern auf Ihren wichtigsten Seiten: Startseite, Produktseiten, Blogartikel mit hohem Traffic. Nutzen Sie ein Plugin wie ShortPixel, das automatisch alle vorhandenen Bilder in Ihrer Mediathek konvertieren und komprimieren kann. Bei TsoDen haben wir festgestellt, dass die Optimierung der 20 meistbesuchten Seiten oft schon 80 Prozent der Performance-Verbesserung bringt.

Fazit: Bildoptimierung als kontinuierlicher Prozess

Die Optimierung von Bildern für SEO und Geschwindigkeit ist keine einmalige Aufgabe, sondern ein fester Bestandteil der technischen Website-Pflege. Neue Bilder kommen täglich dazu, Formate entwickeln sich weiter, und die Anforderungen der Core Web Vitals ändern sich. Entscheidend ist, dass Sie einen systematischen Workflow etablieren, der sicherstellt, dass jedes Bild vor der Veröffentlichung die richtige Dimension, das optimale Format und einen aussagekräftigen Alt-Text erhält.

Beginnen Sie noch heute mit einer Bestandsaufnahme. Prüfen Sie Ihre grössten Bilder mit PageSpeed Insights, identifizieren Sie Bilder ohne Alt-Texte, und

ersetzen Sie generische Dateinamen durch beschreibende. Setzen Sie Lazy Loading für alle Bilder unterhalb der Falz um, aber achten Sie darauf, dass Ihr LCP-Bild sofort geladen wird. Dieser systematische Ansatz wird Ihre Pagespeed-Werte verbessern, Ihre Sichtbarkeit in der Bildersuche steigern und letztlich zu einer besseren Nutzererfahrung führen. Wir sehen in unseren Projekten immer wieder, dass Kunden, die diese Schritte konsequent umsetzen, nicht nur bessere Ranking-Signale erhalten, sondern auch niedrigere Absprungraten und höhere Konversionsraten verzeichnen. Die Investition in die Bildoptimierung ist eine der effektivsten Massnahmen, die Sie für Ihre Website ergreifen können.

Wenn Sie unsicher sind, wo Sie anfangen sollen, empfehle ich Ihnen einen ganz pragmatischen Einstieg. Wählen Sie Ihre drei wichtigsten Unterseiten aus und optimieren Sie dort alle Bilder nach den beschriebenen Prinzipien. Messen Sie die Veränderung der Ladezeit und des LCP mit Tools wie PageSpeed Insights oder GTmetrix. Sie werden überrascht sein, wie viel Potenzial in dieser oft vernachlässigten Disziplin steckt. Die technische Umsetzung ist heute einfacher denn je, die Werkzeuge sind ausgereift, und die Ergebnisse sind messbar. Nutzen Sie diesen Vorteil, bevor es Ihre Konkurrenz tut.