Bilder für die Website optimieren: schneller laden, besser ranken

Wer die Ladezeit einer Website verbessern will, fängt am besten bei den Bildern an. Sie verursachen auf typischen Seiten mehr übertragene Daten als HTML, CSS und JavaScript zusammen. Genau deshalb ist Bildoptimierung der Hebel mit dem größten Effekt pro Aufwand. Dieser Beitrag zeigt, welche vier Stellschrauben zählen und wie du sie systematisch angehst.

Warum Bilder über die Geschwindigkeit entscheiden

Eine durchschnittliche Webseite überträgt mehrere Megabyte an Daten, und der Löwenanteil entfällt auf Bilder. Während Code meist im Kilobyte-Bereich liegt, schlägt ein einziges unoptimiertes Hero-Foto schnell mit ein bis zwei Megabyte zu Buche. Wer also an der Performance schraubt, ohne die Bilder anzufassen, optimiert am falschen Ende.

Das ist die gute Nachricht: Kaum eine andere Maßnahme bringt so viel mit so wenig Aufwand. Ein Foto von 1,8 Megabyte auf 400 Kilobyte zu drücken, ist mit dem richtigen Format eine Sache von Sekunden und reduziert die Ladelast dieses Bildes um fast achtzig Prozent. Über eine ganze Seite summiert sich das zu einem deutlich schnelleren Aufbau.

Hinzu kommt ein oft unterschätzter Faktor: das mobile Internet. Ein Großteil der Besucher kommt über das Smartphone, häufig über eine wackelige Mobilfunkverbindung. Was im heimischen WLAN in Sekundenbruchteilen lädt, kann unterwegs zur Geduldsprobe werden. Schwere Bilder treffen genau diese Nutzer am härtesten. Wer Bilder optimiert, verbessert die Seite also nicht nur abstrakt, sondern macht sie für die reale Mehrheit der Besucher spürbar nutzbarer.

Die vier Stellschrauben der Bildoptimierung

Bildoptimierung klingt komplex, läuft aber auf vier konkrete Hebel hinaus. Die folgende Tabelle ordnet sie nach Wirkung und Aufwand.

Stellschraube	Was zu tun ist	Wirkung	Aufwand
Format	JPG und PNG nach WebP umwandeln	sehr hoch	gering
Anzeigegröße	auf tatsächliche Breite herunterskalieren	hoch	mittel
Qualität	sinnvollen Wert wählen, meist 75 bis 85	hoch	gering
Ladeverhalten	Lazy Loading, width und height setzen	mittel	gering

Der wirksamste und einfachste Schritt ist das Format. Schon das Umwandeln nach WebP, ohne irgendetwas anderes zu ändern, schrumpft die meisten Bilder deutlich. Erst danach lohnt es sich, an Anzeigegröße und Qualität zu feilen. Das Ladeverhalten ist die Feinabstimmung, die den ersten Eindruck der Seite zusätzlich beschleunigt.

Das richtige Format: WebP statt JPG und PNG

WebP wird von allen aktuellen Browsern unterstützt und vereint die Stärken der älteren Formate. Es komprimiert Fotos kleiner als JPG und beherrscht gleichzeitig Transparenz wie PNG. Für Webseiten ist es damit in fast allen Fällen die erste Wahl. Den Vergleich der Formate im Detail behandelt unser Ratgeber WebP gegen PNG und JPG.

Die richtige Anzeigegröße

Ein häufiger Fehler ist, ein riesiges Bild direkt aus der Kamera in einen kleinen Platz zu setzen. Ein 4000 Pixel breites Foto in einem Bereich von 800 Pixeln Breite verschwendet Bandbreite, denn der Browser muss die volle Datei laden und dann herunterrechnen. Skaliere das Bild vorher auf die tatsächliche Anzeigegröße. Für hochauflösende Displays darfst du etwa das Doppelte der CSS-Breite ansetzen, also rund 1600 Pixel für einen 800-Pixel-Platz.

Qualität und Ladeverhalten

Die Qualität steuert den Kompromiss zwischen Größe und Optik. Für Webfotos liegt der praktische Bereich bei 75 bis 85, mehr dazu im Ratgeber WebP-Qualität und Kompression. Beim Ladeverhalten helfen zwei Kniffe: Lazy Loading lädt Bilder erst beim Heranscrollen, und feste width- und height-Angaben reservieren den Platz, sodass das Layout beim Nachladen nicht springt. Eine schrittweise Anleitung findest du unter Ladezeit verbessern.

Core Web Vitals: warum Google die Ladezeit misst

Google bewertet Webseiten nicht nur nach Inhalt, sondern auch nach Nutzererlebnis. Dafür gibt es die Core Web Vitals, eine Reihe messbarer Werte. Der wichtigste für Bilder ist der LCP, der Largest Contentful Paint. Er misst, wann das größte sichtbare Element fertig geladen ist, und das ist auf vielen Seiten ein großes Bild.

Ein gutes LCP-Ziel liegt bei unter 2,5 Sekunden. Ein überdimensioniertes Hero-Bild reißt diesen Wert leicht über vier Sekunden, und schon wirkt die Seite träge. Weil langsame Seiten Besucher abspringen lassen, fließt die Geschwindigkeit als Rankingsignal in die Suche ein. Bei zwei inhaltlich gleichwertigen Seiten gewinnt die schnellere.

Neben dem LCP zählt ein zweiter Wert direkt zur Bildoptimierung: die Layout-Stabilität, im Fachjargon Cumulative Layout Shift. Sie misst, wie stark Inhalte beim Laden noch herumspringen. Genau das passiert, wenn ein Bild ohne reservierten Platz nachgeladen wird und plötzlich den darunterliegenden Text nach unten schiebt. Wer für jedes Bild width und height im Markup angibt, reserviert den Platz von Anfang an. Der Browser weiß dann, wie viel Raum das Bild braucht, und nichts verrutscht. Diese kleine Angabe verbessert die Stabilität messbar und verhindert den ärgerlichen Effekt, dass man auf einen Link tippt, der im letzten Moment weghüpft.

Beide Werte hängen zusammen: Ein optimiertes Bild lädt schneller, verbessert den LCP, und mit korrekten Größenangaben bleibt das Layout dabei ruhig. Bildoptimierung zahlt also gleich auf mehrere Core Web Vitals ein, nicht nur auf die reine Ladezeit.

Schnelligkeit ist kein Bonus mehr, sondern eine Erwartung. Wer Sekunden verschenkt, verschenkt Besucher.

Schritt für Schritt: so optimierst du eine bestehende Seite

Wenn eine Seite zu langsam lädt, lohnt ein strukturiertes Vorgehen, statt blind alle Bilder anzufassen. Diese fünf Schritte führen zuverlässig zum Ziel.

1. Größte Bilder finden. Öffne die Entwicklertools deines Browsers, geh auf den Netzwerk-Tab und sortiere die geladenen Dateien nach Größe. Die größten Bilder oben sind deine ersten Kandidaten.
2. Umwandeln nach WebP. Lade die schwersten Bilder in den WebP-Konverter und stelle die Qualität auf etwa 80. Dank Stapelverarbeitung kannst du bis zu 50 Bilder auf einmal verarbeiten, ganz ohne Upload, weil alles lokal im Browser läuft.
3. Auf Anzeigegröße bringen. Prüfe, ob die Bilder größer sind als nötig, und skaliere sie auf die passende Breite herunter, bevor du sie umwandelst.
4. Im Code ersetzen. Tausche die alten Dateien gegen die WebP-Versionen, setze width und height und aktiviere Lazy Loading für Bilder unterhalb des ersten Sichtbereichs.
5. Messen und gegenprüfen. Lass die Seite anschließend durch ein Mess-Tool wie PageSpeed Insights laufen und vergleiche die Core-Web-Vitals-Werte mit dem Ausgangszustand.

Messen ist Pflicht, nicht Kür

Optimierung ohne Messung ist Raten. Google PageSpeed Insights ist kostenlos, analysiert deine Seite und zeigt dir die Core Web Vitals samt konkreter Verbesserungsvorschläge. Oft taucht dort der Hinweis auf, Bilder in modernen Formaten auszuliefern oder korrekt zu dimensionieren, genau die Punkte, die dieser Beitrag behandelt.

Wichtig ist, vor und nach der Optimierung zu messen. Nur so siehst du schwarz auf weiß, wie viel die Umstellung gebracht hat. Erfahrungsgemäß ist der Sprung beim LCP nach dem Umwandeln großer Bilder am deutlichsten, und genau dieser Wert wirkt sich am stärksten auf das wahrgenommene Tempo aus. Wer es auf den SEO-Aspekt zuspitzen will, findet weiterführende Hinweise unter SEO-Bilder und für die Website.

Ein Hinweis zur Einordnung der Werte: PageSpeed Insights zeigt zwei Arten von Daten. Die Labordaten entstehen bei einem frischen Testlauf unter standardisierten Bedingungen und reagieren sofort auf deine Änderungen. Die Felddaten dagegen stammen von echten Besuchern und brauchen einige Wochen, bis sich eine Verbesserung dort niederschlägt. Wundere dich also nicht, wenn der Labortest direkt besser ausfällt, die Felddaten aber noch hinterherhängen. Für die Bewertung deiner Bildoptimierung sind zunächst die Labordaten der schnellere Gradmesser.

Was nach den Bildern noch hilft

Bilder sind der größte Hebel, aber nicht der einzige. Wenn deine Bilder optimiert sind und die Seite trotzdem zäh wirkt, lohnt ein Blick auf die übrigen Ressourcen. Schriftarten sind ein häufiger Bremsklotz: Werden mehrere Schriftschnitte von einem fremden Server geladen, verzögert das den Textaufbau. Selbst gehostete Schriften und ein bewusster Verzicht auf überflüssige Schnitte schaffen Abhilfe.

Auch JavaScript und CSS wollen schlank gehalten werden. Jedes zusätzliche Skript, das vor dem ersten Seitenaufbau geladen werden muss, kostet Zeit. Vieles davon lässt sich verzögert nachladen, ähnlich wie beim Lazy Loading von Bildern. Und schließlich spielt das Hosting eine Rolle: Ein schneller Server und ein Caching, das wiederkehrende Besucher mit bereits geladenen Dateien bedient, runden das Bild ab.

Der Reihenfolge nach gilt aber: erst die Bilder, dann der Rest. Weil sie den größten Anteil ausmachen, bringt ihre Optimierung den schnellsten und sichtbarsten Fortschritt. Alles Weitere ist Feinschliff auf einer bereits soliden Grundlage.

Der schnellste Weg zu einer schnellen Seite

Fassen wir zusammen, worauf es ankommt. Bilder sind der größte Datenposten, also liegt hier der größte Hebel. Wandle deine schwersten Bilder nach WebP um, liefere sie nur so groß aus wie nötig, wähle eine vernünftige Qualität und lade nachrangige Bilder verzögert. Miss vorher und nachher mit PageSpeed Insights, dann siehst du den Erfolg direkt am LCP. Diese Schritte kosten wenig Zeit, verbessern aber Ladegefühl, Core Web Vitals und damit die Chancen in der Suche spürbar. Der erste Schritt ist nur einen Klick entfernt im Konverter.